Markdown(四)——绘图工具mermaid之状态图stateDiagram

前言：在做软件工程时经常会需要用到绘图来帮助理解软件构造，CSDN的编辑器集成了插入绘图工具mermaid,以下是对其常用语法的一些记录整理

---

状态图

  以下是学习mermaid语法的官网：https://mermaid-js.github.io/mermaid/#/stateDiagram
  每个代码块都要用以下代码包括进去,才能保证被MarkDown解释器解释为UML图：

```meraid
```

  本来打算一边记录一边在CSDN上用编辑器展示，但是目前它的编辑器不支持状态图的显示，只能编辑器Typora上做实验后截图发布效果对比图。

---

1.状态

  状态图的定义有很多，为了便于记忆，个人挑选了最常用的一种写法：

```mermaid
stateDiagram-v2
s2 : 这是状态2
```

  :前s2是状态的ID,效果如下：

2.转换

  mermaid用-->表示两个状态间的转换，比如： s1 --> s2。你也可以用:加上描述符组成转换条件：s1 --> s2 :转换，代码为：

```mermaid
stateDiagram-v2
s1 --> s2: A transition
```

  效果为：

---

3.初始和终止状态

  在状态转换图中，有两个特殊的状态：初始状态和终止状态(不明白这两个知识可以补习状态机相关知识)。它们是用[*]符号和-->标识的转换。
  [*] --> s1，表示初始状态到s1。
  s1 --> [*]，表示s1到终止状态。
  代码如下：

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

  效果如下：

---

4.组合状态

  在现实生活中状态复杂多变，往往具有多维性。可能在一个状态中，又有许多状态组成一个子状态机。mermaid用{}来表示组合状态。
  代码中，先定义出总的状态机。在在每个状态中用{}定义出每个子状态机，代码如下：

```mermaid
stateDiagram-v2
[*] --> First
First --> Second
First --> Third

state First {
    [*] --> fir
    fir --> [*]
}
state Second {
    [*] --> sec
    sec --> [*]
}
state Third {
    [*] --> thi
    thi --> [*]
}
```

  效果如下：

---

5.分支和连接

  对于遇到分支条件或者组合条件的状态机，mermaid定义了关键字<>和<>。下面例子中展示了这两个关键字的用法，先定义<>和<>的状态，再进行引用定义。代码如下：

```mermaid
stateDiagram-v2
state fork_state <>
  [*] --> fork_state
  fork_state --> State2
  fork_state --> State3

  state join_state <>
  State2 --> join_state
  State3 --> join_state
  join_state --> State4
  State4 --> [*]
```

  效果如下：

---

6.标记

  对于一些复杂状态，我们通常需要在图上进行简单说明标记。mermaid使用了note和end note包括一个说明的起始。同时，它还用right of和left of表明标记说明的位置在状态的左边还是右边。示例代码如下：

```mermaid
stateDiagram-v2
    State1: The state with a note
    note right of State1
        标记重要信息
        notes.
    end note
    State1 --> State2
    note left of State2 : 在状态左边标记
```

  效果如下：

---

7.并发

  对于UML中经常出现的并发状态，可以用--对组合状态中的子状态进行区分，就变成并行状态。代码示例如下：

```mermaid
stateDiagram-v2
    [*] --> Active

    state Active {
        [*] --> NumLockOff
        NumLockOff --> NumLockOn : EvNumLockPressed
        NumLockOn --> NumLockOff : EvNumLockPressed
        --
        [*] --> CapsLockOff
        CapsLockOff --> CapsLockOn : EvCapsLockPressed
        CapsLockOn --> CapsLockOff : EvCapsLockPressed
        --
        [*] --> ScrollLockOff
        ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
        ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
    }
```

  效果如下：

---

8.注释

  注释是代码块中必不可少的，mermaid仅支持单行注释，注释符号为%%。

```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]
%% this is a comment
Still --> Moving
Moving --> Still %% another comment
Moving --> Crash
Crash --> [*]
```

---

如果您觉得有帮助，请给我一个赞。
您的鼓励是我前进的动力(๑‾ ꇴ ‾๑)。