选择阅读方向
审批流程可用 TD 纵向展开，较宽文档中的请求路径可用 LR 横向展开。
流程与决策建模
Mermaid 流程图在线编辑器
用 Mermaid 描述审批流程、请求路径或决策树。在上方编辑器中调整节点与分支标签，检查预览，再导出 SVG 或 PNG 用于文档。
在线创建 Mermaid 流程图
参考下方变更审核示例，或粘贴自己的流程图源码。工作区已有草稿会优先恢复，不会被页面示例覆盖。
Loading diagram preview...
让流程的下一步和分支条件清楚可读
需要解释流程走哪条路径时，使用流程图；需要解释哪个参与者按什么顺序发送消息时，使用时序图。
区分步骤与判断
矩形描述动作，菱形突出决定下一条路径的问题。
标注分支与循环
在每条出口写出通过、拒绝或业务条件，将修改步骤连回判断点。
划分阶段或服务
用有名称的 subgraph 说明一组步骤属于哪个团队、系统或阶段。
创建并导出一张流程图
先围绕一个流程和一个结果建立小图，再补充需要讨论的分支。
- 01
声明 flowchart TD 或 flowchart LR，为每个步骤设置稳定 ID 和动作标签。
- 02
连接步骤、标注判断出口，在预览中分别沿成功路径和重试循环检查。
- 03
选择主题并下载 SVG 或 PNG。保留源码便于后续修改；需要保存为项目时登录账号。
方向与可读标签
TD 和 TB 都表示从上到下，LR 表示从左到右，RL 和 BT 则反向排列。修改展示文案时保持节点 ID 稳定。
flowchart LR
Request[收到请求] --> Review[审核方案]判断分支与重试循环
花括号创建判断节点，连线中的竖线包住分支标签。标签用于说明条件，不会执行条件判断。
flowchart TD
Review{审核通过?} -->|是| Release[安排发布]
Review -->|否| Revise[修改方案]
Revise --> Review用 subgraph 表达边界
给相关步骤建立一个具名分组。分组内部节点与外部相连时，Mermaid 可能采用外层方向，而不是分组内设置的方向。
flowchart LR
subgraph API服务
Validate[校验请求] --> Persist[保存请求]
end
Client[客户端] --> Validate带引号的标签与虚线连接
标签中有括号等标点时，用双引号包住，虚线连接使用 -.->。避免把裸露的小写 end 作为节点标签，可用 End 或带引号的标签。
flowchart LR
Check["校验输入（必填）"] -.-> Finish["结束"]Mermaid 流程图示例
变更请求在方案未准备好时返回修改，准备好后进入批准和安排发布。判断出口的标签说明了两条路径。
flowchart TD
Request[接收变更请求] --> Review{可以开始评审吗？}
Review -->|否| Revise[修改方案]
Revise --> Review
Review -->|是| Approve[批准变更]
Approve --> Release[安排发布]- Request 和 Revise 是动作，Review 是决定路径的问题。
- Revise --> Review 表达修改后的再次审核，不需要重复创建审核步骤。
- 尝试把 flowchart TD 改为 flowchart LR，检查相同路径在横向布局下是否更易阅读。
常见问题
如何把流程图改成横向？
将第一行改为 flowchart LR。方向控制整体布局，不保证每个节点都有精确固定的位置。
包含括号的标签为什么报错？
在节点形状内用双引号包住标签，例如 A["校验输入（必填）"]，同时检查方括号和花括号是否成对。
如何给分支标注是或否？
在连线上用竖线包住标签，例如 Review -->|是| Approve。不同出口分别使用能区分业务条件的标签。
为什么 subgraph 的方向没有生效？
分组内部节点与外部节点相连时，Mermaid 可能继承外层方向。可调整整体方向或分组边界，不要依赖精确的局部位置。
如何画虚线连接？
使用 A -.-> B 绘制虚线箭头。需要解释含义时，在虚线之间加入文字，例如 A -. 可选 .-> B。标签用于说明连接，不会执行条件判断。
文档应该导出 SVG 还是 PNG？
目标支持矢量图片且需要缩放时使用 SVG；需要普通图片附件或位图演示时使用 PNG。两种情况下都应保留 Mermaid 源码。
深入比较
流程图与 PlantUML 活动图该怎么选
比较两种文本图表在业务流程、决策分支、泳道和长期维护方面的差异。
阅读流程图对比指南 →