رسم دیاگرام منطق برنامه با Drawio

[seyal]

می‌خواستم یک اسکریپتی رو بنویسم اما به هنگام نوشتن اون مدام ذهنم توقف می‌کرد
که خوب الان از چه روشی استفاده کنم؟ این زبان برنامه‌نویسی بهتره یا فلان؟
و از این دست سوالاتی که به جای تمرکز روی کار، روی ابزارهای جانبی تمرکز دارند.

به این نتیجه رسیدم که اصلا من همین ابتدا صرفا یک دید کلی از اسکریپت خودم دارم و دقیق نمی‌دونم چه کاری بناست انجام بدم
و به همین خاطر هست که مدام از این دست سوالات در ذهن من تکرار میشن.

گفتم چطور هست که ابتدا بر اساس نوشته‌هایی که دارم یک ساختار منطقی از کاری که کد قراره انجام بده رسم کنم و سپس شروع به کدنویسی اون کنم
و برای این کار با نرم‌افزار drawio آشنا شدم.
محیط توسعه سریع و زیبایی رو در اختیارتون می‌زاره تا قبل از اینکه کد رو بنویسید منطق اون رو با دیاگرام رسم کنید
وقتی یک دید کلی از دیاگرام داشته باشید خیلی بهتر می‌تونید انتخاب‌هاتون رو به هنگام کدنویسی مدیریت کنید و به عبارتی در کلاف کد سردرگم نمی‌شید.
لینک وبسایت - لینک گیتهاب

مزایا:
۱- امکان کار تیمی
۲- همگام‌سازی با گیت
۳- داشتن حالت اجرای کاملا آفلاین
۴- خروجی گرفتن به فرمت‌های مختلف svg , png و ...

همچنین استفاده از این اشکال به طور کلی دارای یک‌سری اصول و استاندارد ها هست
برای مطالعه بیشتر می‌تونید از این کتاب استفاده کنید:

کد: [انتخاب]

https://www.omg.org/cgi-bin/doc?formal/03-03-10.pdfالبته توصیه خودم این هست این ها رو تدریجا یاد بگیرید و به خاطر این موضوع متوقف نشید.
تو خود وبسایت drawio هم اطلاعاتی در مورد استانداردها موجوده.

حتی از این نرم‌افزار برای رسم مایندمپ هم می‌تونید استفاده کنید(هرچند اختصاصی نیست) و به خوبی از free hand writing هم پشتیبانی می‌کنه.
حالت‌های مختلفی داره که اسکرین‌شات از بعضی گذاشتم.
مثلا برای همین حالت مایندمپ که گفتیم وارد منوی

کد: [انتخاب]

Extra>Theme بشید و گزینه sketch رو انتخاب کنید و سپس یک‌بار برنامه رو ریستارت کنید.

[seyal]

این صفحه از drawio انواع دیاگرام‌ها رو شرح داده:
https://www.drawio.com/docs/diagram-types/
و با کلیک روی اون دیاگرام خاص می‌تونید از راهنمایی‌ها و نکاتی که برنامه برای رسم اون داده استفاده کنید

مثلا این لینک برای فلوچارت هست.
می‌تونید از چند نوع همزمان استفاده کنید. مثلا با تشکیل صفحه جدا از قسمت پایین صفحه برای فلوچارت و مایندمپ برنامه دو تا صفحه جدا داشته باشید. یا حتی متمایز کردن اون در همین بوم اصلی با کشیدن یک مستطیل با رنگ متفاوت به عنوان پیش‌زمینه.

[seyal]

برای اینکه حالت اجرای روان نزدیک به 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 جایگزین قبلی کنید.

[seyal]

خوب از اونجایی که دوست نداشتم فایلها مدام در فضای مرورگر ذخیره بشن و به اون وابسته باشند از این روش نصب که بهتر و انعطاف‌پذیرتره استفاده می‌کنیم:

۱- این پوشه رو جایی که دوست دارید بسازید:

کد: [انتخاب]

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_USE_HTTP: "true"

  storage-manager:
    image: filebrowser/filebrowser:latest
    container_name: drawio-storage-manager
    restart: unless-stopped
    ports:
      - "127.0.0.1:8182:80"
    volumes:
      - ${DRAWIO_FILES}:/srv:Z
      - ./filebrowser-db:/database


۳- ساخت فایل متغیرها :

کد: [انتخاب]

nano .envقرار دادن این محتویات:

کد: [انتخاب]

# Draw.io App Configurations
DRAWIO_CONFIG={"foldingIconSize":18,"ui":"light"}
DRAWIO_FILES=/home/UOUR_USERNAME/Documents/Drawioو سپس اجرای این دستور:

کد: [انتخاب]

mkdir -p ~/Documents/Drawio
دو نکته:
* عبارت YOUR_USERNAME رو به نام کاربر فعلی که در حال استفاده هستید تغییر بدید.
* تو خط اول این فایل تم برنامه و سایر ویژگی‌ها رو برای آشنایی با نحوه تغییر این تنظیمات تعیین کردم که یکی دیگه از برتری‌های این روش نصب در مقایسه با روش قبلی هست.


۴- اجرای این دستور در محیط این پوشه:

کد: [انتخاب]

docker compose up -d
اینجا کار تموم هست. حالا دو تا مورد داریم:
۱- برنامه drawio که با این آدرس در دسترس هست:

کد: [انتخاب]

http://127.0.0.1:8181۲- و برنامه مدیرفایل که در این آدرس دسترسی دارید:

کد: [انتخاب]

http://127.0.0.1:8182
اما در مورد برنامه مدیرفایل وقتی دفعه اول وارد می‌شید از شما نام کاربری و رمزعبور می‌خواد. این دستور رو در ترمینال اجرا کنید اونجا می‌تونید نام کاربری و پسورد اولیه رو ببینید. بعد از وارد شدن به پنل اون رو می‌تونید به دلخواه خودتون تغییر بدید.

کد: [انتخاب]

docker logs drawio-storage-manager

پس از  انجام این مراحل خیلی راحت می‌تونید دیتابیس فایلهای ذخیره شده رو مرتب کنید و علاوه در مرورگر در پوشه Documents/drawio هم ذخیره می‌شن و نیاز ندارید مدام از گزینه save as و export استفاده کنید.

[seyal]

نکته در مورد اشتراک این دیاگرام‌ها با ابزارهای AI :

برای اینکه بتونید این دیاگرامی که کشیدید رو با AI به اشتراک بزارید به این روش عمل کنید:
۱- ابتدا با نگه‌داشتن دکمه shift اون قسمت‌هایی که می‌خواهید در مورد منطقش با AI صحبت کنید رو از بالا به پایین انتخاب کنید.
۲- روی گزینه Export as xml در منو کلیک کنید و متن رو در کپی کنید.
۳-  با استفاده از ابزار یکی از این دو لینک زیر این قطعه کد xml رو به یک ساختار مرتب و تمیز دیاگرام mermaid تبدیل کنید که کمترین زوائد رو داشته باشه:

کد: [انتخاب]

https://github.com/Salva5297/drawio2mermaid/tree/main

کد: [انتخاب]

https://github.com/kornellewy/drawio_to_mermaidحتی می‌تونید خودتون یک ابزار بهتر هم بسازید اگر خواستید
۴- این ساختار mermaid حالا حجم حداقلی داره و می‌تونید به راحتی با AI اشتراک بزارید
۵- از AI بخواهید که خروجی که میده اون هم به فرمت mermaid باشه
۶- در اپ drawio می‌تونید کدهای mermaid رو در قسمت Arrange << Insert << Mermaid وارد کنید
۷- حالا به شکل گرافیکی دیاگرام اصلاح شده رو دارید می‌تونید اون قسمت‌هایی که مدنظرتون هست رو ببرید و در کد اصلی xml که داشتید جایگزین کنید.

یک نکته ریز هم برای ورک‌فلوی بهتر:
برای اینکه زیاد صفحه شلوع نشه می‌تونید از container ها استفاده کنید. مثلا به این لینک نگاه کنید توضیح داده که چطور باید از اونها استفاده کنید و چه مزیتی دارند:
https://www.drawio.com/docs/manual/shapes/container-shapes