Как да напишеш 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, за да нарисуваш човече — струва си за човека в левия край на flow за автентикация.

Ленти за активност

Лентите за активност показват колко дълго участникът е зает. Маркирай ги изрично с 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 чертае примката обратно към същия lifeline.

Как да покажа, че участник е унищожен?

Използвай destroy <name> преди съобщението, което го приключва, или create participant <name>, за да се появи по средата на диаграмата, вместо в началото.

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

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

Още ръководства

  1. Износ на mermaid към PNG или SVG

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

  2. Синтаксис на mermaid — справка

    Форми на възли, стрелки, подграфи и стилове на една страница — плюс работещ пример за всеки вид диаграма, която mermaid изобразява.

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

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