Диаграмма состояний
Синтаксис диаграммы состояний Mermaid совместим с синтаксисом, используемым в plantUml, что упрощает пользователям обмен диаграммами между mermaid и plantUml.
Копировать
Встраивание
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Старый редактор:
Копировать
Встраивание
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Новый редактор:
На диаграмме состояний система описывается через состояния и то, как одно состояние посредством перехода изменяется на другое. Пример диаграммы выше показывает три состояния: покой, движение и столкновение. Вы начинаете из состояния покоя, из состояния покоя можно перейти в состояние движения. Из состояния движения вы можете вернуться в состояние покоя или перейти в состояние столкновения. Перехода из состояния покоя в состояние столкновения нет. (Если оставаться в покое, столкновения не произойдёт.)
状态
Состояние можно объявить несколькими способами; самый простой способ — определить состояние только с одним id:
Копировать
Встраивание
stateDiagram-v2
stateId
Другой способ — использовать синтаксис state и добавить следующее описание:
Копировать
Встраивание
stateDiagram-v2
state "This is a state description" as s2
Ещё один способ определения состояния с описанием — сначала определить ID состояния, затем добавить двоеточие и описание:
Копировать
Встраивание
stateDiagram-v2
s2 : This is a state description
Переход
Переход — это соединительная линия, когда одно состояние входит в другое, обозначается текстовой стрелкой "-->".
Когда вы определяете переход между двумя состояниями, и состояние ещё не определено, неопределённое состояние будет определено с использованием id из перехода. После этого вы можете добавить описание для определённого таким образом состояния.
Копировать
Встраивание
stateDiagram-v2
s1 --> s2
В переход можно добавить текст, описывающий то, что он представляет:
Копировать
Встраивание
stateDiagram-v2
s1 --> s2: A transition
Начало и конец
Существует два особых состояния, обозначающих начало и остановку диаграммы. Эти два состояния обозначаются синтаксисом [*], и направление перехода к этому состоянию определяет, является ли оно начальным или конечным состоянием.
Копировать
Встраивание
stateDiagram-v2
[*] --> s1
s1 --> [*]
Составное состояние
При использовании диаграмм состояний в реальном мире вы часто сталкиваетесь с многомерными диаграммами, поскольку состояние может иметь несколько внутренних состояний; это называется составным состоянием.
Чтобы определить составное состояние, вам нужно использовать синтаксис state, за которым следует id, и записать тело составного состояния в фигурных скобках {}. Вы можете назвать составное состояние на отдельной строке так же, как определяете простое состояние. См. пример ниже:
Копировать
Встраивание
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
Вы можете работать на нескольких уровнях:
Копировать
Встраивание
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
Вы также можете определять переходы между составными состояниями:
Копировать
Встраивание
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Примечание: нельзя определять переходы между внутренними состояниями, принадлежащими разным составным состояниям.
Выбор
Иногда вам нужно смоделировать выбор между двумя или более путями; это можно реализовать с помощью <<choice>>.
Копировать
Встраивание
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Разветвление/слияние
Можно использовать <<fork>> <<join>> для указания разветвления/слияния на диаграмме.
Копировать
Встраивание
stateDiagram-v2
state fork_state <<fork>>
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state <<join>>
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
Примечание
Использование комментариев на диаграмме состояний позволяет выразить мысль более ясно; можно разместить комментарий справа или слева от узла.
Копировать
Встраивание
stateDiagram-v2
State1: The state with a note
note right of State1
Important information! You can write
notes.
end note
State1 --> State2
note left of State2 : This is the note to the left.
Параллелизм
Как и в plantUml, вы можете задать параллелизм с помощью символа дефиса --.
Копировать
Встраивание
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
Настройка направления диаграммы
Для диаграммы состояний вы можете использовать оператор направления для настройки направления рендеринга диаграммы, как показано в этом примере.
Копировать
Встраивание
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Комментарий
В диаграмму состояний можно вводить комментарии, которые редактор игнорирует. Комментарий должен начинаться с двойного знака процента (%%); весь текст от этого маркера до следующего символа перевода строки считается комментарием, включая любой синтаксис диаграммы. Комментарий может занимать отдельную строку или находиться в конце оператора.
Копировать
Встраивание
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Настройка стиля с помощью classDefs
Текущие ограничения classDef для диаграммы состояний:
1. Нельзя применять к начальному или конечному состоянию
2. Нельзя применять к составному состоянию или внутри составного состояния
Вы можете использовать синтаксис classDef (сокращение от class definition, где «class» аналогичен классу в CSS) для определения стилей. После classDef идёт имя стиля, затем одно или несколько «свойство-значение», каждое из которых состоит из допустимого имени свойства CSS, двоеточия (:) и соответствующего значения.
Ниже приведён пример classDef только с одним «свойство-значение»:
Копировать
Встраивание
classDef movement font-style:italic;
- Имя стиля — movement
- Единственное свойство — font-style, значение — italic
Если вы хотите иметь несколько «свойство-значение», можно поставить запятую (,) между каждой парой «свойство-значение».
Ниже приведён пример, содержащий три пары «свойство-значение»:
Копировать
Встраивание
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- Имя стиля — badBadEvent
- Первое свойство — fill, его значение — #f00
- Второе свойство — color, его значение — white
- Третье свойство — font-weight, его значение — bold
- Четвёртое свойство — stroke-width, его значение — 2px
- Пятое свойство — stroke, его значение — yellow
Применение стиля classDef к состоянию
Существует два способа применения стиля classDef к состоянию:
- Применить стиль classDef к одному или нескольким состояниям в одном операторе с помощью синтаксиса class
- Применить стиль classDef с помощью оператора :::, когда состояние используется в операторе перехода (например, со стрелкой, указывающей на другое состояние или от него)
1. Оператор class
Оператор class сообщает Mermaid о необходимости применить указанный classDef к одному или нескольким классам. Формат таков:
Копировать
Встраивание
class [one or more state names, separated by commas] [name of a style defined with classDef]
Ниже приведён пример применения стиля badBadEvent к состоянию с именем Crash:
Копировать
Встраивание
class Crash badBadEvent
Ниже приведён пример применения стиля movement к двум состояниям Moving и Crash:
Копировать
Встраивание
class Moving,Crash movement
Вот пример. Обратите внимание, что к состоянию Crash применены два стиля classDef: movement и badBadEvent
Копировать
Встраивание
stateDiagram
direction TB
accTitle: This is the accessible title
accDescr: This is an accessible description
classDef notMoving fill:white
classDef movement font-style:italic
classDef badBadEvent fill:pink,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
[*]--> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
class Still notMoving
class Moving, Crash movement
class Crash badBadEvent
class end badBadEvent
2. Применение стиля к состоянию с помощью оператора :::
Вы можете применить стиль classDef к состоянию с помощью оператора :::. Синтаксис таков:
Копировать
Встраивание
[state]:::[style name]
Вы можете применить его в операторе, использующем класс; это включает начальное и конечное состояния. Например:
Копировать
Встраивание
stateDiagram
direction TB
accTitle: This is the accessible title
accDescr: This is an accessible description
classDef notMoving fill:white
classDef movement font-style:italic;
classDef badBadEvent fill:pink,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
[*] --> Still:::notMoving
Still --> [*]
Still --> Moving:::movement
Moving --> Still
Moving --> Crash:::movement
Crash:::badBadEvent --> [*]
Пробелы в имени состояния
Сначала можно определить состояние с помощью id, а затем, ссылаясь на этот id, добавить пробелы в состояние.
В следующем примере есть состояние с ID yswsii, описанное как «Your state with spaces in it». После определения yswsii используется в первом переходе диаграммы ([*] --> yswsii), а также используется при переходе к YetAnotherState (yswsii --> YetAnotherState). Для yswsii задан стиль, отличающий его от других состояний.
Копировать
Встраивание
stateDiagram
classDef yourState font-style:italic,font-weight:bold,fill:white
yswsii: Your state with spaces in it
[*] --> yswsii:::yourState
[*] --> SomeOtherState
SomeOtherState --> YetAnotherState
yswsii --> YetAnotherState
YetAnotherState --> [*]
