状态图

“状态图是计算机科学和相关领域中用于描述系统行为的一种图。状态图要求所描述的系统由有限数量的状态组成；有时确实如此，而在其他情况下有时这是一个合理的抽象。” 维基百科

Code Chart 可以渲染状态图。该语法试图与 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 您可以将状态更改为 Moving。在移动中，您可以将状态更改回静止或崩溃。没有从静止到崩溃的过渡。

状态

可以通过多种方式声明一个状态。最简单的方法是将状态 id 定义为描述。

stateDiagram-v2
    s1

另一种方法是使用带有如下描述的 state 关键字：

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 的文件中提取的

州名中的空格

可以通过在顶部定义空格并稍后引用首字母缩略词来将空格添加到状态。

stateDiagram-v2
    Yswsii: Your state with spaces in it
    [*] --> Yswsii