چگونه با Mermaid.js فلوچارت بسازیم

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

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

فلوچارت ها اغلب برای نشان دادن جریان های منطقی یا فرآیندهای تصمیم گیری استفاده می شوند و اغلب در مهندسی نرم افزار برای نمایش داده ها یا جریان های ارتباطی در سیستم های نرم افزاری استفاده می شوند.

برای اینکه به شما نشان دهیم Mermaid.js با فلوچارت‌ها چه کاری می‌تواند انجام دهد، بیایید نگاهی به ساخت یک فلوچارت ساده بیاندازیم که یک درخواست REST را نشان می‌دهد که از مشتری به سرور جریان می‌یابد، توسط پایگاه داده برآورده می‌شود و سپس به مشتری برمی‌گردد.

فلوچارت های اساسی با Mermaid.js

ابتدا با ایجاد یک فلوچارت در علامت گذاری و تعریف سه شکلی که در فلوچارت خود می خواهیم شروع می کنیم.

علامت گذاری برای این به صورت زیر است:

flowchart
    Client
    Server
    Database

هنگامی که در یک نمایشگر علامت گذاری که از Mermaid.js پشتیبانی می کند، رندر می شود، این علامت گذاری نمودار زیر را نشان می دهد:

تعداد فزاینده ای از مکان ها وجود دارد که از نمودارهای Mermaid.js پشتیبانی می کنند، از جمله نشانه گذاری GitHub، نوت بوک های Polyglot و ویرایشگر زنده Mermaid.js. همچنین می توانید Mermaid.js را وارد کنید تا علامت گذاری در صفحه وب خود را به نمودار تبدیل کنید.

روابط در Mermaid.js

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

با Mermaid.js شما به سادگی یک رابطه را با علامت گذاری تعریف می کنید --> بین دو شکل متصل به هم و نمودار بقیه موارد را بررسی می کند.

در اینجا نمودار جریان ما با یک جفت رابطه است:

flowchart
    Client --> Server
    Server --> Database

این در حال رسیدن است، اما بیشتر نمودارهای ارتباطی مشتری / سرور از چپ به راست مرتب شده اند. Mermaid.js به ما این امکان را می دهد که با بیان این تغییر آن را انجام دهیم flowchart LR:

flowchart LR
    Client --> Server
    Server --> Database

عالی! اکنون ما ارتباطات از مشتری به سرور و از سرور به پایگاه داده داریم، اما خوب است که پاسخ ها را نیز نمایش دهیم.

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

flowchart LR
    Client --> Server
    Server --> Database
    Database -.-> Server
    Server -.-> Client

اکنون ارتباطات بسیار واضح تر است، اما خوب است که محتوای هر پیام را برچسب گذاری کنید.

توجه: اگر تمرکز اصلی شما ارتباطات بین سیستم ها است، ممکن است بخواهید با استفاده از Mermaid.js برای نمودارهای توالی بررسی کنید. از طرف دیگر، اگر تمرکز شما روی داده است، باید نمودارهای رابطه موجودیت را بررسی کنید.

Mermaid.js به شما امکان می دهد در صورت تمایل با تایپ متن در وسط پیکان رابط، متنی را بر روی هر خط رابطه ارائه دهید.

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

کد زیر نام مستعار مشتری به عنوان است c، سرور به عنوان s و پایگاه داده به عنوان db. علاوه بر این، اکنون به هر رابطه متنی داده می شود تا نشان دهد چه چیزی بین سیستم ها جریان دارد.

flowchart LR
    c[Client]
    s[Server]
    db[Database]

    c -- HTTP GET --> s
    s -- SQL Query --> db
    db -. Result Set .-> s
    s -. JSON .-> c

این نمودار اکنون به طور قابل توجهی مفیدتر است و اگر می‌خواهیم یک شکل را تغییر نام دهیم، فقط باید نام آن را در خطی که در ابتدا شکل را تعریف می‌کند، تغییر دهیم.

سفارشی کردن نمودارهای جریان Mermaid.js

انواع کانکتور اضافی

Mermaid.js از فلش های ثابت و چین دار بیشتر پشتیبانی می کند.

در زیر انواع کانکتورهایی وجود دارد که Mermaid.js در حال حاضر از آنها پشتیبانی می کند. علاوه بر این، من یک خط دارم که به شما نشان می دهد چگونه می توانید چندین رابطه را در یک خط از طریق زنجیره تعریف کنید:

flowchart LR
    Base --> Arrow
    Base ==> Heavy
    Base -.-> Dotted
    Base --- Line
    Base --> You --> Can --> Chain --> Relations --> On --> One --- Line

توجه داشته باشید: Line دو بار در دو خط آخر علامت گذاری ذکر شده است که توضیح می دهد که چرا دو خط به آن می رود.

سفارشی کردن اشکال فلوچارت

نمودار ارتباطی مشتری/سرور ما بسیار خوب به نظر می رسد، اما اکثر برنامه نویسانی که با آنها کار کرده ام، پایگاه داده های خود را به صورت درام روی نمودارها ترسیم می کنند.

Mermaid.js به شما امکان می دهد در صورت تمایل شکل ها را سفارشی کنید و به طور مفید یک شکل پایگاه داده را از طریق [(Name)] نحو.

کد زیر شکل عنصر پایگاه داده را در خط تعریف آن سفارشی می کند:

flowchart LR
    c[Client]
    s[Server]
    db[(Database)]

    c -- HTTP GET --> s
    s -- SQL Query --> db
    db -. Result Set .-> s
    s -. JSON .-> c

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

flowchart
    a[Default]
    b([Rounded])
    c[(Database)]
    d[[Subroutine]]
    e((Circle))
    f>Note]
    g{Decision}
    h{{Hexagon}}
    i[/Parallelogram/]
    j(((Double Circle)))

برای فهرست کامل‌تری از اشکال، توصیه می‌کنم مستندات فلوچارت Mermaid.js را مشاهده کنید.

مدیریت پیچیدگی با زیرگراف ها

در حالی که ما قبلاً یک نمودار کاملاً قابل استفاده داریم، می‌توانیم با نشان دادن محل میزبانی هر بخش از برنامه، آن را بیشتر اصلاح کنیم.

در Mermaid.js می توانید بخش ها یا گروه هایی را به فلوچارت های خود اضافه کنید تا عناصر مرتبط را به صورت بصری گروه بندی کنید.

Mermaid.js این گروه بندی عناصر را “زیرگراف” می نامد و به شما امکان می دهد آنها را با بیان این جمله تعریف کنید. subgraph Graph Name برای شروع گروه و end برای پایان دادن به آن

در اینجا نمودار ما وجود دارد که نشان می دهد مشتری در Netlify میزبانی می شود و سرور و پایگاه داده روی Azure در حال اجرا هستند:

flowchart LR
    subgraph Azure
        s[Server]
        db[(Database)]
    end
    subgraph Netlify
        c[Client]
    end

    c -- HTTP GET --> s
    s -. JSON .-> c    
    db -. Result Set .-> s
    s -- SQL Query --> db

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

هنگامی که از زیرگراف ها استفاده می کنید، احتمالاً نیاز به انجام برخی ترفندهای اضافی برای کمک به طرح دیاگرام خود برای رفع نیازهای شما خواهید داشت.

اضافه کردن آیکون با فونت عالی

مانند نقشه های ذهنی Mermaid.js، فلوچارت ها می توانند از نمادها برای بهبود خوانایی یا جذابیت بصری خود استفاده کنند.

اگر شما یا ابزاری که استفاده می‌کنید قبلاً Font Awesome را وارد کرده‌اید، می‌توانید یک نماد برای هر شکل از طریق fa: پیشوند و سپس نام آیکون شما مطابق شکل زیر:

flowchart LR
    subgraph Azure
        s[fa:fa-code Server]
        db[(fa:fa-table Database)]
    end
    subgraph Netlify
        c[fa:fa-user Client]
    end

    subgraph Netlify
    end
    subgraph Azure
        direction LR
    end

    c -- HTTP GET --> s
    s -- SQL Query --> db
    db -. Result Set .-> s
    s -. JSON .-> c

در حالی که من این نمادها را به ویژه در مثال بالا مفید نمی‌دانم، مطمئناً می‌توانم موارد دیگری از نمودار را ببینم که می‌توانند از افزودن نمادنگاری بهره ببرند.

افکار بسته

فلوچارت های Mermaid.js ساده، کاربردی و کارآمد هستند.

یکی از مزایای کلیدی فلوچارت های Mermaid.js علاوه بر کمک به شما در تولید تصاویر بصری این است که به راحتی می توان آنها را در اسناد علامت گذاری به عنوان علامت گذاری خام جاسازی کرد. این به دیگران امکان می دهد نمودارهای شما را ببینند و به راحتی اصلاحات یا اضافات را انجام دهند زیرا سیستم ها به ناچار تغییر می کنند.

در نهایت، از آنجایی که این نمودارها به عنوان نشانه گذاری ذخیره می شوند، ذخیره آنها در یک سیستم کنترل نسخه بسیار آسان است.

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