Kako napisati mermaid sekvenčni diagram
Sekvenčni diagram prikaže, kdo s kom govori in v kakšnem vrstnem redu. V mermaidu ga napišeš skoraj tako hitro, kot bi ga opisal na glas, zato je to vrsta diagrama, ki v repozitoriju preživi najdlje. Vse spodaj je pripravljeno za kopiranje in lepljenje v urejevalnik.
Minimum
Deklariraj vrsto diagrama, nato napiši eno vrstico na sporočilo. Udeleženci se ustvarijo ob prvi omembi, v vrstnem redu, v katerem se pojavijo.
sequenceDiagram
User->>API: POST /orders
API->>DB: INSERT order
DB-->>API: order id
API-->>User: 201 CreatedUdeležence deklariraj eksplicitno z participant User, kadar želiš določen vrstni red od leve proti desni namesto vrstnega reda prve omembe.
Vrste puščic
| Sintaksa | Pomen |
|---|---|
A->>B: text | Zahteva — polna črta, polna puščična glava |
A-->>B: text | Odgovor — črtkana črta, polna puščična glava |
A->B: text | Polna črta, odprta puščična glava |
A-)B: text | Asinhrono sporočilo — odprta puščična glava, odgovor ni pričakovan |
A-xB: text | Sporočilo, ki spodleti ali je izgubljeno |
Konvencija, ki se jo splača ohraniti: polna črta za klic, črtkana za vrnitev. Bralec tako loči zahtevo od odgovora, ne da bi prebral eno samo oznako.
Udeleženci in vzdevki
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 OKNamesto participant uporabi actor U as Browser, da narišeš paličasto figuro — vredno pri človeku na levem robu poteka avtentikacije.
Aktivacijski stolpci
Aktivacijski stolpci prikažejo, kako dolgo je udeleženec zaposlen. Označi jih eksplicitno z activate/deactivate, ali pa puščicam dodaj + in -, kar je krajše in se težje razrahlja iz ravnovesja.
sequenceDiagram
User->>+API: POST /pay
API->>+Bank: charge
Bank-->>-API: authorised
API-->>-User: receiptZanke, pogoji in vzporedno delo
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— ponavljanje.alt <label>…else <label>…end— medsebojno izključujoče veje.opt <label>…end— veja, ki se morda preprosto ne zgodi.par <label>…and <label>…end— stvari, ki se dogajajo hkrati.critical/break— odsek, ki ga ni dovoljeno prekiniti, in zgodnji izhod.
Opombe
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 obsega dva udeleženca in je pravo mesto za omejitev, ki pripada interakciji sami, ne eni od strani.
Celoten primer
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 inUredi ta diagram
Prilepi ga v zavihek s kodo in spremeni eno vrstico — predogled se izriše sproti, medtem ko tipkaš.
Pogosta vprašanja
Kako oštevilčim sporočila?
Postavi autonumber v vrstico takoj za sequenceDiagram. Vsako sporočilo nato dobi zaporedno številko, kar diagram naredi veliko lažje za obravnavo v komentarjih pregleda.
Lahko udeleženec pošlje sporočilo samemu sebi?
Da — napiši isto ime na obeh straneh: API->>API: retry. Mermaid nariše zanko nazaj v isto življenjsko črto.
Kako prikažem, da je udeleženec uničen?
Uporabi destroy <name> pred sporočilom, ki ga konča, ali create participant <name>, da se pojavi sredi diagrama namesto na vrhu.
Lahko sekvenčni diagram urejam na vizualnem platnu?
Vizualno platno ureja flowcharte. Sekvenčni diagrami se pišejo na zavihku s kodo, kjer se izrišejo v živo v predogledu — kar je običajno tudi hitreje, saj je sekvenčni diagram v bistvu seznam vrstic.