انجمن‌های فارسی اوبونتو
جامعه کاربران => معرفی نرم‌افزار => نویسنده: seyal در 11 شهریور 1405، 09:21 ق‌ظ
-
می‌خواستم یک اسکریپتی رو بنویسم اما به هنگام نوشتن اون مدام ذهنم توقف می‌کرد
که خوب الان از چه روشی استفاده کنم؟ این زبان برنامه‌نویسی بهتره یا فلان؟
و از این دست سوالاتی که به جای تمرکز روی کار، روی ابزارهای جانبی تمرکز دارند.
به این نتیجه رسیدم که اصلا من همین ابتدا صرفا یک دید کلی از اسکریپت خودم دارم و دقیق نمی‌دونم چه کاری بناست انجام بدم
و به همین خاطر هست که مدام از این دست سوالات در ذهن من تکرار میشن.
گفتم چطور هست که ابتدا بر اساس نوشته‌هایی که دارم یک ساختار منطقی از کاری که کد قراره انجام بده رسم کنم و سپس شروع به کدنویسی اون کنم
و برای این کار با نرم‌افزار drawio آشنا شدم.
محیط توسعه سریع و زیبایی رو در اختیارتون می‌زاره تا قبل از اینکه کد رو بنویسید منطق اون رو با دیاگرام رسم کنید
وقتی یک دید کلی از دیاگرام داشته باشید خیلی بهتر می‌تونید انتخاب‌هاتون رو به هنگام کدنویسی مدیریت کنید و به عبارتی در کلاف کد سردرگم نمی‌شید.
لینک وبسایت (https://www.drawio.com/) - لینک گیتهاب (https://github.com/jgraph/drawio-desktop)
مزایا:
۱- امکان کار تیمی
۲- همگام‌سازی با گیت
۳- داشتن حالت اجرای کاملا آفلاین
۴- خروجی گرفتن به فرمت‌های مختلف svg , png و ...
همچنین استفاده از این اشکال به طور کلی دارای یک‌سری اصول و استاندارد ها هست
برای مطالعه بیشتر می‌تونید از این کتاب استفاده کنید:
https://www.omg.org/cgi-bin/doc?formal/03-03-10.pdfالبته توصیه خودم این هست این ها رو تدریجا یاد بگیرید و به خاطر این موضوع متوقف نشید.
تو خود وبسایت drawio هم اطلاعاتی در مورد استانداردها موجوده.
حتی از این نرم‌افزار برای رسم مایندمپ هم می‌تونید استفاده کنید(هرچند اختصاصی نیست) و به خوبی از free hand writing هم پشتیبانی می‌کنه.
حالت‌های مختلفی داره که اسکرین‌شات از بعضی گذاشتم.
مثلا برای همین حالت مایندمپ که گفتیم وارد منوی
Extra>Theme بشید و گزینه sketch رو انتخاب کنید و سپس یک‌بار برنامه رو ریستارت کنید.
-
این صفحه از drawio انواع دیاگرام‌ها رو شرح داده:
https://www.drawio.com/docs/diagram-types/
و با کلیک روی اون دیاگرام خاص می‌تونید از راهنمایی‌ها و نکاتی که برنامه برای رسم اون داده استفاده کنید
مثلا این لینک (https://www.drawio.com/docs/getting-started/basic-flowchart/) برای فلوچارت هست.
می‌تونید از چند نوع همزمان استفاده کنید. مثلا با تشکیل صفحه جدا از قسمت پایین صفحه برای فلوچارت و مایندمپ برنامه دو تا صفحه جدا داشته باشید. یا حتی متمایز کردن اون در همین بوم اصلی با کشیدن یک مستطیل با رنگ متفاوت به عنوان پیش‌زمینه.
-
برای اینکه حالت اجرای روان نزدیک به native رو داشته باشید استفاده از ترکیب نسخه داکر + فایرفاکس رو بیشتر توصیه می‌کنم:
به این روش من با podman اون رو نصب کردم:
podman run -d --name drawio -p 8181:8080 -p 8443:8443 jgraph/drawio
و در مرورگر با این آدرس قابل دسترسی بود برام:
127.0.0.1:8181
و بسیار بهینه اجرا میشه.
البته مزایا و معایبی هم داره که مزیتش سرعت خیلی زیاد بدون درگیری سیستم با اکوسیستم الکترون هست
عیب هم اینه که چون داخل مرورگر اجرا میشه مستقیم نمی‌تونه فایلی رو تغییر بده و وقتی save می‌کنید فایل دانلود میشه به جای اینکه روی فایلی که باز کردید overwrite بشه
راه‌حل خوبی برای این مشکل پیدا نکردم
کسی تجربه‌ای داره؟
ویرایش: خوب داخل همین نسخه وب که نصب کردیم یک قابلیت خوب ذخیره در فضای مرورگر هست و با کلید Ctrl + s فایل تو دیتابیس مرورگر ذخیره میشه که از طریق منوی خود drawio می‌تونید این فضا رو مدیریت کنید. وقتی ویرایش تموم شد می‌تونید فایل نهایی رو با گزینه save as جایگزین قبلی کنید.
-
خوب، از اونجایی که دوست نداشتم فایلها مدام در فضای مرورگر ذخیره بشن و به اون وابسته باشند، از این روش نصب که بهتر و انعطاف‌پذیرتره استفاده می‌کنیم.
البته خود 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 تموم میشه رو استخراج می‌کنه.
-
نکته در مورد اشتراک این دیاگرام‌ها با ابزارهای AI :
برای اینکه بتونید این دیاگرامی که کشیدید رو با AI به اشتراک بزارید به این روش عمل کنید:
۱- ابتدا با نگه‌داشتن دکمه shift اون قسمت‌هایی که می‌خواهید در مورد منطقش با AI صحبت کنید رو از بالا به پایین انتخاب کنید.
۲- روی گزینه Export as xml در منو کلیک کنید و متن رو در حافظه کپی کنید.
۳- با استفاده از ابزار یکی از این دو لینک زیر این قطعه کد xml رو به یک ساختار مرتب و تمیز دیاگرام mermaid تبدیل کنید که کمترین زوائد رو داشته باشه:
https://github.com/Salva5297/drawio2mermaid/tree/mainhttps://github.com/kornellewy/drawio_to_mermaidحتی می‌تونید خودتون یک ابزار بهتر هم بسازید اگر خواستید
۴- این ساختار mermaid حالا حجم حداقلی داره و می‌تونید به راحتی با AI اشتراک بزارید
۵- از AI بخواهید که خروجی که میده اون هم به فرمت mermaid (https://github.com/mermaid-js/mermaid) باشه
۶- در اپ drawio می‌تونید کدهای mermaid رو در قسمت Arrange << Insert << Mermaid وارد کنید
۷- حالا به شکل گرافیکی دیاگرام اصلاح شده رو دارید می‌تونید اون قسمت‌هایی که مدنظرتون هست رو ببرید و در کد اصلی xml که داشتید جایگزین کنید.
یک نکته ریز هم برای ورک‌فلوی بهتر:
برای اینکه زیاد صفحه شلوع نشه می‌تونید از container ها استفاده کنید. مثلا به این لینک نگاه کنید توضیح داده که چطور باید از اونها استفاده کنید و چه مزیتی دارند:
https://www.drawio.com/docs/manual/shapes/container-shapes
-
باز هم یک روش بهتری برای جریان کاری پیدا کردم:
با توجه به اینکه mermaid ساختار بهتری برای رهگیری در گیت و کار با ابزارهای AI هست، از این روش استفاده کردم که فایل source of truth من به زبان mermaid باشه و نه فایل drawio.
یعنی به این صورت:
۱- شما با drawio ایده‌ها رو آزادانه‌تر ترسیم می‌کنید.
۲- اون قسمت‌هایی که فعلاً می‌خواهید روشون کار کنید رو با ابزاری که گفتیم تبدیل به mermaid می‌کنید.
۳- اون رو با AI به اشتراک می‌ذارید، نکته‌هاش رو تکمیل می‌کنید و از AI می‌خواید که به شما خروجی mermaid بده.
۴- این mermaid رو در ابزاری مثل mermaid code (http://github.com/m8524769/mermaid-code/) که یک ابزار بصری برای ویرایش و دیدن کدهای mermaid هست، جاگذاری می‌کنید. مزیتی که داره این هست که مستقیم می‌تونید فایلها رو مثل یک text editor روی سیستم ذخیره کنید.
۵- ویرایش مستقیم mermaid از لحاظ بصری و ایده‌پردازی جالب نیست. اینجا اگر خواستید ایده جدیدی اضافه کنید، کافی هست که اون رو در drawio ترسیم کنید و دوباره مراحل ۱ تا ۳ رو انجام بدید.
۶- حالا دوباره این کدهای جدید mermaid که گرفتید رو به اون mermaid قبلی اضافه می‌کنید تا کامل‌تر بشه.
مزیتی که این روش داره این هست که شما فرایند طراحی و ایده‌پردازی رو از فرایند نگه‌داری ساختاریافته جدا کردید و ذهن خیلی بهتر می‌تونه کار خودش رو انجام بده.