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 --> Thirdstate First {[*] --> firfir --> [*]
}
state Second {[*] --> secsec --> [*]
}
state Third {[*] --> thithi --> [*]
}
```

效果如下：

5.分支和连接

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

```mermaid
stateDiagram-v2
state fork_state <<fork>>[*] --> fork_statefork_state --> State2fork_state --> State3state join_state <<join>>State2 --> join_stateState3 --> join_statejoin_state --> State4State4 --> [*]
```

效果如下：

6.标记

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

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

效果如下：

7.并发

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

```mermaid
stateDiagram-v2[*] --> Activestate Active {[*] --> NumLockOffNumLockOff --> NumLockOn : EvNumLockPressedNumLockOn --> NumLockOff : EvNumLockPressed--[*] --> CapsLockOffCapsLockOff --> CapsLockOn : EvCapsLockPressedCapsLockOn --> CapsLockOff : EvCapsLockPressed--[*] --> ScrollLockOffScrollLockOff --> ScrollLockOn : EvCapsLockPressedScrollLockOn --> ScrollLockOff : EvCapsLockPressed}
```

效果如下：

8.注释

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

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

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