状态图¶
“状态图是计算机科学和相关领域中用来描述系统行为的一种图示。状态图要求所描述的系统是由有限数量的 “状态” 组成的。有时，情况确实如此，而在其他时候，这是一个合理的抽象。” Wikipedia
Mermaid 可以渲染状态图。语法试图与 plantUml 中使用的语法相一致，因为这将使用户更容易在 mermaid 和 plantUml 之间分享图表。
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
较旧的渲染器：
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
在状态图中，系统被描述为它的状态，以及系统的状态如何通过变换而改变为另一个状态。上面的示例图显示了三种状态：Still、Moving 和 Crash。你从 Still 状态开始。从 Still 状态，你可以改变状态为 Moving。在 Moving 状态下，你可以把状态变回 Still 或 Crash。从 Still 到 Crash 是没有过渡的。
状态¶
一个状态可以用多种方式声明。最简单的方法是定义一个状态 ID 作为描述。
stateDiagram-v2
s1
另一种方法是使用带有描述的状态关键词，如下所述：
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 --> [*]
}
你可以分几层来做这件事：
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 --> [*]
%% this is a comment
Still --> Moving
Moving --> Still %% another comment
Moving --> Crash
Crash --> [*]
风格¶
状态图的造型是通过定义一些css类来完成的。在渲染过程中，这些类从位于 src/themes/state.scss 的文件中提取出来