用 Mermaid 写流程图的人都清楚它的两面：写起来快、能进 Git 做版本管理、改一行就能重新渲染；但排版全靠引擎自动决定，节点一多就开始重叠交叉，想微调某个位置基本没办法。给研发同事看没问题，拿去产品评审或者给业务方讲解，说服力就差了一截。
把 Mermaid 代码粘贴进画布解析成可编辑图形，是一个折中方案：代码依然是源，图形拿来做展示和协作。这篇讲怎么用、什么场景值得这么做。
一、支持哪些描述语法
英飞·思想家支持 Mermaid、PlantUML、Graphviz 等主流描述语法，粘贴代码即可解析为可编辑的可视化流程图。
三种语法各自的常见用途：
| 语法 | 常见用途 | 转换后的收益 |
|---|---|---|
| Mermaid | 文档内嵌流程图、时序图、甘特图 | 拿到可自由排版的图形 |
| PlantUML | UML 类图、时序图、组件图 | 大图布局可手动优化 |
| Graphviz | 依赖关系图、状态机 | 复杂图的节点位置可控 |
二、什么场景值得转
不是所有 Mermaid 图都需要转成图形。三种情况转了收益明显：
1. 要拿给非技术同事看。 自动布局的图节点密集、样式统一，读者很难分清主次。转成图形后可以给关键路径加粗、给不同模块换配色、把次要分支移到边上，理解成本明显下降。
2. 图需要被讨论和批注。 代码里的注释不适合承载讨论。转成画布图形后，评审意见可以直接标在具体节点上，回复也留在图里，比在 PR 里描述"第三个 subgraph 里那个判断"清楚得多。
3. 图要进汇报材料。 Mermaid 渲染出来的图尺寸和配色不好控制，放进 PPT 经常需要重新截图裁剪。转成图形后可以直接导出指定格式和尺寸。
反过来，纯粹放在技术文档里、只有研发看、频繁跟着代码改的图，保持 Mermaid 更省事，不必转。
三、转换后先做的三件事
粘贴解析完成后，按这个顺序处理：
第一步：用自动布局重排一次。 解析结果会保留原始的层次关系，但节点位置未必理想。画布支持树形、正交、力导向等多种布局算法，先各试一次，选最清楚的那个作为起点。
第二步：标出主路径。 把最常走的那条路径的节点和连线加粗或换色。Mermaid 里所有分支的视觉权重是一样的，这一步能让读者三秒内找到主干。
第三步：拆分过大的图。 如果原来的 Mermaid 图已经很大，转成图形后可以把子模块单独提出来做成子流程，主图只保留主干。画布无边界限制，但读者的注意力有限。
四、时序图的处理要点
时序图是研发场景里转换需求最高的一类，因为它天然节点多、连线密。
转换后重点调三处：
- 参与方顺序——按调用发起的先后从左到右排，减少连线交叉
- 异步调用标注——虚线箭头和实线箭头要能明显区分，Mermaid 默认样式差别不大
- 关键耗时标注——接口联调时把 SLA 或实测耗时标在对应连线上，这是代码里放不下的信息
时序图适合研发联调与架构评审，转成可编辑图形后，后端同事可以在自己负责的那条线上直接标注疑问，讨论历史留在图里。
五、代码和图形怎么协同维护
这是实践中最需要想清楚的问题——转换之后，源到底是代码还是图？
三种可行的策略：
策略一：代码是源，图形是快照。 每次流程变更先改代码，重新粘贴生成新图，图形只用于展示和评审。适合流程变化频繁、以研发为主的场景。
策略二：转换是单向迁移。 转换之后代码不再维护，图形成为唯一的源。适合流程稳定下来、后续主要由产品和业务方维护的图。
策略三：分工维护。 技术细节部分保持代码（如时序图、类图），业务流程部分用图形（如审批流、业务链路）。这是团队规模上来之后比较常见的做法。
要避免的是两边都维护——代码改了图没改，或者反过来，几个月后没人知道哪个是对的。开始转换前先在团队里定好策略。
六、从其他工具迁移过来
除了语法导入，还有两条迁移路径：
- 图片识别——把旧工具导出的 PNG 截图上传，AI 识别形状、文字与连接关系转成可编辑图形。详见手绘草稿怎么转成可编辑流程图
- 文字描述生成——直接用自然语言描述流程，让 AI 生成初版，适合原图已经找不到源文件的情况
对从 Draw.io、Visio 迁移的团队来说，通常是几条路径混用：能拿到源文件的走语法导入，只剩截图的走图片识别，实在没有的重新描述生成。
七、转换之后能多做的事
图形化之后能做而代码做不到的，主要是协作相关：
- 实时协作编辑——多人同时改同一张图，变更实时同步，支持光标跟随和视野同步
- 节点级评论批注——疑问和说明挂在具体节点上，讨论历史留在画布里，复盘有据可查
- 多格式导出与嵌入——PNG、SVG、PDF 导出，或生成分享链接和嵌入代码，集成到 Notion、飞书文档等平台
- 和其他内容同屏——时序图旁边挂着接口文档、ER 图和会议结论，改一处能看到相关部分
最后一条在系统设计阶段尤其有用：架构图、ER 图和时序图放在同一块画布上，评审时不用在几个文件之间切换。
常见问题
支持哪些描述语法？
支持 Mermaid、PlantUML、Graphviz 等主流描述语法，粘贴代码即可解析为可编辑的可视化流程图。
转换后还能改回代码吗？
转换是把代码解析成画布图形。如果需要保持代码为源，建议采用"代码改完重新生成图"的方式，而不是双向同步。
很大的图转换后会乱吗？
解析会保留层次关系，位置可能需要调整。可以用树形、正交、力导向等自动布局算法一键整理，再手动微调关键区域。
支持哪些图表类型？
标准流程图、泳道图、数据流图、BPMN 业务流程图、UML 活动图、时序图、组织架构图等十余种类型。
转换后怎么放回文档？
支持导出 PNG、SVG、PDF，也可生成分享链接或嵌入代码，集成到 wiki、演示文稿与项目文档。
结语
Mermaid 的优势是可维护，图形的优势是可沟通。两者不冲突——技术细节留在代码里，需要被讨论和展示的部分转成图形，各取所长。
转换之前把维护策略定下来，避免两边都改。想了解产品的完整能力，可以看AI 流程图功能页；不确定该用什么图表类型，可以先看图表类型怎么选。