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

SyntaxeVýznam
A->>B: textPožadavek — plná čára, plný hrot
A-->>B: textOdpověď — čárkovaná čára, plný hrot
A->B: textPlná čára, nevyplněný hrot
A-)B: textAsynchronní zpráva — nevyplněný hrot, odpověď se neočekává
A-xB: textZprá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 OK

Mí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: receipt

Smyč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
  end
  • loop <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 days

Note 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 in
OAuth přihlášení, od začátku do konce.

Upravte 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ů.

Další návody

  1. Export mermaid do PNG nebo SVG

    Čtyři cesty ven z mermaid diagramu — PNG, SVG, .mmd zdroj a Markdown blok — a kdy je která ta správná.

  2. Mermaid syntaxe: tahák

    Tvary uzlů, šipky, podgrafy a styly na jedné stránce — plus funkční příklad každého typu diagramu, který mermaid umí vykreslit.

Otevřete editor. Zdarma — bez registrace.

Prázdné plátno, kódová karta a všechny možnosti exportu — zdarma, přímo v prohlížeči, hned teď.