1. 前言
Markdown 的原生语法不支持绘制图形，但通过扩展模块，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、”饼图” 等。
本节将重点介绍如何通过 Mermaid 绘制「状态图」。
状态图 (Statechart) 是描述一个实体基于事件反应的动态行为，是使对象达到某种状态的事件、条件或操作的图形化描述。
一个完整的状态图由状态、转换组成。
2. 语法详解
2.1 状态图中的「状态」
状态代表某一对象在某一特定的条件、时间下所保持的静态值。
使用 Mermaid 扩展绘制状态图时，有多种方式声明一个状态节点。
实例 1：
通过设置状态 ID 声明状态
状态1
实例 2：
用单向箭头表示转换。
状态1
状态2
实例 3：
增加描述。
咻~
状态1
状态2
实例 4：
增加开始和结束节点。
状态节点
2.2 状态图中的「嵌套」
在负责的状态描述中，有的状态节点会包含一系列的子状态，我们可以用组合「嵌套」的方式来描绘它们。在 Mermaid 扩展中，描述嵌套的方式，是使用「花括号 {}」描述子状态。
实例 7：
父状态节点
子状态节点
实例 8：
群组之间的嵌套。
第一层
第一层子节点
第二层
第二层子节点
第三层
第三层子节点
2.4 状态图中的「分支」
对于非单一结果的状态转换，我们可以使用 <> 和 <> 标签实现。
实例 9：
使用 <> 描述分支，使用 <> 描述聚合。
分支2
分支3
状态4
2.5 状态图中的「并行」
对于一些同步完成的状态转换，我们可以用 – 符号声明并行效果。
实例 11：
激活状态
按下 NumLock 键
按下 NumLock 键
NumLock关
NumLock开
按下 CapsLock 键
按下 CapsLock 键
CapsLock关
CapsLock开
按下 ScrollLock 键
按下 ScrollLock 键
ScrollLock关
ScrollLock开
2.6 为状态图增加「备注」
有时候图表元素不能完全表达我们的设计思路，这时候需要在图中加入文字描述。在 Mermaid 语法中，使用 note <right|left> of 备注内容 end notes 的方式，将备注添加到状态节点的右侧（左侧）。
实例 12：
描述将出现在右侧
这里添加描述内容
状态2
在节点左侧添加描述
3. 使用场景及实例
状态图专门用于表示依赖于状态的行为。
实例 13：
出货状态示意图。
下单成功
备货
出货失败
出货确认
出货完毕
订单完成
4. 小结
- Mermaid 为 Markdown 扩展了使用普通文本生成状态图的语法及渲染支持；
- Mermaid 状态图的基本元素包含「状态节点」、「转换」；
- Mermaid 状态图还可以将节点合并，实现「嵌套」的效果；
- Mermaid 状态图的逻辑支持「分支」、「并行」；
- Mermaid 状态图还可以通过「备注」的方式，为状态图提供更多的细节描述。
