وقتی کلمه “code” را میشنویم، اغلب فرض میکنیم که برای افراد بسیار فنی است. اما گاهی فقط به معنای وارد کردن دستورات ساده به یک برنامه برای دریافت نتیجه است. در این حالت، برنامه 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 کنید، ممکن است روشی بسیار سریعتر برای ایجاد نمودارها کشف کنید — دقیقاً همانطور که من انجام دادم.