Како написати 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 да нацртате фигуру човека — исплати се за особу на левом крају тока аутентификације.
Траке активације
Траке активације показују колико дуго је учесник заузет. Означите их изричито помоћу 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 дијаграм у суштини списак линија.