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 Created

Deklará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

SzintaxisJelentés
A->>B: textKérés — folytonos vonal, kitöltött nyílhegy
A-->>B: textVálasz — szaggatott vonal, kitöltött nyílhegy
A->B: textFolytonos vonal, üres nyílhegy
A-)B: textAszinkron ü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 OK

Haszná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: receipt

Ciklusok, 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
  end
  • loop <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 days

A 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 in
OAuth bejelentkezés, elejétől a végéig.

Szerkeszd 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.

További útmutatók

  1. Mermaid szintaxis puska

    Csomópont-alakok, nyilak, alcsoportok és stílusok egy oldalon — plusz egy működő példa minden diagramtípusból, amit a mermaid renderel.

Nyisd meg a szerkesztőt. Ingyenes — regisztráció nélkül.

Egy üres vászon, egy kód fül és minden exportlehetőség — ingyen, a böngésződben, most azonnal.