آخرین ارسال‌ها11
معرفی نرم‌افزار / پاسخ : رسم دیاگرام منطق برنامه با Drawio
« آخرین ارسال توسط seyal 01 مهر 1405، 07:29 ب‌ظ »خوب، از اونجایی که دوست نداشتم فایلها مدام در فضای مرورگر ذخیره بشن و به اون وابسته باشند، از این روش نصب که بهتر و انعطاف‌پذیرتره استفاده می‌کنیم.
البته خود Draw.io فایلها رو در فضای ذخیره‌سازی مرورگر نگه می‌داره، ولی مزیت این روش اینه که نصب برنامه، تنظیمات و اجرای اون کاملاً مستقل از مرورگر انجام میشه و هر زمان هم که بخوایم می‌تونیم فایل‌های ذخیره‌شده رو از فضای مرورگر استخراج کنیم.
۱- این پوشه رو جایی که دوست دارید بسازید:
۲- ساخت فایل docker compose :
قرار دادن این محتویات و ذخیره فایل:
۳- ساخت فایل متغیرها :
قرار دادن این محتویات:
این قسمت برای تعیین تنظیمات ظاهری Draw.io هست. مثلاً در اینجا تم برنامه رو روی حالت روشن گذاشتیم و اندازه‌ی آیکون‌های Collapse/Expand رو هم تعیین کردیم.
اگر بعداً خواستید تنظیمات دیگه‌ای رو تغییر بدید، کافی هست همین مقدار رو تغییر بدید و کانتینر رو دوباره اجرا کنید.
۴- اجرای Draw.io :
حالا در محیط همین پوشه این دستور رو اجرا کنید:
اینجا کار تموم هست.
حالا Draw.io از این آدرس در دسترس هست:
استخراج فایل‌های Draw.io از فضای مرورگر
یک موردی که هست Draw.io فایل‌هایی که داخل خودش ایجاد یا ذخیره می‌کنیم رو در فضای ذخیره‌سازی مرورگر نگه می‌داره. بنابراین اگر مرورگر یا پروفایل مرورگر رو حذف کنیم، ممکنه این فایلها هم از بین برن. البته خود drawio قابلیت دانلود تکی این فایلها رو به شما میده.
برای اینکه فایل‌های واقعی .drawio رو مستقل از مرورگر داشته باشیم، می‌تونیم اونها رو مستقیماً از فضای ذخیره‌سازی Draw.io استخراج کنیم.
درحالیکه در صفحه Draw.io هستید ابتدا F12 و سپس وارد قسمت Console بشید و این قطعه کد رو جایگذاری کنید:
این کد فایل‌های .drawio موجود در فضای ذخیره‌سازی Draw.io رو پیدا می‌کنه و همه رو داخل یک فایل به نام drawio-export.zip قرار میده.
مثلاً اگر سه فایل داشته باشید:
خروجی به این شکل خواهد بود:
بعد می‌تونید فایل ZIP رو در پوشه‌ای که برای فایل‌های Draw.io در نظر گرفتید Extract کنید.
یا اینکه حتی می‌تونید این عملکرد رو به شکل یک بوکمارک قابل کلیک در بیارید. کافیه که یک بوکمارک جدید تشکیل بدید و این کد زیر رو در قسمت URL جاگذاری کنید:
فقط یک نکته: این کد فقط فایل‌هایی که اسمشون با .drawio تموم میشه رو استخراج می‌کنه.
البته خود Draw.io فایلها رو در فضای ذخیره‌سازی مرورگر نگه می‌داره، ولی مزیت این روش اینه که نصب برنامه، تنظیمات و اجرای اون کاملاً مستقل از مرورگر انجام میشه و هر زمان هم که بخوایم می‌تونیم فایل‌های ذخیره‌شده رو از فضای مرورگر استخراج کنیم.
۱- این پوشه رو جایی که دوست دارید بسازید:
کد: [انتخاب]
mkdir drawio
cd drawio
۲- ساخت فایل docker compose :
کد: [انتخاب]
nano docker-compose.ymlقرار دادن این محتویات و ذخیره فایل:
کد: [انتخاب]
services:
drawio:
image: jgraph/drawio:latest
container_name: drawio
restart: unless-stopped
ports:
- "127.0.0.1:8181:8080"
environment:
DRAWIO_CONFIG: ${DRAWIO_CONFIG}
DRAWIO_USE_HTTP: "true"
۳- ساخت فایل متغیرها :
کد: [انتخاب]
nano .envقرار دادن این محتویات:
کد: [انتخاب]
# Draw.io App Configurations
DRAWIO_CONFIG={"foldingIconSize":18,"ui":"light"}این قسمت برای تعیین تنظیمات ظاهری Draw.io هست. مثلاً در اینجا تم برنامه رو روی حالت روشن گذاشتیم و اندازه‌ی آیکون‌های Collapse/Expand رو هم تعیین کردیم.
اگر بعداً خواستید تنظیمات دیگه‌ای رو تغییر بدید، کافی هست همین مقدار رو تغییر بدید و کانتینر رو دوباره اجرا کنید.
۴- اجرای Draw.io :
حالا در محیط همین پوشه این دستور رو اجرا کنید:
کد: [انتخاب]
docker compose up -dاینجا کار تموم هست.
حالا Draw.io از این آدرس در دسترس هست:
کد: [انتخاب]
http://127.0.0.1:8181استخراج فایل‌های Draw.io از فضای مرورگر
یک موردی که هست Draw.io فایل‌هایی که داخل خودش ایجاد یا ذخیره می‌کنیم رو در فضای ذخیره‌سازی مرورگر نگه می‌داره. بنابراین اگر مرورگر یا پروفایل مرورگر رو حذف کنیم، ممکنه این فایلها هم از بین برن. البته خود drawio قابلیت دانلود تکی این فایلها رو به شما میده.
برای اینکه فایل‌های واقعی .drawio رو مستقل از مرورگر داشته باشیم، می‌تونیم اونها رو مستقیماً از فضای ذخیره‌سازی Draw.io استخراج کنیم.
درحالیکه در صفحه Draw.io هستید ابتدا F12 و سپس وارد قسمت Console بشید و این قطعه کد رو جایگذاری کنید:
کد: [انتخاب]
(async () => {
if (!window.JSZip) {
await new Promise((resolve, reject) => {
const s = document.createElement("script");
s.src = "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js";
s.onload = resolve;
s.onerror = reject;
document.head.appendChild(s);
});
}
const db = await new Promise((resolve, reject) => {
const r = indexedDB.open("database");
r.onsuccess = () => resolve(r.result);
r.onerror = () => reject(r.error);
});
const tx = db.transaction("files", "readonly");
const records = await new Promise((resolve, reject) => {
const r = tx.objectStore("files").getAll();
r.onsuccess = () => resolve(r.result);
r.onerror = () => reject(r.error);
});
db.close();
const files = records.filter(
x => x.title?.toLowerCase().endsWith(".drawio") && x.data
);
if (!files.length) {
console.log("No .drawio files found.");
return;
}
const zip = new JSZip();
for (const file of files) {
zip.file(file.title, file.data);
console.log("Added:", file.title);
}
const blob = await zip.generateAsync({
type: "blob",
compression: "DEFLATE"
});
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "drawio-export.zip";
a.click();
setTimeout(() => URL.revokeObjectURL(url), 1000);
console.log(`✓ Exported ${files.length} Draw.io files`);
})();این کد فایل‌های .drawio موجود در فضای ذخیره‌سازی Draw.io رو پیدا می‌کنه و همه رو داخل یک فایل به نام drawio-export.zip قرار میده.
مثلاً اگر سه فایل داشته باشید:
کد: [انتخاب]
SyncScript.drawio
Untitled Diagram.drawio
MyProject.drawioخروجی به این شکل خواهد بود:
کد: [انتخاب]
drawio-export.zip
├── SyncScript.drawio
├── Untitled Diagram.drawio
└── MyProject.drawio
بعد می‌تونید فایل ZIP رو در پوشه‌ای که برای فایل‌های Draw.io در نظر گرفتید Extract کنید.
یا اینکه حتی می‌تونید این عملکرد رو به شکل یک بوکمارک قابل کلیک در بیارید. کافیه که یک بوکمارک جدید تشکیل بدید و این کد زیر رو در قسمت URL جاگذاری کنید:
کد: [انتخاب]
javascript:(async()=>{const d=await new Promise((r,j)=>{const x=indexedDB.open("database");x.onsuccess=()=>r(x.result);x.onerror=()=>j(x.error)}),f=await new Promise((r,j)=>{const x=d.transaction("files","readonly").objectStore("files").getAll();x.onsuccess=()=>r(x.result);x.onerror=()=>j(x.error)});d.close();const a=f.filter(x=>x.title?.toLowerCase().endsWith(".drawio")&&x.data);if(!a.length)return console.log("No Draw.io files found");const E=new TextEncoder,T=new Uint32Array(256);for(let n=0;n<256;n++){let c=n;for(let k=0;k<8;k++)c=c&1?0xedb88320^c>>>1:c>>>1;T[n]=c>>>0}const C=b=>{let c=0xffffffff;for(const x of b)c=T[(c^x)&255]^c>>>8;return(c^0xffffffff)>>>0},U=n=>new Uint8Array([n&255,n>>>8&255,n>>>16&255,n>>>24&255]),S=n=>new Uint8Array([n&255,n>>>8&255]),Q=(...x)=>{let r=new Uint8Array(x.reduce((s,a)=>s+a.length,0)),p=0;for(const a of x)r.set(a,p),p+=a.length;return r};let L=[],H=[],o=0;for(const x of a){const n=E.encode(x.title),b=E.encode(x.data),c=C(b),h=Q(U(0x04034b50),S(20),S(0x800),S(0),S(0),S(0),U(c),U(b.length),U(b.length),S(n.length),S(0),n);L.push(h,b);H.push(Q(U(0x02014b50),S(20),S(20),S(0x800),S(0),S(0),S(0),U(c),U(b.length),U(b.length),S(n.length),S(0),S(0),S(0),S(0),U(0),U(o),n));o+=h.length+b.length}const cd=Q(...H),z=Q(U(0x06054b50),S(0),S(0),S(a.length),S(a.length),U(cd.length),U(o),S(0)),u=URL.createObjectURL(new Blob([Q(...L),cd,z],{type:"application/zip"})),e=document.createElement("a");e.href=u;e.download="drawio-export.zip";e.click();setTimeout(()=>URL.revokeObjectURL(u),1e3);console.log(`%E2%9C%93 Exported ${a.length} Draw.io files`)})()فقط یک نکته: این کد فقط فایل‌هایی که اسمشون با .drawio تموم میشه رو استخراج می‌کنه.
