如何在线制作流程图——分步指南

第一步——选择方向

用 graph TD 开始从上到下的流程图，或用 graph LR 做从左到右的布局。纵向流程适合用 TD，横向流程适合用 LR。

graph TD

第二步——添加节点

每个节点由一个 ID 和方括号中的标签组成。ID 用于引用节点，标签是显示在图中的文字。

graph TD
    A[开始]
    B[处理数据]
    C[结束]

第三步——用箭头连接节点

用 --> 从一个节点画箭头到另一个节点。在竖线符号之间加文字可以给箭头添加标签。

graph TD
    A[开始] --> B[处理数据]
    B --> C{成功？}
    C -->|是| D[完成]
    C -->|否| E[重试]
    E --> B

第四步——使用正确的节点形状

Mermaid 支持多种形状来传达不同含义：

[标签] —— 矩形（流程步骤）

{标签} —— 菱形（决策/是否分支）

(标签) —— 圆角矩形（开始或结束）

[(标签)] —— 圆柱体（数据库或存储）

((标签)) —— 圆形（连接点）

graph TD
    A(开始) --> B[验证输入]
    B --> C{有效？}
    C -->|是| D[(存入数据库)]
    C -->|否| E[显示错误]
    D --> F(结束)

导出流程图

当流程图满意后，点击「下载 SVG」得到可嵌入任何文档的矢量图，或点击「下载 PNG」得到可直接粘贴到演示文稿或 wiki 的位图。

也可以复制分享链接——图表代码已编码在 URL 中，任何人点击链接都能看到相同的图表，无需账号。

流程图小技巧

保持标签简短——每个节点一行文字，一眼就能看清。

图表变大时用 subgraph 块将相关步骤分组。

先画主流程（正常路径），再添加错误分支。

保持方向一致（全用 TD 或全用 LR），避免布局混乱。