من شروع به نوشتن کد برای نمودارهایم کردم و خیلی سریع‌تر از کشیدن جعبه‌ها است.

وقتی واژهٔ «کد» را می‌شنویم، معمولاً فرض می‌کنیم که برای افراد فنی پیشرفته است. اما گاهی فقط به معنای وارد کردن دستورات ساده به یک برنامه برای دریافت نتیجه است. در این حالت، برنامه Mermaid است — یک کتابخانهٔ متن‌باز جاوااسکریپت با ویرایشگر زندهٔ تحت وب که دستورات قابل‌خواندن توسط انسان را به نمودارهایی مانند فلوچارت، نمودار دایره‌ای، نمودار گانت، نمودار توالی و تابلوی کانبان تبدیل می‌کند.

وقتی واژه «کد» را می‌شنویم، اغلب فرض می‌کنیم برای افراد فنی بالا اختصاص دارد. اما گاهی فقط به معنای وارد کردن دستورات ساده به یک برنامه برای دریافت نتیجه است. در این حالت برنامه Mermaid است — یک کتابخانهٔ متن‌باز جاوااسکریپت با ویرایشگر زندهٔ وب‑محور که دستورات قابل‌خواندن توسط انسان را به نمودارهایی مانند فلوچارت‌ها، نمودارهای دایره‌ای، جدول گانت، نمودارهای توالی و تابلوهای کانبان تبدیل می‌کند.

استفاده از Mermaid باعث شد تا در ایجاد نمودارها بسیار سریع‌تر از وقتی که از ابزارهای نمودارسازی و تصویرسازی مانند Lucidchart و draw.io (رسمی Diagrams.net) استفاده می‌کردم، باشم. می‌دانم رابط‌های کشیدن و رها کردن آن‌ها هدفشان سادگی و شهودی بودن است، اما می‌توانند مانع شوند. کدگذاری در Mermaid شلوغی بصری را حذف می‌کند و به من اجازه می‌دهد بر محتوا تمرکز کنم.

Mermaid یک ابزار رایگان و متن‌باز است که به شما امکان ایجاد نمودارها را با نوشتن متن ساده به‌جای کشیدن جعبه‌ها می‌دهد.

کشیدن یک نمودار به سرعت نوشتن یک یادداشت

کد‑به‌عنوان‑نمودار نسیمی از هوای تازه

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

به همین دلیل می‌گویم Mermaid نسیمی از هوای تازه است، زیرا کشیدن یک نمودار را به آسانی نوشتن یک یادداشت در چیزی مانند Notepad می‌کند. از سینتکسی استفاده می‌کند که شبیه ارتباط طبیعی است و یادگیری آن را آسان‌تر می‌سازد.

من هنوز فکر می‌کنم؛ فقط طراحی را متوقف کردم.

بیایید نگاهی به یک مثال ساده بیندازیم. در Mermaid ابتدا باید مشخص کنید که چه نموداری می‌خواهید ایجاد کنید. در این مورد، یک فلوچارت می‌سازیم. اما همچنین باید جهت آن را مشخص کنید — از راست به چپ (LR) یا از بالا به پایین (TD).

flowchart LR

خط زیر یک جعبه (که به عنوان گره نیز شناخته می‌شود) با برچسب Box 1 به فلوچارت اضافه می‌کند. حرف A قبل از کروشه‌ها شناسهٔ جعبه است (می‌توانید هر نامی به آن بدهید).

flowchart LR
    A[Box 1]

می‌توانید گره را با یک اتصال (که به عنوان لبه نیز شناخته می‌شود) به جعبه دیگری لینک کنید با کد زیر.

flowchart LR
    A[Box 1] --> B[Box 2]

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

flowchart LR
    A[Box 1] -->|Arrow 1| B[Box 2]

البته، کشیدن نمودارها همان‌طور که یک یادداشت می‌نویسید نیاز به دانستن سینتکس دارد. اما همان‌طوری که می‌بینید، بسیار قابل‌خواندن برای انسان است. فقط کافی است به مستندات Mermaid مراجعه کنید. با چند نمودار به‌دست، نوشتن Mermaid به‌سرعتی دوم تبدیل می‌شود.

بیشتر «کشیدن»، کمتر دست‌کاری

موقعیت‌دهی خودکار صرفه‌جویی در زمان است

وقتی از رابط‌های کشیدن و رها کردن استفاده می‌کنم، سعی می‌کنم یک نمودار جذاب بصری بسازم. اما در طول مسیر، اوضاع بهم ریخت. به دام این افتادم که سعی کنم ظاهر نمودار را با تغییر اندازه جعبه‌ها و تطبیق اندازه فونت‌ها اصلاح کنم. تمام این دست‌کاری‌ها باعث ناامیدی می‌شد چون یک جلسهٔ رسم به سرعت به کارهای نگهداری بی‌مورد تبدیل می‌شد.

درک می‌کنم آزادی رابط‌های کشیدن و رها کردن این است که به شما امکان می‌دهد نمودارهای بسیار سفارشی‌سازی‌شده بسازید. اما برای نمودارهای استاندارد، Mermaid کار بسیار خوبی در حفظ یک چیدمان تمیز و جذاب انجام می‌دهد. به‌صورت خودکار گره‌ها و لبه‌ها را روی بوم بر اساس کدی که نوشته‌اید موقعیت می‌دهد. نیازی به دست‌کاری نیست.

همچنین، همان‌طوری که در بخش قبلی دیدید، Mermaid انتخاب جهت نمودار را ساده می‌کند. ما جهت چپ به راست را انتخاب کردیم، اما اگر بعداً تصمیم بگیرم که از بالا به پایین برود، نیازی به شروع دوباره موقعیت‌دهی ندارم. یک تنظیم کوچک کافی است — از LR به TD.

flowchart LR
    A[Box 1] -->|Arrow 1| B[Box 2]

با اینکه Mermaid تمام موقعیت‌دهی را بر عهده می‌گیرد، می‌توانم تمام تمرکزم را بر مسألی که نمودار سعی در حل آن دارد بگذارم.

نگهداری و به‌روزرسانی‌ها فوق‌العاده سریع

Mermaid همه چیز را به‌سادگی مدیریت می‌کند

این یک سناریویی است که من از رابط‌های کشیدن و رها کردن متن‌آزار می‌کنم — به‌روزرسانی آن‌ها. فرض کنید به نموداری که تازه طراحی کرده‌اید نگاه می‌کنید و متوجه می‌شوید یک مرحله را از دست داده‌اید. حالا باید اشکال را حذف کنید، عناصر را دوباره تراز کنید، جعبه‌ها را موقعیت‌دهی کنید و پیکان‌های خراب را برای جا دادن اطلاعات جدید دوباره وصل کنید.

ظاهر اسکچی Excalidraw فشار ایجاد هر چیز به‌صورت پیکسل‑دقیق را از بین می‌برد.

کد نوشتن نمودارها را بسیار آسان‌تر می‌کند. اینجا کد یک فلوچارت نشان‌دهندهٔ فرآیند نوشتن مقاله است.

flowchart TD
    A[Start] --> B[Define article topic]
    B --> C[Research sources]
    C --> D[Write first draft]
    D --> E[Publish article]
    E --> F[End]

بین نوشتن و انتشار، یک مرحلهٔ گمشده وجود دارد — ویرایش. برای افزودن آن، فقط کافی است کد را اندکی تغییر دهم. در اینجا کد کامل و اصلاح‌شده است.

flowchart TD
    A[Start] --> B[Define article topic]
    B --> C[Research sources]
    C --> D[Write first draft]
    D --> X[Review and edit the draft]
    X --> E[Publish article]
    E --> F[End]

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

من شروع به عدم علاقه به رابط‌های کشیدن و رها کردن کرده‌ام

دوباره، از جنبهٔ کدنویسی Mermaid نترسید. کارهایی وجود دارد که می‌توانید برای آسان‌تر کردن آن انجام دهید در حین یادگیری سینتکس. برای مثال، می‌توانید از هوش مصنوعی‌ای مانند Gemini برای تولید کد استفاده کنید، و سپس آن را در ویرایشگر Mermaid بچسبانید. اگر شخص بصری هستید، می‌توانید ابتدا نمودار را روی کاغذ بکشید و سپس آن را به کد تبدیل کنید. اگر زمان را در یادگیری و استفاده از Mermaid سرمایه‌گذاری کنید، ممکن است روشی خیلی سریع‌تر برای ساخت نمودارها کشف کنید — همان‌طور که من کردیم.

منبع مقاله