Диаграмма последовательности
Mermaid может рендерить диаграммы последовательности. Диаграмма последовательности — это диаграмма взаимодействия, показывающая, как процессы взаимодействуют друг с другом и в каком порядке выполняются операции.
Копировать
Встраивание
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
Примечание об узлах: из-за способа записи языка Mermaid слово "end" разрушает весь граф. Если необходимо использовать «end», нужно заключить слово «end» в круглые скобки (), двойные кавычки "", фигурные скобки {} или квадратные скобки [], то есть: (end), [end], {end}.
Синтаксис
Участник
Участники отображаются в порядке их появления в исходном тексте диаграммы. Иногда вы можете захотеть отображать участников в порядке, отличном от порядка их появления в первом сообщении; порядок появления участников можно задать следующим способом:
Копировать
Встраивание
sequenceDiagram
participant Alice
participant Bob
Bob->>Alice: Hi Alice
Alice->>Bob: Hi Bob
角色
Если вы хотите использовать символ роли вместо прямоугольника с текстом, это можно сделать с помощью оператора роли, как показано ниже.
Копировать
Встраивание
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
Псевдоним
Вы можете определить псевдоним с помощью as после объявления участника
Копировать
Встраивание
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
Создание и уничтожение участников
Участников можно создавать и уничтожать с помощью сообщений. Поэтому добавьте перед сообщением директиву создания или уничтожения.
Копировать
Встраивание
participant B
A --> B: Hello
При создании директивы поддерживается различение участника и псевдонима. Отправитель или получатель сообщения может быть уничтожен, но получатель может быть только создан.
Копировать
Встраивание
sequenceDiagram
Alice->>Bob: Hello Bob, how are you ?
Bob->>Alice: Fine, thank you. And you?
create participant Carl
Alice->>Carl: Hi Carl!
create actor D as Donald
Carl->>D: Hi!
destroy Carl
Alice-xCarl: We are too many
destroy Bob
Bob->>Alice: I agree
Группа/блок
Участников можно группировать в вертикальные блоки. Вы можете определить цвет с помощью символа (если он не определён, он будет прозрачным).
Копировать
Встраивание
box Aqua Group Description
... actors ...
end
box Group without description
... actors ...
end
box rgb(33,66,99)
... actors ...
end
box rgba(33,66,99,0.5)
... actors ...
end
Если имя вашей группы окрашено, вы можете принудительно сделать этот цвет прозрачным:
Копировать
Встраивание
box transparent Aqua
... actors ...
end
Копировать
Встраивание
sequenceDiagram
box Orange Alice & John
participant A
participant J
end
box Another Group
participant B
participant C
end
A->>J: Hello John, how are you?
J->>A: Great!
A->>B: Hello Bob, how is Charley?
B->>C: Hello Charley, how are you?
Сообщение
Сообщения могут отображаться сплошной или пунктирной линией.
Линии могут быть сплошными или пунктирными и поддерживают завершение различными типами стрелок, перекрестий или открытых стрелок.
Копировать
Встраивание
[Actor][Arrow][Actor]:Message text
Десять стандартных типов стрелок
| Тип | Описание |
|---|---|
| -> | Сплошная линия без стрелки |
| --> | Пунктирная линия без стрелки |
| ->> | Сплошная линия со стрелкой |
| -->> | Пунктирная линия со стрелкой |
| <<->> | Сплошная линия с двунаправленной стрелкой |
| <<-->> | Пунктирная линия с двунаправленной стрелкой |
| -x | Сплошная линия с перекрестием на конце |
| --x | Пунктирная линия с перекрестием на конце |
| -) | Сплошная линия с полой стрелкой на конце (асинхронная) |
| --) | Пунктирная линия с полой стрелкой на конце (асинхронная) |
Активация
Роль можно активировать и деактивировать; деактивация или активация может быть отдельным объявлением:
Копировать
Встраивание
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
activate Alice
Bob->>Alice: Hi Alice!
deactivate Alice
Существует также сокращённая запись: добавить + или - после стрелки сообщения.
Копировать
Встраивание
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
Активации одной и той же роли могут накладываться друг на друга:
Копировать
Встраивание
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
Комментарий
В диаграмму последовательности можно добавлять комментарии. Это можно сделать с помощью следующих символов: Note[right of] или [left of] или [over][участник]: содержимое комментария
Копировать
Встраивание
sequenceDiagram
participant John
Note right of John: Text in note
Также можно создать комментарий, охватывающий двух участников:
Копировать
Встраивание
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
Символ перевода строки
В комментарии и сообщения можно добавлять символы перевода строки:
Копировать
Встраивание
sequenceDiagram
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
Для символа перевода строки в имени роли необходимо определить псевдоним:
Копировать
Встраивание
sequenceDiagram
participant Alice as Alice<br/>Johnson
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<n/>But now in two lines
Цикл
В диаграмме последовательности цикл можно выразить следующими символами.
Копировать
Встраивание
loop Loop text
... statements ...
end
См. пример ниже:
Копировать
Встраивание
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
Альтернатива
В диаграмме последовательности альтернативный путь можно выразить с помощью символов.
Копировать
Встраивание
alt Describing text...
statements
else
statements
end
或者如果存在可选序列：
Копировать
Встраивание
opt Describing text...
statements
end
См. пример ниже:
Копировать
Встраивание
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
Параллельно
Параллельно происходящие действия можно обозначить следующими символами.
Копировать
Встраивание
par Action 1
statements
and Action 2
statements
and Action N
statements
end
См. пример ниже:
Копировать
Встраивание
sequenceDiagram
par Alice to Bob
Alice->>Bob: Hello guys!
and Alice to John
Alice->>John: Hello guys!
end
Bob-->>Alice: Hi Alice!
John-->>Alice: Hi Alice!
Также можно вкладывать параллельные блоки.
Копировать
Встраивание
sequenceDiagram
par Alice to Bob
Alice->>Bob: Go help John
and Alice to John
Alice->>John: I want this done today
par John to Charlie
John->>Charlie: Can we do this today?
and John to Diana
John->>Diana: Can you help us today?
end
end
Критическая секция
Можно показать операции, которые должны выполняться автоматически, задав условия для различных ситуаций.
Это делается с помощью следующих символов:
Копировать
Встраивание
critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end
См. пример ниже:
Копировать
Встраивание
sequenceDiagram
critical Establish a connection to the DB
Service-->DB: connect
option Network timeout
Service-->Service: Log error
option Credentials rejected
Service-->Service: Log different error
end
Также возможно полное отсутствие вариантов.
Копировать
Встраивание
critical Establish a connection to the DB
Service-->DB: connect
end
Этот критический блок также можно вкладывать, что эквивалентно оператору par, показанному выше.
Прерывание
Можно указать остановку последовательности в процессе, что обычно используется для моделирования исключительных ситуаций.
Это делается с помощью следующих символов:
Копировать
Встраивание
break [something happened]
... statements ...
end
См. пример ниже:
Копировать
Встраивание
sequenceDiagram
Consumer-->API: Book something
API-->BookingService: Start booking process
break when the booking process fails
API-->Consumer: show failure
end
API-->BillingService: Start billing process
Подсветка фона
Можно задать цветной прямоугольник фона для подсветки процесса; это делается с помощью следующих символов:
Копировать
Встраивание
rect COLOR
... content ...
end
Цвета определяются с использованием синтаксиса rgb и rgba.
Копировать
Встраивание
rect rgb(0, 255, 0)
... content ...
end
Копировать
Встраивание
rect rgba(0, 0, 255, .1)
... content ...
end
См. пример ниже:
Копировать
Встраивание
sequenceDiagram
participant Alice
participant John
rect rgb(191, 178, 255)
note right of Alice: Alice calls John.
Alice->>+John: Hello John, how are you?
rect rgb(142, 182, 89)
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
end
John-->>-Alice: I feel great!
end
Alice ->>+ John: Did you want to go to the game tonight?
John -->>- Alice: Yeah! See you there.
Комментарий
В диаграмму последовательности можно вводить комментарии, которые редактор игнорирует. Комментарий должен занимать отдельную строку и начинаться с двойного знака процента %%. Любой текст от начала комментария до следующего символа перевода строки считается комментарием, включая любой синтаксис диаграммы.
Копировать
Встраивание
sequenceDiagram
Alice->>John: Hello John, how are you?
%% this is a comment
John-->>Alice: Great!
Символьные сущности для экранирования символов
Символы можно экранировать с помощью следующего синтаксиса.
Копировать
Встраивание
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
Приведённое число является десятичным, поэтому (#) можно закодировать как (#35;); также поддерживается использование имён символов HTML.
Поскольку точка с запятой может использоваться вместо символа перевода строки для определения разметки, при включении точки с запятой в текст сообщения необходимо использовать (#59;).
Нумерация
К каждой стрелке в диаграмме последовательности можно прикрепить порядковый номер. Как показано ниже:
Копировать
Встраивание
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop HealthCheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Меню участника
Участник может содержать всплывающее меню со списком персонализированных ссылок на внешние страницы. Например, если роль представляет сетевой сервис, полезные ссылки могут включать ссылку на панель мониторинга работоспособности сервиса, репозиторий с кодом этого сервиса или ссылку на страницу вики, описывающую сервис.
Это можно настроить, добавив одну или несколько строк ссылок в следующем формате:
Копировать
Встраивание
link <actor>: <link-label> @ <link-url>
Копировать
Встраивание
sequenceDiagram
participant Alice
participant John
link Alice: Dashboard @ https://dashboard.contoso.com/alice
link Alice: Wiki @ https://wiki.contoso.com/alice
link John: Dashboard @ https://dashboard.contoso.com/john
link John: Wiki @ https://wiki.contoso.com/john
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
Расширенный синтаксис меню
Существует расширенный синтаксис, основанный на формате JSON. Если вы хорошо владеете форматом JSON, то его также можно использовать.
Это можно настроить, добавив строки ссылок следующего формата:
Копировать
Встраивание
links <actor>: <json-formatted link-name link-url pairs>
示例如下:
Копировать
Встраивание
sequenceDiagram
participant Alice
participant John
links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
