使用指南

Mermaid 图表语法：从流程图到时序图

了解 Mermaid 的常见图表声明、节点连接方式，以及浏览器本地渲染与 SVG 导出的边界。

JTools 维护者 · 更新于 2026-10-11

Mermaid 以文本定义图表。流程图从 flowchart TD 或 flowchart LR 开始，TD 表示从上到下，LR 表示从左到右；节点可写成 A[名称]，连接关系使用 -->。

时序图使用 sequenceDiagram，再逐行写参与者和消息，例如客户端->>服务端: 请求。名称较长或需要别名时，可先用 participant 声明参与者。

图表源码由浏览器中的 Mermaid 库解析为 SVG。代码不会发送到服务器，但复杂图表的最终排版仍会受浏览器字体和 Mermaid 版本影响。

语法错误时应从第一条错误位置开始检查，常见原因包括未声明图表类型、缩进层级混乱、节点文本中的特殊字符，以及连接符两侧缺少必要空格。导出的 SVG 是矢量图，适合文档和演示稿继续使用。