状态图

相关源文件

• cypress/integration/rendering/gantt.spec.js
• cypress/integration/rendering/stateDiagram-v2.spec.js
• cypress/integration/rendering/stateDiagram.spec.js
• demos/gantt.html
• packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js

Mermaid 中的状态图通过展示状态及其之间的转换来可视化系统行为。本页面介绍了 Mermaid 代码库中状态图的实现，重点关注系统如何解析、处理和渲染这些图表。

有关其他图表类型的信息，请参阅图表类型。

概述

Mermaid 支持两个版本的状态图

• stateDiagram (v1)：原始实现
• stateDiagram-v2 (v2)：增强实现，具有更多功能

推荐所有新图表使用版本 2，因为它提供了更好的渲染效果和更多功能。

架构

状态图通过解析器-数据库-渲染器架构实现

来源：packages/mermaid/src/diagrams/state/stateDiagram-v2.ts packages/mermaid/src/diagrams/state/stateDb.js packages/mermaid/src/diagrams/state/shapes.js

关键组件

StateDB

StateDB 类是存储所有图表信息的中心数据结构

数据库存储

• 状态：状态 ID 到状态对象的映射
• 关系：状态之间的转换数组
• 类：样式类定义的映射
• 方向：图表的方向

来源：packages/mermaid/src/diagrams/state/stateDb.js packages/mermaid/src/diagrams/state/stateDb.spec.js1-77

渲染器和绘图工具

状态渲染系统使用 shapes.js 来绘制不同类型的状态

来源：packages/mermaid/src/diagrams/state/shapes.js369-408

状态类型和功能

状态图支持各种状态类型和功能

1. 简单状态

带有可选描述的基本状态

来源：packages/mermaid/src/diagrams/state/parser/state-parser.spec.js9-51

2. 开始和结束状态

标记流程开始和结束的特殊状态

来源：packages/mermaid/src/diagrams/state/shapes.js13-21 packages/mermaid/src/diagrams/state/shapes.js247-272

3. 复合状态

包含其他状态的状态

来源：packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js177-204 packages/mermaid/src/diagrams/state/shapes.js137-246

4. 分叉和汇合状态

分割和合并并行流程的状态

来源：packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js261-290 packages/mermaid/src/diagrams/state/shapes.js273-290

5. 选择状态

表示决策点的状态

来源：packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js315-332

6. 并发状态

用分隔符分隔并行区域的状态

来源：packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js290-325 packages/mermaid/src/diagrams/state/shapes.js28-37

7. 注释

可以附加到状态的文本注释

来源：packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js336-381 packages/mermaid/src/diagrams/state/shapes.js349-360

8. 方向控制

控制图表的方向

来源：packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js443-469

样式

状态图支持两种样式设置状态的方法

1. 类定义

定义可重用样式并将其应用于多个状态

来源：packages/mermaid/src/diagrams/state/parser/state-style.spec.js9-166

2. 直接样式语句

直接将样式应用于特定状态

来源：packages/mermaid/src/diagrams/state/parser/state-style.spec.js211-251

实现细节

与 Mermaid 核心集成

状态图通过图表定义与 Mermaid 核心集成

来源：packages/mermaid/src/diagrams/state/stateDiagram-v2.ts8-21

解析过程

解析过程由 JISON 解析器处理，它会

1. 识别文本中的状态、转换和其他元素
2. 在 StateDB 实例上调用相应的方法
3. 构建图表的完整表示

来源：packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js16-25

渲染过程

渲染过程涉及

1. 从 StateDB 获取状态和关系
2. 使用 drawState() 为每个状态创建 SVG 元素
3. 使用 drawEdge() 为转换创建 SVG 路径
4. 应用类和直接样式语句中的样式
5. 将所有元素组合成最终的 SVG

来源：packages/mermaid/src/diagrams/state/shapes.js369-408 packages/mermaid/src/diagrams/state/shapes.js411-536

图表示例生命周期

让我们追踪一个简单状态图的生命周期

处理步骤

1. 解析:

   • 解析器识别状态：开始、"状态 1"、"状态 2"、结束
   • StateDB.addState() 将每个状态添加到数据库
   • StateDB.addRelation() 添加状态之间的转换
   • StateDB.addStyleClass() 添加 "important" 类

2. 渲染:

   • 渲染器从 StateDB 获取状态和关系
   • drawState() 根据类型渲染每个状态
   • drawEdge() 渲染每个转换
   • drawNote() 渲染 "状态 1" 的注释
   • "important" 类中的样式应用于 "状态 2"

3. 输出:

   • 所有元素组合成最终的 SVG
   • SVG 被插入到文档中

来源：packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js16-25 packages/mermaid/src/diagrams/state/shapes.js369-408 packages/mermaid/src/diagrams/state/shapes.js411-536

结论

Mermaid 中的状态图通过结构良好的代码库提供了一种强大的方式来可视化基于状态的系统。该架构将解析、数据管理和渲染分开，使系统易于维护和扩展。

该实现支持各种类型的状态和转换，以及样式选项和方向控制，允许使用简洁的语法创建简单和复杂的状态图。

来源：packages/mermaid/src/diagrams/state/stateDiagram-v2.ts packages/mermaid/src/diagrams/state/stateDb.js packages/mermaid/src/diagrams/state/shapes.js