时序图

相关源文件

• cypress/integration/rendering/sequencediagram.spec.js
• demos/block.html
• docs/config/configuration.md
• docs/config/directives.md
• docs/config/img/mathMLDifferences.png
• docs/config/math.md
• docs/intro/getting-started.md
• docs/intro/syntax-reference.md
• docs/syntax/block.md
• docs/syntax/classDiagram.md
• docs/syntax/gantt.md
• docs/syntax/sequenceDiagram.md
• packages/mermaid/src/docs/config/8.6.0_docs.md
• packages/mermaid/src/docs/config/directives.md
• packages/mermaid/src/docs/config/math.md
• packages/mermaid/src/docs/intro/getting-started.md
• packages/mermaid/src/docs/intro/syntax-reference.md
• packages/mermaid/src/docs/syntax/block.md
• packages/mermaid/src/docs/syntax/classDiagram.md
• packages/mermaid/src/docs/syntax/examples.md
• packages/mermaid/src/docs/syntax/gantt.md
• packages/mermaid/src/docs/syntax/sequenceDiagram.md

Mermaid 中的时序图是交互图，用于显示进程之间如何操作以及操作顺序。它们表示参与者之间随时间推移的消息流，因此对于记录 API、系统交互和通信协议至关重要。

本文档涵盖 Mermaid 渲染系统中的时序图实现。有关其他图表类型的信息，请参阅流程图、类图和状态图。有关更广泛的配置主题，请参阅配置系统。

核心架构

时序图遵循 Mermaid 的标准渲染管道，利用图表检测系统识别 sequenceDiagram 声明，并将其通过专门的解析和渲染组件进行路由。

时序图架构

时序图系统通过解析器处理文本输入，该解析器在时序数据库中构建内部表示，然后将其以可配置的样式和布局选项渲染为 SVG。

来源：packages/mermaid/src/docs/syntax/sequenceDiagram.md1-30 docs/syntax/sequenceDiagram.md1-30

语法组件

时序图支持丰富的语法来建模参与者之间的交互。核心元素包括参与者、消息以及循环和选择等结构组件。

时序图语法元素

来源：packages/mermaid/src/docs/syntax/sequenceDiagram.md20-160 cypress/integration/rendering/sequencediagram.spec.js3-80

消息类型和箭头

时序图支持十种不同的箭头类型来表示各种消息模式

箭头类型	描述	测试覆盖
->	无箭头的实线	基本消息
-->	无箭头的虚线	返回消息
->>	带箭头的实线	同步调用
-->>	带箭头的虚线	异步响应
<<->>	双向实线	双向通信
<<-->>	双向虚线	双向异步
-x	带叉号的实线	失败/终止调用
--x	带叉号的虚线	失败返回
-)	带开放箭头的实线	异步即发即弃
--)	带开放箭头的虚线	异步通知

来源：packages/mermaid/src/docs/syntax/sequenceDiagram.md147-160 cypress/integration/rendering/sequencediagram.spec.js69-80

测试基础设施

时序图测试系统通过 Cypress E2E 测试和图像快照的视觉回归测试提供全面的覆盖。

时序图测试架构

测试基础设施验证不同配置和浏览器环境下的功能正确性和视觉外观。

来源：cypress/integration/rendering/sequencediagram.spec.js1-50

测试类别

测试套件涵盖多种功能类别：

渲染测试：基本图表渲染，包括参与者验证和 SVG 尺寸检查。

视觉回归测试：使用 imgSnapshotTest() 进行图像快照比较，以检测不同版本之间的视觉变化。

字体配置测试：验证注释、消息和参与者的字体系列、大小和对齐设置。

高级功能测试：参与者创建/销毁、背景矩形、自动编号和交互元素。

来源：cypress/integration/rendering/sequencediagram.spec.js40-300 cypress/integration/rendering/sequencediagram.spec.js245-410

配置选项

时序图通过 sequence 配置对象支持广泛的配置，从而实现外观、行为和布局的定制。

时序图配置架构

来源：cypress/integration/rendering/sequencediagram.spec.js245-340 packages/mermaid/src/docs/config/math.md20-55

字体和文本配置

时序图提供了对文本渲染的精细控制

• actorFontFamily 和 actorFontSize：控制参与者标签字体
• messageFontFamily 和 messageFontSize：控制消息文本字体
• noteFontFamily 和 noteFontSize：控制注释文本字体
• noteAlign 和 messageAlign：控制文本对齐方式（left、center、right）

来源：cypress/integration/rendering/sequencediagram.spec.js245-320

布局和间距

布局配置控制图表间距和定位

• actorMargin：控制参与者之间的间距
• mirrorActors：在图表上方和下方都显示参与者
• useMaxWidth：启用响应式宽度行为
• wrap：启用长标签的文本换行

来源：cypress/integration/rendering/sequencediagram.spec.js342-376 cypress/integration/rendering/sequencediagram.spec.js786-798

高级特性

参与者创建和销毁

时序图通过 create 和 destroy 指令支持动态参与者生命周期管理

参与者生命周期示例

create 指令在图表执行期间实例化新的参与者，而 destroy 指令则标记参与者的终止。此功能支持建模组件在执行期间创建和销毁的动态系统。

来源：cypress/integration/rendering/sequencediagram.spec.js170-192 packages/mermaid/src/docs/syntax/sequenceDiagram.md97-143

背景高亮和分组

背景矩形使用 rect 语法和 RGB/RGBA 颜色提供视觉分组

背景高亮示例

来源：cypress/integration/rendering/sequencediagram.spec.js531-690 packages/mermaid/src/docs/syntax/sequenceDiagram.md582-644

数学表达式

时序图通过使用 $$ 分隔符支持 KaTeX 集成以实现数学符号表示

数学表达式示例

数学表达式可以出现在参与者名称、消息标签和注释中。系统使用 KaTeX 进行渲染，并提供可配置的 MathML 或 CSS 回退选项。

来源：packages/mermaid/src/docs/config/math.md35-45 docs/config/math.md35-55

交互元素

参与者菜单通过 link 语法提供导航功能

• link Alice: Dashboard @ https://dashboard.contoso.com/alice
• link Alice: Wiki @ https://wiki.contoso.com/alice

交互功能需要 securityLevel: 'loose' 配置，并支持 URL 链接和 JavaScript 回调，以便与大型应用程序集成。

来源：cypress/integration/rendering/sequencediagram.spec.js843-885 packages/mermaid/src/docs/syntax/sequenceDiagram.md722-780