Mermaid AI 如何生成、编辑、导出和分享流程图？

Mermaid AI 是 Mermaid Chart 中的对话式图表功能。用户可以用自然语言生成流程图，继续追问以修改结构，再进入代码编辑器或可视化编辑器精修。完成后可导出 PNG、SVG 或 MMD 源码，也能通过链接设置访问权限并分享。它的核心价值是让 AI、Mermaid 代码、画布和协作围绕同一份图表状态工作。

Mermaid AI 的完整工作流

1. 从示例提示或自定义描述开始。
2. 选择或说明需要的图表类型。
3. 让 AI 生成第一版图表。
4. 在对话中补充节点、分支、布局或样式要求。
5. 进入文本编辑器或 Visual Editor 做精确修改。
6. 使用历史记录比较或恢复版本。
7. 导出图片或源码，或者设置权限后分享链接。

AI 适合生成和重构初稿，代码与可视化编辑器负责确定性修正，历史和分享功能则让图表进入团队工作流。

如何写第一条生成提示

提示应说明图表目的、方向、步骤、判断条件和期望输出。例如：

生成一个从左到右的客户退款流程图。
包含申请退款、校验订单、检查退款期限、人工审核、
原路退款和通知客户。
订单不存在或超过退款期限时分别结束。
用子图区分客户、客服系统和支付平台。

“做一个退款流程图”只给出主题，模型只能自行补全业务规则。具体描述越完整，第一版越容易核验。

怎样选择合适的图表类型

• Flowchart：业务步骤、决策树和处理管线。
• Sequence diagram：服务或参与者随时间发生的交互。
• ER diagram：数据实体、字段和关系基数。
• Class diagram：类、接口、属性和继承关系。
• State diagram：对象状态与转换条件。
• Gantt chart：计划、阶段和时间依赖。
• Mind map：主题分解和想法组织。

本文聚焦流程图，但 Mermaid AI 也面向 Mermaid Chart 支持的其他图表类型。不要为了统一格式，把具有明确时序或状态语义的问题硬画成普通流程图。

如何继续对话修改图表

生成第一版后，可以要求 AI 修改局部结构。后续提示应同时说明变更目标和不应变化的部分：

在“人工审核”前增加“金额是否超过 500 元”的判断。
超过时进入人工审核，不超过时直接原路退款。
保留订单不存在和超过退款期限的两个失败出口，
不要改变现有子图名称。

这种约束比“优化一下流程”更可验证，也能减少模型重写无关节点。

如何修改布局和样式

Mermaid AI 可以理解布局和视觉要求，例如改成从上到下、把数据节点分组、突出数据库节点或切换主题。样式提示应与结构提示分开提交，便于发现哪一步引入问题。

• 先确认节点和连接正确。
• 再调整方向和子图布局。
• 最后设置颜色、形状和主题。
• 每一步都比较修改前后的业务拓扑。

视觉更漂亮不代表逻辑更正确。结构验收应优先于美化。

Edit 按钮提供什么能力

官方指南说明，AI 生成结果可通过 Edit 进入 Mermaid Chart 编辑器。用户可以在文本编辑器中修改 Mermaid 语法，也可以进入 Visual Editor 直接调整节点、边、标签、颜色和形状。

文本编辑适合精确控制与复制源码，可视化编辑适合不熟悉 Mermaid 语法的用户。两者应保持同步：点击画布元素可定位代码，修改代码也能找到对应图形。

如何用代码编辑器精修

Mermaid 代码是图表的结构化表示。例如：

flowchart LR
  A[提交退款申请] --> B{订单存在?}
  B -- 否 --> C[通知订单不存在]
  B -- 是 --> D{仍在退款期限?}
  D -- 否 --> E[通知已超过期限]
  D -- 是 --> F[进入退款处理]

手工编辑时应尽量保持节点 ID 稳定。修改标签通常只改方括号内文本；改变 ID 则需要同步所有连接和样式引用。

如何用 Visual Editor 修改

当前产品说明显示，Visual Editor 支持选择节点或边、调整尺寸和形状、拖动创建节点、双击编辑标签，并自动更新 Mermaid 代码。它还支持节点对齐和边的重新连接。

可视化编辑适合快速整理，但每次重大修改后仍建议查看代码，确认没有重复节点、残留连接或意外的标识变化。

AI Repair 怎样处理损坏图表

当 Mermaid 代码无法解析时，AI Repair 可针对错误提出修复，并在应用前预览。修复请求应限定为语法问题，不允许模型顺便改变业务含义。

修复当前图的 Mermaid 语法错误。
保持所有节点、标签、连接方向和子图不变。
先说明拟修改的位置，再提供修复预览。

最终仍要以 Mermaid 真实解析和渲染成功为准，而不是以 AI 的文字确认作为验收。

实时预览有什么作用

文本编辑器中的代码变化会驱动渲染区域更新。实时预览让用户立即看到方向、换行、子图和样式效果，也能更快定位语法错误。

大型图表可以启用 Pan & Zoom，在画布中平移和缩放；AI Chat 还提供全屏查看入口，适合检查聊天栏中无法容纳的复杂图。

历史记录如何保护修改

Mermaid Chart 编辑器提供本地时间线，自动保存编辑并允许回到较早版本。历史记录适合应对 AI 大范围重写、手工误删和布局调整失败。

关键版本仍应主动保存并导出源码。自动历史可能有数量或存储范围限制，不能替代团队版本控制和正式备份。

如何导出 PNG

AI Chat 的生成图上提供 Export，可直接导出 PNG。PNG 适合聊天、邮件、演示文稿和不支持 SVG 的系统。

导出前应：

• 使用全屏或缩放检查完整边界。
• 确认长标签没有裁切。
• 选择适合目标页面的浅色或深色主题。
• 检查透明背景在接收应用中的显示。
• 放大查看字体和连线是否清晰。

如何导出 SVG

SVG 是矢量格式，适合网页、设计软件和需要高分辨率的文档。它在任意缩放下通常比 PNG 清晰，也便于后续嵌入。

分享 SVG 文件前应确认字体、主题样式和外部资源已正确包含。某些内容管理系统会清理 SVG，因此需要在目标平台实际上传测试。

如何导出 Mermaid 源码

编辑器支持将代码导出为 MMD 文件。源码是最可维护的交付格式，因为它能进入 Git、Markdown 或其他 Mermaid 工具，并可在未来用新主题重新渲染。

团队最好同时保存 MMD 与一份用于阅读的 SVG。PNG 可以作为兼容性补充，但不应成为唯一主文件。

怎样分享图表链接

编辑器的 Share 功能可以设置图表访问权限，并分享编辑器链接或 SVG 链接。当前产品也提供无需接收者登录的链接分享能力，但创建者仍应根据内容敏感度选择访问范围。

• 编辑器链接：适合允许查看上下文或协作编辑。
• SVG 链接：适合嵌入或只读展示。
• 公开链接：只用于可公开内容。
• 受限访问：用于内部架构和项目资料。

链接比静态附件更容易保持最新，但也需要管理撤销、权限继承和内容变化。

实时协作适合什么场景

Visual Editor 支持同步编辑与异步反馈。团队可以在架构评审、流程梳理和需求讨论中共同修改同一张图，减少多个附件版本来回传递。

协作时应约定谁负责最终结构、谁能改访问权限，以及评审意见何时算解决。共享画布不等于变更治理。

如何从文档或代码生成图

当前 Mermaid AI 产品能力还包括上传文档、粘贴会议记录或提供代码与数据，让模型生成第一版结构图。输入资料越长，越需要明确范围：

只分析上传文档中的“退款处理”章节。
生成一个流程图，保留明确写出的步骤和异常。
不推断文档没有说明的审批规则。
把无法确定的地方列在图外。

生成后要逐项回查来源。AI 能压缩信息，但不能证明资料内部一致。

怎样让图表成为活文档

1. 把 MMD 源码纳入项目仓库。
2. 在需求或代码变化时继续提示修改。
3. 审查源码差异，而不只看最终图片。
4. 用固定 Mermaid 版本在 CI 中渲染。
5. 将共享链接或 SVG 嵌入 Wiki。
6. 定期验证链接权限与内容是否最新。

“活文档”的关键不是在线链接，而是图表与真实系统变化之间有明确维护责任。

如何验证 AI 生成的流程图

1. 确认图表类型和方向符合用途。
2. 逐项核对输入中的步骤。
3. 检查每个判断节点的所有出口。
4. 检查异常、回滚和终止路径。
5. 确认 AI 没有添加未经证实的规则。
6. 查看 Mermaid 源码是否可解析、可维护。
7. 让业务负责人完成最终审核。

渲染成功只证明语法基本成立，不证明流程正确。

隐私与权限要注意什么

上传内部文档、代码或会议记录前，应确认组织策略、产品方案和数据处理条款。当前产品页面说明付费用户的 AI 提示不会用于训练，但具体适用范围仍应以账户方案与最新条款为准。

• 删除密钥、令牌、真实客户信息和内部地址。
• 按最小权限设置分享范围。
• 公开链接发布前由第二人复核。
• 项目结束后撤销不再需要的链接。
• 导出的文件也按内部资料管理。

常见问题如何排查

生成结果遗漏分支

把流程改写为编号步骤，逐条列出成功与失败路径，再用局部提示补充，避免要求 AI 整体“优化”。

后续提示改坏无关部分

明确保留项，比较修改前后代码，并从时间线恢复后重新提交更小的变更。

导出的 PNG 字体太小

减少单图节点数量、改用更合适方向，或优先导出 SVG。复杂图应拆成概览和细节图。

分享链接打不开

检查访问权限、组织策略和链接是否被撤销。用未登录窗口验证接收者真实体验。

代码编辑与画布不一致

等待解析完成，检查语法错误并刷新有效版本。不要在尚未同步时继续大范围修改。

外部平台不显示 SVG

检查平台的 SVG 安全策略和嵌入方式，必要时导出 PNG 或使用允许的共享链接。

发布前的验收清单

1. 生成提示明确目的、范围和分支。
2. 图表结构与来源资料逐项一致。
3. AI 修改没有破坏无关节点和连接。
4. 文本编辑器和 Visual Editor 状态一致。
5. Mermaid 源码可以重新解析。
6. PNG 没有模糊、裁切或背景问题。
7. SVG 在目标平台正确显示。
8. MMD 源码已保存并可版本控制。
9. 分享权限符合内容敏感度。
10. 业务或技术负责人已审核。

总结

Mermaid AI 将自然语言生成、连续对话修改、Mermaid 代码编辑、可视化调整、历史恢复和分享导出放在同一工作流中。最有效的使用方式是先用明确提示生成结构初稿，再逐次修改布局与样式，通过代码或 Visual Editor 精修，并同时保存 MMD 与 SVG。分享前要核对权限，导出前要检查边界和字体，涉及内部资料时还要确认数据策略。AI 可以显著缩短从想法到图表的时间，但流程真实性、访问控制和长期维护仍需要用户负责。