mermaid stateDiagram使用指南

mermaid stateDiagram使用指南

状态图用于描述系统的行为，状态之间的转移关系

state

三种方式定义状态

stateDiagram-v2
    s1 %% 方式1
    state "This is a state description" as s2 %% 方式2 别名
    s3: another state description %% 方式3 id：描述
    s1-->s2
    s3-->s2

start/end

两种特殊的状态 start 和 end，用[*]表示，根据状态转移的方向自动确定表示start或end

stateDiagram
    [*]-->[*] %% start to end

composite states

• 复合状态，用{}括起来
• 复合状态可以嵌套
• 复合状态之间可以转移

stateDiagram
    state First { %% 定义复合状态
        f1 --> f2
    }

    state second {
        s1-->s2
    }

    state third {
        state fourth { %% 复合状态可以嵌套
            tf1 --> tf2
        }
    }
    f1-->s1 %% 不同复合状态中的状态可以转移
    second-->third  %% 复合状态之间可以转移

transition

用–>表示状态转移

stateDiagram
    direction LR
    A --> B %% --> 表示状态转移

logic

choice

选择, <<choice>>

stateDiagram-v2
    state if_state <<choice>>
    [*] --> isPositive
    isPositive-->if_state
    if_state-->false:if n >= 0
    if_state-->true: if n < 0

fork

分支， <<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-->[*]

concurrency

并发, –

stateDiagram-v2
    [*]-->A

    state A {
        [*] --> A1
        A1 --> B
        A1 --> C
        -- %% 并发
        [*] --> A2
        A2-->D
        A2-->E
        -- %% 并发
        [*] --> A3
        A3-->F
        A3-->G
        F-->[*]
        G-->[*]
    }

note

• 单行note
• 块状note

stateDiagram-v2
    state1: The state with a note
    note right of state1 %% 块状note
        import information! You can write notes.
    end note

    state1-->state2 
    %% 单行note
    note left of state2:this is the note to the left

direction

指定方向, direction LR

方向	描述
LR	left to right
RL	right to left
TB	top to bottom
BT	bottom to top

stateDiagram 
    direction LR  %% 指定方向
    [*] --> A
    A --> B

comments

注释 %%开头直到行尾

stateDiagram
    direction LR
%% 注释
    A-->B