【Android -- 写作工具】Markdown 状态图

【Android -- 写作工具】Markdown 状态图

1. 前言

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

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

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

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

2. 语法详解

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

实例 1：

状态1

实例 2：

用单向箭头表示转换。

状态1 状态2

实例 3：

增加描述。

咻~ 状态1 状态2

实例 4：

增加开始和结束节点。

状态节点

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

实例 7：

父状态节点 子状态节点

实例 8： 群组之间的嵌套。

第一层 第一层子节点 第二层 第二层子节点 第三层 第三层子节点

2.4 状态图中的「分支」 对于非单一结果的状态转换，我们可以使用 <> 和 <> 标签实现。

实例 9：

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

分支2 分支3 状态4

实例 11：

激活状态 按下 NumLock 键 按下 NumLock 键 NumLock关 NumLock开 按下 CapsLock 键 按下 CapsLock 键 CapsLock关 CapsLock开 按下 ScrollLock 键 按下 ScrollLock 键 ScrollLock关 ScrollLock开

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

实例 12：

描述将出现在右侧 这里添加描述内容 状态2 在节点左侧添加描述

3. 使用场景及实例

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

实例 13：

出货状态示意图。

下单成功 备货 出货失败 出货确认 出货完毕 订单完成

4. 小结

Mermaid 为 Markdown 扩展了使用普通文本生成状态图的语法及渲染支持；Mermaid 状态图的基本元素包含「状态节点」、「转换」；Mermaid 状态图还可以将节点合并，实现「嵌套」的效果；Mermaid 状态图的逻辑支持「分支」、「并行」；Mermaid 状态图还可以通过「备注」的方式，为状态图提供更多的细节描述。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。