Как да напишеш mermaid sequence диаграма
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, за да нарисуваш човече — струва си за човека в левия край на flow за автентикация.
Ленти за активност
Лентите за активност показват колко дълго участникът е зает. Маркирай ги изрично с 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 чертае примката обратно към същия lifeline.
Как да покажа, че участник е унищожен?
Използвай destroy <name> преди съобщението, което го приключва, или create participant <name>, за да се появи по средата на диаграмата, вместо в началото.
Мога ли да редактирам sequence диаграма на визуалното платно?
Визуалното платно редактира flowchart диаграми. Sequence диаграмите се пишат в раздела за код, където се изобразяват на живо в прегледа — което обикновено е по-бързо така или иначе, защото sequence диаграмата по същество е списък от редове.