Jak napsat mermaid sekvenční diagram
Sekvenční diagram ukazuje, kdo s kým mluví a v jakém pořadí. V mermaid ho napíšete zhruba tak rychle, jak dlouho trvá ho popsat nahlas, a proto je to typ diagramu, který se v repozitáři udrží nejdéle. Vše níže je připravené ke zkopírování do editoru.
Minimum, které stačí
Deklarujte typ diagramu a pak pište jeden řádek na zprávu. Účastníci vznikají při první zmínce, v pořadí, v jakém se objeví.
sequenceDiagram
User->>API: POST /orders
API->>DB: INSERT order
DB-->>API: order id
API-->>User: 201 CreatedÚčastníky deklarujte explicitně pomocí participant User, chcete-li konkrétní pořadí zleva doprava místo pořadí první zmínky.
Typy šipek
| Syntaxe | Význam |
|---|---|
A->>B: text | Požadavek — plná čára, plný hrot |
A-->>B: text | Odpověď — čárkovaná čára, plný hrot |
A->B: text | Plná čára, nevyplněný hrot |
A-)B: text | Asynchronní zpráva — nevyplněný hrot, odpověď se neočekává |
A-xB: text | Zpráva, která selže nebo se ztratí |
Konvence, kterou se vyplatí dodržovat: plná čára pro volání, čárkovaná pro návrat. Čtenář pak pozná požadavek od odpovědi, aniž by přečetl jediný popisek.
Úč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 OKMísto participant použijte actor U as Browser, chcete-li nakreslit panáčka — hodí se to pro člověka na levém okraji přihlašovacího flow.
Aktivační pruhy
Aktivační pruhy ukazují, jak dlouho je účastník zaneprázdněný. Buď je označte explicitně pomocí activate/deactivate, nebo přidejte + a - k šipkám, což je kratší a hůř se to rozejde.
sequenceDiagram
User->>+API: POST /pay
API->>+Bank: charge
Bank-->>-API: authorised
API-->>-User: receiptSmyčky, podmínky a paralelní práce
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— opakování.alt <label>…else <label>…end— vzájemně vylučující se větve.opt <label>…end— větev, ke které nemusí vůbec dojít.par <label>…and <label>…end— věci probíhající současně.critical/break— sekce, kterou nelze přerušit, a předč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 se rozpíná přes dva účastníky a je správné místo pro omezení, které patří k interakci jako celku, ne jen k jedné straně.
Kompletní pří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 si tento diagram
Vložte ho do kódové karty a změňte řádek — náhled se překreslí za chodu.
Časté dotazy
Jak zprávy očísluji?
Na řádek hned za sequenceDiagram dejte autonumber. Každá zpráva pak dostane pořadové číslo, což výrazně usnadní o diagramu mluvit v komentářích u review.
Může účastník poslat zprávu sám sobě?
Ano — napište stejné jméno na obě strany: API->>API: retry. Mermaid nakreslí smyčku zpátky do stejné lifeline.
Jak ukážu, že je účastník zničen?
Před zprávou, která ho ukončuje, použijte destroy <name>, nebo create participant <name>, aby se objevil až uprostřed diagramu místo nahoře.
Můžu sekvenční diagram upravovat na vizuálním plátně?
Vizuální plátno upravuje flowcharty. Sekvenční diagramy se píší na kódové kartě, kde se vykreslují za chodu v náhledu — což je obvykle stejně rychlejší, protože sekvenční diagram je v podstatě seznam řádků.