چطور یک نمودار توالی mermaid بنویسیم

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

حداقل لازم

نوع نمودار را اعلام کنید، سپس یک خط برای هر پیام بنویسید. participant ها در اولین اشاره‌ای که به آن‌ها می‌شود، به همان ترتیب، ساخته می‌شوند.

sequenceDiagram
  User->>API: POST /orders
  API->>DB: INSERT order
  DB-->>API: order id
  API-->>User: 201 Created

وقتی ترتیب مشخصی از چپ به راست می‌خواهید، به‌جای ترتیب اولین اشاره، participant ها را با participant User صریحاً اعلام کنید.

انواع پیکان

نحومعنا
A->>B: textدرخواست — خط توپر، سر پیکان پر
A-->>B: textپاسخ — خط نقطه‌چین، سر پیکان پر
A->B: textخط توپر، سر پیکان توخالی
A-)B: textپیام ناهمگام — سر پیکان توخالی، بدون انتظار پاسخ
A-xB: textپیامی که شکست می‌خورد یا از بین می‌رود

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

participant ها و نام‌های مستعار

sequenceDiagram
  participant U as Browser
  participant A as API gateway
  participant S as Order service
  U->>A: GET /orders
  A->>S: list(userId)
  S-->>A: orders
  A-->>U: 200 OK

به‌جای participant، از actor U as Browser استفاده کنید تا یک آدمک کبریتی کشیده شود — برای انسانی که در لبه چپ یک فرایند احراز هویت قرار دارد ارزشش را دارد.

نوارهای فعال‌سازی

نوارهای فعال‌سازی نشان می‌دهند یک participant چقدر مشغول است. یا آن‌ها را صریحاً با activate/deactivate مشخص کنید، یا + و - را به پیکان‌ها اضافه کنید که کوتاه‌تر است و به‌هم‌ریختنش سخت‌تر.

sequenceDiagram
  User->>+API: POST /pay
  API->>+Bank: charge
  Bank-->>-API: authorised
  API-->>-User: receipt

حلقه‌ها، شرط‌ها و کار موازی

sequenceDiagram
  User->>API: POST /import
  loop every row
    API->>DB: upsert row
  end
  alt all rows valid
    API-->>User: 200 OK
  else some failed
    API-->>User: 422 with errors
  end
  par notify
    API->>Email: send summary
  and audit
    API->>Log: write entry
  end
  • loop <label> … end — تکرار.
  • alt <label> … else <label> … end — شاخه‌های متقابلاً منحصر به‌فرد.
  • opt <label> … end — شاخه‌ای که ممکن است اصلاً اتفاق نیفتد.
  • par <label> … and <label> … end — چیزهایی که همزمان اتفاق می‌افتند.
  • critical / break — بخشی که نباید قطع شود، و یک خروج زودهنگام.

یادداشت‌ها

sequenceDiagram
  User->>API: POST /login
  Note right of API: Rate limited<br>5 per minute
  API-->>User: token
  Note over User,API: Token is valid for 30 days

Note over A,B روی دو participant پخش می‌شود و جای درستی برای محدودیتی است که به تعامل تعلق دارد نه به یکی از دو طرف آن.

یک مثال کامل

sequenceDiagram
  actor U as User
  participant A as App
  participant P as Provider
  U->>+A: Click "Sign in"
  A-->>-U: Redirect to provider
  U->>+P: Authorise
  P-->>-U: Redirect back with code
  U->>+A: GET /callback?code=…
  A->>+P: Exchange code for token
  P-->>-A: access token
  Note right of A: Session cookie set here
  A-->>-U: Signed in
ورود OAuth، سر تا ته.

این نمودار را ویرایش کنید

آن را در تب کد پیست کنید و یک خط را تغییر دهید — پیش‌نمایش همان‌طور که تایپ می‌کنید دوباره رسم می‌شود.

پرسش‌های متداول

چطور پیام‌ها را شماره‌گذاری کنم؟

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

می‌شود یک participant به خودش پیام بفرستد؟

بله — همان نام را در هر دو طرف بنویسید: API->>API: retry. mermaid حلقه را به همان خط زندگی برمی‌گرداند.

چطور نشان بدهم یک participant از بین رفته؟

قبل از پیامی که به آن پایان می‌دهد از destroy <name> استفاده کنید، یا از create participant <name> تا وسط نمودار ظاهر شود نه در بالای آن.

می‌توانم یک نمودار توالی را روی بوم بصری ویرایش کنم؟

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

راهنماهای بیشتر

  1. خروجی گرفتن mermaid به PNG یا SVG

    چهار راه خروج از یک نمودار mermaid — PNG، SVG، سورس ‎.mmd و یک بلوک Markdown — و اینکه هرکدام کِی جواب درست است.

  2. راهنمای نحو mermaid

    شکل گره‌ها، پیکان‌ها، زیرگراف‌ها و استایل‌دهی در یک صفحه — به‌علاوه یک مثال کاربردی از هر نوع نموداری که mermaid رندر می‌کند.

ویرایشگر را باز کنید. رایگان — بدون ثبت‌نام.

یک بوم خالی، یک تب کد و همه گزینه‌های خروجی — رایگان، در مرورگرتان، همین حالا.