Hogyan írj mermaid szekvenciadiagramot
Egy szekvenciadiagram megmutatja, ki kivel beszél, milyen sorrendben. Mermaidban körülbelül annyi idő megírni, mint kimondani, ezért ez a diagramtípus él legtovább egy kódbázisban. Az alábbiak mind másolásra készek a szerkesztőhöz.
A minimum
Deklaráld a diagram típusát, majd írj egy sort minden üzenethez. A résztvevők az első említéskor jönnek létre, a megjelenésük sorrendjében.
sequenceDiagram
User->>API: POST /orders
API->>DB: INSERT order
DB-->>API: order id
API-->>User: 201 CreatedDeklaráld a résztvevőket explicit módon participant User formában, ha egy konkrét balról-jobbra sorrendet szeretnél az első említés sorrendje helyett.
Nyíltípusok
| Szintaxis | Jelentés |
|---|---|
A->>B: text | Kérés — folytonos vonal, kitöltött nyílhegy |
A-->>B: text | Válasz — szaggatott vonal, kitöltött nyílhegy |
A->B: text | Folytonos vonal, üres nyílhegy |
A-)B: text | Aszinkron üzenet — üres nyílhegy, nincs várt válasz |
A-xB: text | Üzenet, ami sikertelen vagy elveszik |
Az érdemes megtartani való konvenció: folytonos a híváshoz, szaggatott a válaszhoz. Így az olvasó egyetlen felirat elolvasása nélkül is meg tudja különböztetni a kérést a választól.
Résztvevők és aliasok
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 OKHasználj actor U as Browser formát participant helyett egy pálcikaember rajzolásához — megéri egy hitelesítési folyamat bal szélén álló embernél.
Aktivációs sávok
Az aktivációs sávok megmutatják, meddig van elfoglalva egy résztvevő. Vagy jelöld őket explicit módon activate/deactivate formában, vagy fűzz +-t és --t a nyilakhoz, ami rövidebb, és nehezebb elrontani vele az egyensúlyt.
sequenceDiagram
User->>+API: POST /pay
API->>+Bank: charge
Bank-->>-API: authorised
API-->>-User: receiptCiklusok, feltételek és párhuzamos munka
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— ismétlés.alt <label>…else <label>…end— kölcsönösen kizáró ágak.opt <label>…end— egy ág, ami egyszerűen nem is történhet meg.par <label>…and <label>…end— egyszerre történő dolgok.critical/break— egy szakasz, amit nem szabad megszakítani, és egy korai kilépés.
Jegyzetek
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 daysA Note over A,B két résztvevőt fog át, és ez a helyes hely egy olyan megkötésnek, ami magához az interakcióhoz tartozik, nem az egyik oldalhoz.
Egy teljes példa
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 inSzerkeszd ezt a diagramot
Illeszd be a kód fülbe, és változtass meg egy sort — az előnézet gépelés közben újrarajzolódik.
Gyakran ismételt kérdések
Hogyan számozzam az üzeneteket?
Tedd az autonumber-t a sequenceDiagram utáni sorba. Minden üzenet ezután sorszámot kap, ami sokkal könnyebbé teszi a diagramról beszélni review kommentekben.
Küldhet egy résztvevő üzenetet önmagának?
Igen — írd ugyanazt a nevet mindkét oldalra: API->>API: retry. A mermaid visszarajzolja a hurkot ugyanabba az élettartam-vonalba.
Hogyan mutassam meg, hogy egy résztvevő megszűnik?
Használj destroy <name>-t az üzenet előtt, ami lezárja, vagy create participant <name>-t, hogy a diagram közepén jelenjen meg a tetején lévő megjelenés helyett.
Szerkeszthetek egy szekvenciadiagramot a vizuális vásznon?
A vizuális vászon folyamatábrákat szerkeszt. A szekvenciadiagramokat a kód fülön írod, ahol élőben renderelődnek az előnézetben — ami általában amúgy is gyorsabb, mivel egy szekvenciadiagram lényegében egy listányi sor.