Hvernig á að skrifa mermaid runurit

Runurit sýnir hver talar við hvern, í hvaða röð. Í mermaid tekur það um það bil jafn langan tíma að skrifa það og að lýsa því upphátt, sem er ástæðan fyrir því að þetta er sú tegund skýringarmyndar sem endist lengst í kóðagrunni. Allt hér að neðan er tilbúið til að afrita og líma inn í ritilinn.

Lágmarkið

Tilgreindu tegund skýringarmyndarinnar og skrifaðu síðan eina línu fyrir hver skilaboð. Þátttakendur verða til við fyrstu tilvísun, í þeirri röð sem þeir birtast.

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

Tilgreindu þátttakendur beinlínis með participant User þegar þú vilt ákveðna röð frá vinstri til hægri frekar en röð fyrstu tilvísunar.

Örvagerðir

MálskipanMerking
A->>B: textBeiðni — heil lína, fylltur örvaroddur
A-->>B: textSvar — punktalína, fylltur örvaroddur
A->B: textHeil lína, opinn örvaroddur
A-)B: textÓsamstillt skilaboð — opinn örvaroddur, ekkert svars vænst
A-xB: textSkilaboð sem mistakast eða falla niður

Sú venja sem borgar sig að halda: heil lína fyrir kallið, punktalína fyrir svarið. Þá getur lesandinn greint beiðni frá svari án þess að lesa einn einasta merkimiða.

Þátttakendur og dulnefni

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

Notaðu actor U as Browser í stað participant til að teikna prik-mannveru — þess virði fyrir manneskjuna við vinstri jaðar auðkenningarflæðis.

Virknistikur

Virknistikur sýna hversu lengi þátttakandi er upptekinn. Merktu þær annaðhvort beinlínis með activate/deactivate, eða bættu + og - við örvarnar, sem er styttra og erfiðara að láta fara úr jafnvægi.

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

Lykkjur, skilyrði og samhliða vinna

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 — endurtekning.
  • alt <label> … else <label> … end — greinar sem útiloka hver aðra.
  • opt <label> … end — grein sem gerist kannski einfaldlega ekki.
  • par <label> … and <label> … end — hlutir sem gerast á sama tíma.
  • critical / break — hluti sem má ekki trufla, og snemma útganga.

Athugasemdir

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 nær yfir tvo þátttakendur og er rétti staðurinn fyrir skilyrði sem tilheyrir samskiptunum sjálfum frekar en annarri hliðinni.

Heilt dæmi

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 innskráning, frá byrjun til enda.

Breyttu þessari skýringarmynd

Límdu hana inn í kóðaflipann og breyttu einni línu — forskoðunin endurteiknast um leið og þú skrifar.

Algengar spurningar

Hvernig númera ég skilaboðin?

Settu autonumber á línuna beint á eftir sequenceDiagram. Þá fá öll skilaboð raðnúmer, sem gerir mun auðveldara að vísa í skýringarmyndina í yfirferðarathugasemdum.

Getur þátttakandi sent sjálfum sér skilaboð?

Já — skrifaðu sama nafnið báðum megin: API->>API: retry. Mermaid teiknar lykkjuna til baka inn á sömu lífslínuna.

Hvernig sýni ég að þátttakandi sé eyddur?

Notaðu destroy <name> fyrir framan skilaboðin sem enda hann, eða create participant <name> til að láta hann birtast í miðri skýringarmyndinni frekar en efst.

Get ég breytt runuriti á sjónræna striganum?

Sjónræni striginn breytir flæðiritum. Runurit eru skrifuð á kóðaflipanum, þar sem þau birtast lifandi í forskoðuninni — sem er yfirleitt hraðara hvort sem er, því runurit er í grunninn bara listi af línum.

Fleiri leiðbeiningar

  1. Flytja mermaid út sem PNG eða SVG

    Fjórar leiðir út úr mermaid skýringarmynd — PNG, SVG, .mmd frumkóði og Markdown-blokk — og hvenær hver þeirra er rétta svarið.

  2. Mermaid málskipun — yfirlitsblað

    Lögun hnúta, örvar, undirgröf og litun á einni síðu — auk virks dæmis fyrir hverja tegund skýringarmyndar sem mermaid birtir.

Opnaðu ritilinn. Ókeypis — engin skráning.

Auður strigi, kóðaflipi og hver einasti útflutningsmöguleiki — ókeypis, í vafranum þínum, núna.