خوب، از اونجایی که دوست نداشتم فایلها مدام در فضای مرورگر ذخیره بشن و به اون وابسته باشند، از این روش نصب که بهتر و انعطافپذیرتره استفاده میکنیم.
البته خود 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 تموم میشه رو استخراج میکنه.
موضوع: رسم دیاگرام منطق برنامه با Drawio (دفعات بازدید: 669 بار)
