Як написати 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
endloop <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 daysNote 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Редагуйте цю діаграму
Вставте її на вкладку коду й змініть рядок — попередній перегляд перемальовується під час набору.
Часті запитання
Як пронумерувати повідомлення?
Додайте autonumber рядком одразу після sequenceDiagram. Тоді кожне повідомлення отримає послідовний номер, і про діаграму стане набагато простіше говорити в коментарях рев'ю.
Чи може учасник надіслати повідомлення сам собі?
Так — напишіть однакове ім'я з обох боків: API->>API: retry. Mermaid намалює петлю назад до тієї самої лінії життя.
Як показати, що учасника знищено?
Використайте destroy <name> перед повідомленням, яке його завершує, або create participant <name>, щоб він з'явився посеред діаграми, а не зверху.
Чи можу я редагувати sequence-діаграму на візуальному полотні?
Візуальне полотно редагує flowchart. Sequence-діаграми пишуться на вкладці коду, де вони відображаються наживо в попередньому перегляді — що зазвичай і швидше, адже sequence-діаграма — це, по суті, список рядків.