Markdown 的原生语法不支持绘制图形，但通过扩展模块，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、"饼图" 等。

本节将重点介绍如何通过 Mermaid 绘制「状态图」。

状态图 (Statechart) 是描述一个实体基于事件反应的动态行为，是使对象达到某种状态的事件、条件或操作的图形化描述。

一个完整的状态图由状态、转换组成。

环境说明： 考虑到 Markdown 工具之间的不兼容，有的内容直接从页面复制粘贴到本地不会正常显示，大家学习时自己动手写是肯定没问题的。本节所有实例代码及演示效果均使用 Typora 工具完成。 Mermaid 为 Markdown 扩展语法，需要在 Typora 设置中开启对图表的语法支持。其方式为：「设置」->「Markdown」->「Markdown 扩展语法」-> 勾选「图表」，如下图：

状态代表某一对象在某一特定的条件、时间下所保持的静态值。

使用 Mermaid 扩展绘制状态图时，有多种方式声明一个状态节点。

实例 1：

通过设置状态 ID 声明状态

上述代码将会渲染成如下效果：

实例 2：

使用 「state」关键字来描述共同声明状态节点。

上述代码将会渲染成如下效果：

实例 3：

使用「状态 ID + 冒号」的方式简化状态节点的声明。

上述代码将会渲染成如下效果：

「转换」在状态图中表现为连接两个状态节点的单向箭头，在 Mermaid 扩展语法中的写法为「字符箭头 -->」。

实例 4：

用单向箭头表示转换。

此代码渲染效果如下：

通过 (行内容):label 的形式，为转换添加描述文本。

实例 5：

增加描述。

渲染效果如下：

状态图中有两个特殊的状态节点：开始节点和结束节点。如果需要在状态图中显示开始或结束节点，可以通过 [*] 方式声明。

实例 6：

增加开始和结束节点。

渲染结果如下：

在负责的状态描述中，有的状态节点会包含一系列的子状态，我们可以用组合「嵌套」的方式来描绘它们。在 Mermaid 扩展中，描述嵌套的方式，是使用「花括号 {}」描述子状态。

实例 7：

渲染结果如下：

「嵌套」的层数没有限制。

实例 8：

多层嵌套。

渲染效果如下：

状态转换可以在「嵌套」的外层，也就是群组间实现。

实例 9：

群组之间的嵌套。

渲染效果如下：

对于非单一结果的状态转换，我们可以使用 和 标签实现。

实例 10：

使用 描述分支，使用 描述聚合。

渲染效果如下：

对于一些同步完成的状态转换，我们可以用 -- 符号声明并行效果。

实例 11：

渲染效果如下：

有时候图表元素不能完全表达我们的设计思路，这时候需要在图中加入文字描述。在 Mermaid 语法中，使用 note of 备注内容 end notes 的方式，将备注添加到状态节点的右侧（左侧）。

实例 12：

渲染效果如下：

状态图专门用于表示依赖于状态的行为。

实例 13：

出货状态示意图。

其渲染效果如下：

0/1000