Ako napísať sekvenčný diagram mermaid
Sekvenčný diagram ukazuje, kto s kým komunikuje a v akom poradí. V mermaid trvá jeho napísanie približne toľko, koľko trvá jeho slovný opis, a preto je to typ diagramu, ktorý v kóde vydrží najdlhšie. Všetko nižšie je pripravené na skopírovanie do editora.
Minimum
Deklarujte typ diagramu a potom napíšte jeden riadok na každú správu. Účastníci sa vytvárajú pri prvej zmienke, v poradí, v akom sa objavia.
sequenceDiagram
User->>API: POST /orders
API->>DB: INSERT order
DB-->>API: order id
API-->>User: 201 CreatedDeklarujte účastníkov explicitne pomocou participant User, ak chcete konkrétne poradie zľava doprava namiesto poradia prvej zmienky.
Typy šípok
| Syntax | Význam |
|---|---|
A->>B: text | Požiadavka — plná čiara, plný hrot |
A-->>B: text | Odpoveď — prerušovaná čiara, plný hrot |
A->B: text | Plná čiara, otvorený hrot |
A-)B: text | Asynchrónna správa — otvorený hrot, odpoveď sa neočakáva |
A-xB: text | Správa, ktorá zlyhá alebo sa stratí |
Konvencia, ktorú sa oplatí dodržiavať: plná čiara pre volanie, prerušovaná pre návrat. Čitateľ tak vie odlíšiť požiadavku od odpovede bez toho, aby čítal jediný popisok.
Účastníci a aliasy
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 OKNamiesto participant použite actor U as Browser na vykreslenie panáčika — oplatí sa to pri človeku na ľavom okraji autentifikačného flowu.
Aktivačné pruhy
Aktivačné pruhy ukazujú, ako dlho je účastník zaneprázdnený. Buď ich označte explicitne pomocou activate/deactivate, alebo pridajte + a - k šípkam, čo je kratšie a ťažšie sa v tom stratiť.
sequenceDiagram
User->>+API: POST /pay
API->>+Bank: charge
Bank-->>-API: authorised
API-->>-User: receiptCykly, podmienky a paralelná práca
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— opakovanie.alt <label>…else <label>…end— vzájomne sa vylučujúce vetvy.opt <label>…end— vetva, ktorá sa jednoducho nemusí stať.par <label>…and <label>…end— veci, ktoré sa dejú súčasne.critical/break— sekcia, ktorá sa nesmie prerušiť, a predčasný výstup.
Poznámky
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 sa rozprestiera cez dvoch účastníkov a je správnym miestom pre obmedzenie, ktoré patrí k interakcii, nie k jednej z jej strán.
Kompletný príklad
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 inUpravte tento diagram
Vložte ho do kódovej karty a zmeňte riadok — náhľad sa prekreslí za chodu.
Časté otázky
Ako očíslujem správy?
Dajte autonumber na riadok hneď po sequenceDiagram. Každá správa potom dostane poradové číslo, čo výrazne uľahčí diskusiu o diagrame v komentároch k review.
Môže účastník poslať správu sám sebe?
Áno — napíšte rovnaké meno na obe strany: API->>API: retry. Mermaid nakreslí slučku späť do tej istej lifeline.
Ako ukážem, že účastník zaniká?
Použite destroy <name> pred správou, ktorá ho ukončuje, alebo create participant <name>, aby sa objavil až uprostred diagramu namiesto na začiatku.
Môžem upravovať sekvenčný diagram na vizuálnom plátne?
Vizuálne plátno upravuje flowcharty. Sekvenčné diagramy sa píšu na kódovej karte, kde sa vykresľujú naživo v náhľade — čo je väčšinou aj rýchlejšie, keďže sekvenčný diagram je v podstate zoznam riadkov.