Hvordan skrive et mermaid-sekvensdiagram
Et sekvensdiagram viser hvem som snakker med hvem, i hvilken rekkefølge. I mermaid tar det omtrent like lang tid å skrive som å beskrive høyt, som er grunnen til at det er diagramtypen som overlever lengst i en kodebase. Alt under er klart til å limes inn i editoren.
Minimumet
Deklarer diagramtypen, skriv deretter én linje per melding. Deltakere opprettes ved første omtale, i rekkefølgen de vises.
sequenceDiagram
User->>API: POST /orders
API->>DB: INSERT order
DB-->>API: order id
API-->>User: 201 CreatedDeklarer deltakere eksplisitt med participant User når du vil ha en bestemt venstre-til-høyre-rekkefølge i stedet for rekkefølgen de først nevnes i.
Piltyper
| Syntaks | Betydning |
|---|---|
A->>B: text | Forespørsel – heltrukken linje, fylt pilspiss |
A-->>B: text | Svar – stiplet linje, fylt pilspiss |
A->B: text | Heltrukken linje, åpen pilspiss |
A-)B: text | Asynkron melding – åpen pilspiss, ingen svar forventet |
A-xB: text | Melding som feiler eller mistes |
Konvensjonen verdt å holde på: heltrukken for kallet, stiplet for returen. En leser kan da skille en forespørsel fra et svar uten å lese en eneste etikett.
Deltakere og aliaser
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 OKBruk actor U as Browser i stedet for participant for å tegne en pinnefigur – verdt det for mennesket i venstre kant av en autentiseringsflyt.
Aktiveringslinjer
Aktiveringslinjer viser hvor lenge en deltaker er opptatt. Enten merk dem eksplisitt med activate/deactivate, eller legg til + og - på pilene, som er kortere og vanskeligere å få i ubalanse.
sequenceDiagram
User->>+API: POST /pay
API->>+Bank: charge
Bank-->>-API: authorised
API-->>-User: receiptLøkker, betingelser og parallelt arbeid
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— repetisjon.alt <label>…else <label>…end— gjensidig utelukkende grener.opt <label>…end— en gren som kanskje rett og slett ikke skjer.par <label>…and <label>…end— ting som skjer samtidig.critical/break— en seksjon som ikke må avbrytes, og en tidlig utgang.
Notater
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 spenner over to deltakere og er det riktige stedet for en begrensning som hører til interaksjonen fremfor til noen av sidene i den.
Et fullstendig eksempel
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 inRediger dette diagrammet
Lim det inn i kode-fanen og endre en linje – forhåndsvisningen tegnes på nytt mens du skriver.
Ofte stilt
Hvordan nummererer jeg meldingene?
Sett autonumber på linjen rett etter sequenceDiagram. Hver melding får da et sekvensielt nummer, som gjør et diagram mye lettere å snakke om i gjennomgangskommentarer.
Kan en deltaker sende en melding til seg selv?
Ja – skriv samme navn på begge sider: API->>API: retry. Mermaid tegner løkken tilbake til samme livslinje.
Hvordan viser jeg at en deltaker blir avsluttet?
Bruk destroy <name> før meldingen som avslutter den, eller create participant <name> for å la den dukke opp midt i diagrammet i stedet for øverst.
Kan jeg redigere et sekvensdiagram på det visuelle lerretet?
Det visuelle lerretet redigerer flytskjemaer. Sekvensdiagrammer skrives på kode-fanen, der de gjengis direkte i forhåndsvisningen – noe som vanligvis er raskere uansett, siden et sekvensdiagram i bunn og grunn er en liste med linjer.