Mermaid之状态图(stateDiagram)

状态图(Statechart Diagram)是描述一个实体基于事件反应的动态行为，显示了该实体如何根据当前所处的状态对不同的事件做出反应。

mermaid关键字stateDiagram或stateDiagram-v2

方向

语法direction TB/BT/RL/LR，默认TB

状态定义

简单状态	mermaid `stateDiagram-v2 direction LR s1 --> s2` `stateDiagram-v2 direction LR s1 --> s2`	null
别名	mermaid `stateDiagram-v2 direction LR state "this is state s1" as s1 s2: this is state s2 s1 --> s2: 连接描述` `stateDiagram-v2 direction LR state "this is state s1" as s1 s2: this is state s2 s1 --> s2: 连接描述`	null
开始和结束	mermaid `stateDiagram-v2 direction LR %% []在左边表示开始右边表示结束 [] --> []` `stateDiagram-v2 direction LR %% []在左边表示开始右边表示结束 [] --> []`	null
复合状态	mermaid `stateDiagram-v2 [] --> First state First { [] --> Second state Second { [] --> second second --> Third state Third { [] --> third third --> [] } } }` `stateDiagram-v2 [] --> First state First { [] --> Second state Second { [] --> second second --> Third state Third { [] --> third third --> [] } } }`	null
选择	mermaid `stateDiagram-v2 %% 关键语法 state if_state <<choice>> [] --> IsPositive IsPositive --> if_state if_state --> False: if n < 0 if_state --> True : if n >= 0 False --> [] True --> []` `stateDiagram-v2 %% 关键语法 state if_state <<choice>> [] --> IsPositive IsPositive --> if_state if_state --> False: if n < 0 if_state --> True : if n >= 0 False --> [] True --> []`	null
fork/join状态	mermaid `stateDiagram-v2 state fork_state <<fork>> %% fork语法 [] --> fork_state fork_state --> State2 fork_state --> State3 %% join语法 state join_state <<join>> State2 --> join_state State3 --> join_state join_state --> State4 State4 --> []` `stateDiagram-v2 state fork_state <<fork>> %% fork语法 [] --> fork_state fork_state --> State2 fork_state --> State3 %% join语法 state join_state <<join>> State2 --> join_state State3 --> join_state join_state --> State4 State4 --> []`	null
并发状态	mermaid `stateDiagram-v2 [] --> Active state Active { [] --> NumLockOff NumLockOff --> NumLockOn : EvNumLockPressed NumLockOn --> NumLockOff : EvNumLockPressed -- [] --> CapsLockOff CapsLockOff --> CapsLockOn : EvCapsLockPressed CapsLockOn --> CapsLockOff : EvCapsLockPressed }` `stateDiagram-v2 [] --> Active state Active { [] --> NumLockOff NumLockOff --> NumLockOn : EvNumLockPressed NumLockOn --> NumLockOff : EvNumLockPressed -- [] --> CapsLockOff CapsLockOff --> CapsLockOn : EvCapsLockPressed CapsLockOn --> CapsLockOff : EvCapsLockPressed }`	null
备注	mermaid `stateDiagram-v2 State1: The state with a note %% 多行备注 note right of State1 Important information! You can write break line notes. end note State1 --> State2 %% 单行备注 note left of State2 : note left` `stateDiagram-v2 State1: The state with a note %% 多行备注 note right of State1 Important information! You can write break line notes. end note State1 --> State2 %% 单行备注 note left of State2 : note left`	null

综合示例

以java线程状态为例

mermaid

stateDiagram-v2
    [*] --> Runnable: start()
    Runnable --> Running: cpu schedule
    Running --> Runnable: cpu schedule
    bwp: Blocked in object's wait pool
    blp: Blocked in object's lock pool
    Running --> bwp: wait() must have lock
    bwp --> blp: notify()/interrupt()
    blp --> Runnable: acquires lock
    Running --> blp: synchronized
    Running --> Block: block event
    Block --> Runnable: block event end
    Running --> [*]: run() complete

stateDiagram-v2
    [*] --> Runnable: start()
    Runnable --> Running: cpu schedule
    Running --> Runnable: cpu schedule
    bwp: Blocked in object's wait pool
    blp: Blocked in object's lock pool
    Running --> bwp: wait() must have lock
    bwp --> blp: notify()/interrupt()
    blp --> Runnable: acquires lock
    Running --> blp: synchronized
    Running --> Block: block event
    Block --> Runnable: block event end
    Running --> [*]: run() complete

null

Mermaid之状态图(stateDiagram) ​

方向 ​

状态定义 ​

综合示例 ​

Mermaid之状态图(stateDiagram)

方向

状态定义

综合示例