Како написати mermaid sequence дијаграм

Sequence дијаграм показује ко коме говори, којим редоследом. У mermaid-у пишете га отприлике исто онолико дуго колико траје да га испричате наглас, зато и опстаје најдуже у кодној бази. Све испод је спремно за копирање у едитор.

Минимум

Прво декларишите тип дијаграма, па напишите по једну линију за сваку поруку. Учесници се стварају при првом помену, редоследом којим се појављују.

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

Декларишите учеснике изричито помоћу participant User кад желите тачно одређен редослед слева удесно, а не редослед по првом помену.

Типови стрелица

СинтаксаЗначење
A->>B: textЗахтев — пуна линија, испуњен врх
A-->>B: textОдговор — испрекидана линија, испуњен врх
A->B: textПуна линија, отворен врх
A-)B: textАсинхрона порука — отворен врх, одговор се не очекује
A-xB: textПорука која не успе или се изгуби

Конвенција коју вреди чувати: пуна линија за позив, испрекидана за повратак. Читалац онда препознаје захтев од одговора без читања иједне ознаке.

Учесници и алијаси

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

Користите actor U as Browser уместо participant да нацртате фигуру човека — исплати се за особу на левом крају тока аутентификације.

Траке активације

Траке активације показују колико дуго је учесник заузет. Означите их изричито помоћу activate/deactivate, или додајте + и - на стрелице, што је краће и теже излази из равнотеже.

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

Петље, услови и паралелан рад

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 — понављање.
  • alt <label> … else <label> … end — гране које се међусобно искључују.
  • opt <label> … end — грана која се можда уопште не деси.
  • par <label> … and <label> … end — ствари које се дешавају истовремено.
  • critical / break — одсек који се не сме прекинути, и рани излаз.

Напомене

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 обухвата два учесника и право је место за ограничење које припада интеракцији, а не једној или другој страни.

Пун пример

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 пријава, од почетка до краја.

Уредите овај дијаграм

Налепите га у картицу кода и промените једну линију — преглед се поново исцртава док куцате.

Честа питања

Како да нумеришем поруке?

Ставите autonumber у линију одмах после sequenceDiagram. Свака порука тада добија редни број, што много олакшава причу о дијаграму у коментарима на ревју.

Може ли учесник да пошаље поруку самом себи?

Да — напишите исто име на обе стране: API->>API: retry. Mermaid црта петљу назад на исту животну линију.

Како да прикажем да је учесник уништен?

Користите destroy <name> пре поруке која га завршава, или create participant <name> да се појави усред дијаграма, а не на врху.

Могу ли да уређујем sequence дијаграм на визуелном платну?

Визуелно платно уређује flowchart-ове. Sequence дијаграми се пишу на картици кода, где се уживо рендерују у прегледу — што је обично и брже, јер је sequence дијаграм у суштини списак линија.

Још водича

  1. Извоз mermaid-а у PNG или SVG

    Четири начина да изведете mermaid дијаграм — PNG, SVG, .mmd изворни код и Markdown блок — и када је сваки од њих прави одговор.

  2. Шпаргла за mermaid синтаксу

    Облици чворова, стрелице, подграфови и стилови на једној страници — плус радни пример сваког типа дијаграма који mermaid рендерује.

Отворите едитор. Бесплатно — без регистрације.

Празно платно, картица кода и сваки начин извоза — бесплатно, у прегледачу, одмах.