灵活调整方向
使用 TD、TB、LR、RL 或 BT，让图表适应页面空间和读者的浏览顺序。
流程与决策建模
Mermaid 流程图在线编辑器
在线创建 Mermaid 流程图，用于描述业务流程、决策分支、请求路径和系统工作流。实时预览源码，并导出 SVG 或 PNG。
在线创建 Mermaid 流程图
从一个可运行的变更审核流程开始，修改节点、判断条件、连线标签和方向，并同步检查渲染结果。
把流程逻辑写成可评审的文本
Mermaid 流程图把路径、分支条件和节点含义保存在文本源码中，便于团队与技术文档一起评审和维护。
明确标注决策分支
为判断节点的出口添加条件标签，让读者知道流程为什么进入每条路径。
实时 Mermaid 预览
源码修改后自动更新图表，并在编辑器旁直接显示语法错误。
导出 SVG 和 PNG
下载适合技术文档的矢量 SVG，或适合演示文稿和分享的高清 PNG。
无需本地安装
直接在浏览器中使用，无需安装 Mermaid CLI、桌面应用或编辑器插件。
继续使用 OnUML
将当前源码带入完整编辑器，继续使用 AI 生成、语法修复、分享和项目管理。
如何创建 Mermaid 流程图
先明确流程图要回答的问题，再只添加完成评审所需的步骤、判断和结果。
- 01
选择方向：使用 flowchart TD 创建自上而下的流程，或使用 flowchart LR 创建从左到右的系统路径。
- 02
为每个关键步骤声明一次节点，使用稳定的节点 ID 和简短、明确的动作或状态标签。
- 03
使用箭头连接节点，并在判断分支上标出选择该路径的真实条件。
- 04
从起点沿每条路径检查到最终结果，删除对目标读者没有帮助的分支。
- 05
导出 SVG 或 PNG；需要 AI 生成或修复时，可继续进入完整编辑器。
Mermaid 流程图语法与建模方法
有效的流程图不一定最大，而是能清楚表达方向、判断和结果，同时避免把每个实现细节都变成节点。
使用稳定 ID 和易读标签
节点 ID 用于连接源码，标签用于与读者沟通。保持 ID 简短稳定，再使用方括号、圆括号或花括号选择符合节点作用的形状。
flowchart LR
Start[接收请求] --> Decision{请求有效吗？}用真实条件标注分支
没有出口标签的判断节点会迫使读者猜测。为每条出边写明条件，并确保标签容易区分，例如“通过”和“拒绝”。
Decision -->|是| Process[处理请求]
Decision -->|否| Reject[返回错误]使用 subgraph 分组相关步骤
当一组步骤属于同一服务、团队、阶段或信任边界时使用 subgraph。每个分组都应表达实际含义，而不是仅用于装饰。
subgraph API[接口服务]
Validate[校验请求] --> Persist[保存数据]
end流程图与时序图的区别
当重点是决策和可能路径时使用流程图；当重点是参与者之间按顺序发送的消息时使用时序图。
Mermaid 流程图示例
编辑器默认展示一个包含循环、判断和两种结果的变更审核流程。可以替换标签，同时保留分支结构进行练习。
flowchart TD
Request[接收变更请求] --> Review{可以开始评审吗？}
Review -->|否| Revise[修改方案]
Revise --> Review
Review -->|是| Approve[批准变更]
Approve --> Release[安排发布]相关 Mermaid 工具
继续使用通用编辑器，浏览本批工具目录，或用相关建模视角对照当前图表。
常见问题
什么是 Mermaid 流程图在线编辑器？
它是一款浏览器工具，可以编写 Mermaid 流程图语法、实时预览图表，并在无需本地安装 Mermaid 的情况下导出结果。
如何把 Mermaid 流程图从纵向改为横向？
修改 flowchart 声明后的方向即可。TD 或 TB 表示自上而下，LR 表示从左到右，RL 表示从右到左，BT 表示自下而上。
Mermaid 流程图可以表示判断和循环吗？
可以。菱形节点可表示判断，带标签的箭头可表示分支条件，连线指回之前的节点即可表示循环。
可以按服务或阶段对步骤分组吗？
可以。使用 subgraph 块可以按服务、团队、环境或流程阶段对相关节点进行分组。
可以把流程图导出为 SVG 或 PNG 吗？
可以。SVG 适合需要缩放的技术文档，PNG 适合演示文稿、工单和只接受图片的工具。
什么时候应该改用时序图？
如果需要说明谁在什么时间顺序下发送消息，应使用时序图；如果重点是判断、循环和不同流程路径，则使用流程图。