Kaip parašyti mermaid sekos diagramą

Sekos diagrama parodo, kas su kuo kalbasi ir kokia tvarka. Mermaid ją parašyti užtrunka maždaug tiek pat, kiek užtrunka papasakoti garsiai, todėl tai diagramos tipas, kuris ilgiausiai išgyvena kodo bazėje. Viskas žemiau paruošta nukopijuoti ir įklijuoti į redaktorių.

Minimalus variantas

Deklaruok diagramos tipą, tada rašyk po vieną eilutę kiekvienai žinutei. Dalyviai sukuriami pirmą kartą juos paminėjus, ta tvarka, kuria jie pasirodo.

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

Deklaruok dalyvius aiškiai su participant User, kai nori konkrečios tvarkos iš kairės į dešinę, o ne pagal pirmo paminėjimo tvarką.

Rodyklių tipai

SintaksėReikšmė
A->>B: textUžklausa — vientisa linija, pilnas antgalis
A-->>B: textAtsakymas — punktyrinė linija, pilnas antgalis
A->B: textVientisa linija, tuščias antgalis
A-)B: textAsinchroninė žinutė — tuščias antgalis, atsakymo nesitikima
A-xB: textŽinutė, kuri nepavyksta arba prarandama

Konvenciją verta laikytis: vientisa linija skambučiui, punktyrinė — grąžinimui. Tada skaitytojas gali atskirti užklausą nuo atsakymo neperskaitęs nė vienos etiketės.

Dalyviai ir slapyvardžiai

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

Naudok actor U as Browser vietoj participant, kad nupieštum stick figure — verta to dėl žmogaus autentifikacijos srauto kairiajame krašte.

Aktyvavimo juostos

Aktyvavimo juostos rodo, kiek laiko dalyvis yra užimtas. Pažymėk jas aiškiai su activate/deactivate, arba pridėk + ir - prie rodyklių, kas trumpiau ir sunkiau išbalansuoti.

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

Ciklai, sąlygos ir lygiagretus darbas

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 — pasikartojimas.
  • alt <label> … else <label> … end — vienas kitą pašalinančios šakos.
  • opt <label> … end — šaka, kuri gali tiesiog neįvykti.
  • par <label> … and <label> … end — dalykai, vykstantys tuo pačiu metu.
  • critical / break — skyrius, kurio negalima pertraukti, ir ankstyvas išėjimas.

Pastabos

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 apima du dalyvius ir yra tinkama vieta apribojimui, kuris priklauso pačiai sąveikai, o ne vienai iš pusių.

Pilnas pavyzdys

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 prisijungimas, nuo pradžios iki pabaigos.

Redaguok šią diagramą

Įklijuok ją į kodo skirtuką ir pakeisk eilutę — peržiūra perpiešiama, kol rašai.

Dažniausiai užduodami klausimai

Kaip sunumeruoti žinutes?

Įrašyk autonumber eilutėje iškart po sequenceDiagram. Tada kiekviena žinutė gauna eilės numerį, todėl diagramą kur kas lengviau aptarti peržiūros komentaruose.

Ar dalyvis gali siųsti žinutę pats sau?

Taip — parašyk tą patį vardą abiejose pusėse: API->>API: retry. Mermaid nupiešia kilpą atgal į tą pačią gyvavimo liniją.

Kaip parodyti, kad dalyvis sunaikinamas?

Naudok destroy <name> prieš žinutę, kuri jį užbaigia, arba create participant <name>, kad jis atsirastų diagramos viduryje, o ne viršuje.

Ar galiu redaguoti sekos diagramą vizualiame darbalaukyje?

Vizualus darbalaukis redaguoja blokines schemas (flowchart). Sekos diagramos rašomos kodo skirtuke, kur jos atvaizduojamos gyvai peržiūroje — tai paprastai net greičiau, nes sekos diagrama iš esmės yra eilučių sąrašas.

Daugiau vadovų

  1. Eksportuoti mermaid į PNG ar SVG

    Keturi būdai išvesti mermaid diagramą — PNG, SVG, .mmd kodas ir Markdown blokas — ir kada kiekvienas iš jų tinkamas.

  2. Mermaid sintaksės trumpasis vadovas

    Mazgų formos, rodyklės, potipės ir stilius viename puslapyje — plius veikiantis kiekvieno diagramos tipo, kurį atvaizduoja mermaid, pavyzdys.

Atverk redaktorių. Nemokamai — be registracijos.

Tuščias darbalaukis, kodo skirtukas ir visos eksporto galimybės — nemokamai, naršyklėje, dabar.