وقتی کلمه «code» را میشنویم، اغلب فرض میکنیم که برای افراد بسیار فنی است. اما گاهی فقط به معنای وارد کردن فرمانهای ساده در یک برنامه برای به دست آوردن نتیجه است. در این مورد، برنامه Mermaid است — کتابخانهٔ منبعباز JavaScript با ویرایشگر زندهٔ وب‑محور که فرمانهای قابل درک برای انسان را به نمودارهایی مانند فلوچارت، نمودار دایرهای، نمودار گانت، نمودار توالی و تابلوهای کانبان تبدیل میکند.
وقتی کلمه «کد» را میشنویم، اغلب فرض میکنیم که برای افراد بسیار فنی منظور است. اما گاهی فقط به معنی وارد کردن دستورات ساده به یک برنامه برای دریافت نتیجه است. در این حالت برنامه Mermaid است — یک کتابخانه متنباز JavaScript با یک ویرایشگر زنده مبتنی بر وب که دستورات قابلخواندن توسط انسان را به نمودارهایی مانند نمودارهای جریان، نمودارهای دایرهای، نمودارهای گانت، نمودارهای توالی و تابلوهای کانبان تبدیل میکند.
استفاده از 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 کنید، شاید راهی بسیار سریعتر برای ایجاد نمودارها کشف کنید — همانطور که من انجام دادم.