Mermaid之状态图(stateDiagram)

13 Dec 2021 » md, others

状态图

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

mermaid stateDiagram

mermaid关键字stateDiagramstateDiagram-v2

方向

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

状态定义

简单状态
stateDiagram-v2
direction LR
s1 --> s2

stateDiagram-v2
direction LR
s1 --> s2
别名
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: 连接描述
开始和结束
stateDiagram-v2
direction LR
%% [*]在左边表示开始右边表示结束
[*] --> [*]

stateDiagram-v2
direction LR
[*] --> [*]
复合状态
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 --> [*]
        }
    }
}
选择
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 <<choice>>
    [*] --> IsPositive
    IsPositive --> if
    if --> False: if n < 0
    if --> True : if n >= 0
    False --> [*]
    True --> [*]
fork/join状态
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 --> [*]
并发状态
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
    }
备注
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

综合示例

以java线程状态为例

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