Mermaid知识点总结8 - State diagram

Mermaid知识点总结8 - State diagram

State diagram是在计算机科学及相关领域中描述系统行为的图解

Mermaid渲染state diagram，语法与plantUml类似。下面给出一个状态图的例子：

stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

在这个图像中描述了系统状态和各个状态之间的转换关系，包括Still、Moving和Crash。

状态

状态可以以多装方式进行声明，最简单的方式是将id作为状态描述，如下所示：

stateDiagram-v2
    s1

另一种方式是使用state关键词来定义：

stateDiagram-v2
    state "This is a state description" as s2

此外，也可以使用如下方式进行状态的定义：

stateDiagram-v2
    s2 : This is a state description

状态转换

使用箭头-->来标识状态转换，当使用两个未经定义的状态进行转换时候，将会以指定的状态id添加这两个状态，之后也可以为这两个状态添加更多的描述信息，如下所示：

stateDiagram-v2
    s1 --> s2

当然，也可以在转换的箭头上面添加描述信息，如下所示：

stateDiagram-v2
    s1 --> s2: A transition

开始和结束

使用两种特殊的图像来确定开始和结束，在编写时候均为[*]，如下所示：

stateDiagram-v2
    [*] --> s1
    s1 --> [*]

复合状态

一个状态中可能嵌套多个其他状态，这时候可以使用这种方式定义一个上层状态，并在下层添加其他状态信息，使用方法如下所示：

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

Forks

使用<<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 --> [*]

添加注释

对于状态可以添加进一步的注释信息，选择将注释放置在right of或者left of两个情况中，如下所示：

    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.

虽然如此，但是从最后结果展现来看，right of更偏向于下方，left of更偏向于上方

并发

使用--进行分隔，可以将状态分割为具有多个开始的情况，如下所示：

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
    }

在官方教程中，这几个是横着一横排并列的，看起来更有感觉，在Typora中渲染为了三个竖向并列，略微差了一些