Як написати sequence-діаграму mermaid

Sequence-діаграма показує, хто з ким спілкується і в якому порядку. У mermaid її написання займає приблизно стільки ж часу, скільки й проговорити вголос, тому саме цей тип діаграм найдовше живе в кодовій базі. Усе нижче готове для копіювання в редактор.

Мінімум

Оголосіть тип діаграми, а потім пишіть по одному рядку на кожне повідомлення. Учасники створюються при першій згадці, у порядку появи.

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

Оголошуйте учасників явно за допомогою participant User, якщо потрібен конкретний порядок зліва направо, а не порядок першої згадки.

Типи стрілок

СинтаксисЗначення
A->>B: textЗапит — суцільна лінія, заповнений наконечник
A-->>B: textВідповідь — пунктирна лінія, заповнений наконечник
A->B: textСуцільна лінія, відкритий наконечник
A-)B: textАсинхронне повідомлення — відкритий наконечник, відповідь не очікується
A-xB: textПовідомлення, яке провалюється або відкидається

Конвенцію варто дотримуватись: суцільна лінія для виклику, пунктирна для повернення. Тоді читач відрізнить запит від відповіді, не читаючи жодного підпису.

Учасники та псевдоніми

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

Використайте 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 охоплює двох учасників і є правильним місцем для обмеження, яке стосується самої взаємодії, а не якоїсь із сторін.

Повний приклад

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. Тоді кожне повідомлення отримає послідовний номер, і про діаграму стане набагато простіше говорити в коментарях рев'ю.

Чи може учасник надіслати повідомлення сам собі?

Так — напишіть однакове ім'я з обох боків: API->>API: retry. Mermaid намалює петлю назад до тієї самої лінії життя.

Як показати, що учасника знищено?

Використайте destroy <name> перед повідомленням, яке його завершує, або create participant <name>, щоб він з'явився посеред діаграми, а не зверху.

Чи можу я редагувати sequence-діаграму на візуальному полотні?

Візуальне полотно редагує flowchart. Sequence-діаграми пишуться на вкладці коду, де вони відображаються наживо в попередньому перегляді — що зазвичай і швидше, адже sequence-діаграма — це, по суті, список рядків.

Ще гайди

  1. Експорт mermaid у PNG або SVG

    Чотири способи вивести діаграму mermaid — PNG, SVG, вихідний код .mmd та блок Markdown — і коли кожен із них правильний.

  2. Шпаргалка з синтаксису Mermaid

    Форми вузлів, стрілки, підграфи та стилі на одній сторінці — плюс робочий приклад кожного типу діаграми, який відображає mermaid.

Відкрийте редактор. Безкоштовно — без реєстрації.

Порожнє полотно, вкладка коду і всі варіанти експорту — безкоштовно, у вашому браузері, просто зараз.