Kuidas kirjutada mermaid jadadiagrammi

Jadadiagramm näitab, kes kellega ja millises järjekorras räägib. Mermaidis võtab selle kirjutamine umbes sama kaua kui selle valjusti kirjeldamine, mistõttu see on diagrammitüüp, mis püsib koodibaasis kõige kauem. Kõik allolev on kopeeri-kleebi valmis redaktori jaoks.

Miinimum

Deklareeri diagrammi tüüp, seejärel kirjuta üks rida sõnumi kohta. Osalised luuakse esmakordsel mainimisel, ilmumise järjekorras.

sequenceDiagram
  User->>API: POST /orders
  API->>DB: INSERT order
  DB-->>API: order id
  API-->>User: 201 Created

Deklareeri osalised eksplitsiitselt käsuga participant User, kui soovid konkreetset vasakult-paremale järjekorda, mitte esmamainimise järjekorda.

Noolte tüübid

SüntaksTähendus
A->>B: textPäring — pidev joon, täidetud nooleots
A-->>B: textVastus — katkendjoon, täidetud nooleots
A->B: textPidev joon, avatud nooleots
A-)B: textAsünkroonne sõnum — avatud nooleots, vastust ei oodata
A-xB: textSõnum, mis ebaõnnestub või jäetakse kõrvale

Tava, mida tasub hoida: pidev joon kutse jaoks, katkendjoon vastuse jaoks. Nii saab lugeja eristada päringut vastusest ilma ühtki silti lugemata.

Osalised ja aliased

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

Kasuta actor U as Browser tavalise participant asemel, et joonistada tikk-kujuke — tasub teha inimese jaoks autentimisvoo vasakus servas.

Aktiveerimisribad

Aktiveerimisribad näitavad, kui kaua osaline hõivatud on. Märgista need kas eksplitsiitselt käskudega activate/deactivate või lisa nooltele + ja -, mis on lühem ja raskem tasakaalust välja viia.

sequenceDiagram
  User->>+API: POST /pay
  API->>+Bank: charge
  Bank-->>-API: authorised
  API-->>-User: receipt

Tsüklid, tingimused ja paralleelne töö

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 — kordus.
  • alt <label> … else <label> … end — teineteist välistavad harud.
  • opt <label> … end — haru, mis võib lihtsalt mitte juhtuda.
  • par <label> … and <label> … end — asjad, mis toimuvad samal ajal.
  • critical / break — sektsioon, mida ei tohi katkestada, ja varajane väljumine.

Märkused

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 hõlmab kahte osalist ja on õige koht piirangu jaoks, mis kuulub interaktsioonile endale, mitte kummalegi poolele sellest.

Täielik näide

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 sisselogimine, algusest lõpuni.

Muuda seda diagrammi

Kleebi see koodisakile ja muuda rida — eelvaade joonistub sinu kirjutades uuesti.

Sageli küsitud

Kuidas nummerdada sõnumeid?

Pane autonumber reale kohe pärast sequenceDiagram. Iga sõnum saab siis järjekorranumbri, mis muudab diagrammist ülevaatuskommentaarides rääkimise palju lihtsamaks.

Kas osaline saab saata sõnumi iseendale?

Jah — kirjuta sama nimi mõlemale poole: API->>API: retry. Mermaid joonistab silmuse tagasi samale elulõngale.

Kuidas näidata, et osaline hävitatakse?

Kasuta destroy <name> enne sõnumit, mis selle lõpetab, või create participant <name>, et see ilmuks diagrammi keskele, mitte algusesse.

Kas saan jadadiagrammi visuaalsel lõuendil muuta?

Visuaalne lõuend muudab vookaarte. Jadadiagrammid kirjutatakse koodisakil, kus need renderduvad eelvaates reaalajas — mis on tavaliselt niikuinii kiirem, kuna jadadiagramm on sisuliselt ridade loend.

Rohkem juhendeid

  1. Mermaid süntaksi spikker

    Sõlmede kujud, nooled, alamgraafikud ja stiilid ühel lehel — pluss töötav näide igast diagrammitüübist, mida mermaid renderdab.

Ava redaktor. Tasuta — ilma registreerimiseta.

Tühi lõuend, koodisakk ja kõik ekspordivõimalused — tasuta, sinu brauseris, kohe praegu.