Mermaid AI Chat 如何导出 PNG、SVG 并编辑生成的图表？

Mermaid AI Chat 生成图表后，可以直接使用导出按钮保存 PNG 或 SVG，也可以通过编辑按钮把结果送入 Mermaid Chart 编辑器继续修改。可靠的交付顺序是先全屏检查结构并保存一个可回退版本，再编辑语法、布局或样式，最后根据使用场景选择位图或矢量格式并检查导出文件。

AI Chat 结果区有哪些操作

当前官方指南列出了 Mermaid AI Chat 图表结果区的主要控件：

• 清除当前对话，开始一段新的聊天。
• 新建 AI 图表，并在新标签页打开。
• 全屏查看当前图表。
• 将图表导出为 PNG 或 SVG。
• 在 Mermaid Chart 编辑器中编辑图表。
• 平移与缩放图表。
• 把结果另存为新的图表，并在新标签页打开。
• 展开或收起图表说明与代码。

这些操作分成查看、编辑和交付三类。平移缩放只改变查看位置，不等于修改图表内容；导出生成文件，也不会替代编辑器中的源图保存。

导出前先做一次完整检查

1. 使用全屏查看，确认图表没有因结果区太小而隐藏细节。
2. 平移到四周边界，检查是否存在被裁切的节点或连线。
3. 展开更多详情，核对图表说明和 Mermaid 代码。
4. 沿主路径和异常路径逐条检查箭头方向。
5. 确认节点文字、分支标签和图例在正常缩放下可读。
6. 在大幅修改前另存一个新图表，保留可回退版本。

聊天窗口中的缩略图看起来正常，不代表导出后一定完整。宽幅时序图、复杂实体关系图和包含长中文标签的流程图尤其需要全屏检查。

如何导出 PNG

在 AI Chat 的图表结果区点击导出按钮，选择 PNG，浏览器会生成或下载位图文件。具体菜单样式和保存位置取决于当前界面与浏览器设置。

PNG 适合以下场景：

• 插入不支持 SVG 的文档、工单或聊天工具。
• 需要一个固定像素尺寸的预览图。
• 接收方只需要查看，不需要继续编辑。
• 发布平台会过滤矢量文件。

PNG 的缺点是放大后可能变模糊，复杂图表在高分辨率屏幕或打印时更明显。导出前应把画布调整到合理比例，并在下载后以实际像素大小打开检查。

如何导出 SVG

在同一导出菜单中选择 SVG，即可保存可缩放矢量图。SVG 更适合网页、印刷、设计排版和需要无损放大的场景。

SVG 的优势包括：

• 放大时线条和文字仍然清晰。
• 通常比超大尺寸 PNG 更适合复杂图表。
• 可在支持 SVG 的设计或开发工具中继续处理。
• 适合响应式网页展示。

SVG 是可执行文档格式的一种，不应把不可信来源的 SVG 直接嵌入高权限页面。跨系统交付前还要确认目标平台是否允许 SVG，以及字体、样式和安全清洗是否会改变显示效果。

PNG 与 SVG 应如何选择

比较项	PNG	SVG
图像类型	位图	矢量图
缩放	放大可能模糊	通常可无损缩放
兼容性	广泛	部分平台会限制
后续处理	适合简单裁切与标注	适合矢量编辑和网页
安全处理	通常较简单	嵌入网页前需按不可信文档处理
典型用途	聊天、工单、固定尺寸文档	网页、印刷、设计源文件

如果无法预先确定接收方环境，可以同时保留 SVG 和一份经过检查的 PNG。源图表仍应单独保存，不要把任何一种导出文件当作唯一可编辑版本。

如何进入编辑器修改生成结果

在 AI Chat 结果区点击编辑按钮，图表会进入 Mermaid Chart 编辑器。进入后先确认当前内容与聊天结果一致，再选择修改方式：

• 使用文本编辑器精确修改 Mermaid 语法。
• 使用可视化编辑能力调整节点与外观。
• 继续使用 AI 指令完成结构性变更。

不同图表类型支持的可视化操作可能不同。无论使用哪种方式，最后都应回到代码和预览检查，而不是只依赖拖动后的视觉位置。

先另存还是直接编辑

当生成结果已经基本正确，且后续修改涉及大量节点、图表类型转换或主题重做时，建议先使用另存为新图表的操作。这样聊天生成版可以作为基线，编辑版用于迭代。

对于只改错别字或单条连线的小修改，可以直接进入编辑器，但仍应保留修改前的语法快照。版本名称可包含用途和日期，例如“登录时序图-评审版”，不要只使用“新图表副本”。

如何精确修改 Mermaid 语法

flowchart LR
    A[提交申请] --> B{资料完整？}
    B -- 否 --> C[补充资料]
    C --> A
    B -- 是 --> D[进入审核]
    D --> E{审核通过？}
    E -- 否 --> F[退回修改]
    F --> A
    E -- 是 --> G([完成])

例如需要增加人工复核，可以新增节点并明确插入位置：

    E -- 是 --> H[人工复核]
    H --> G([完成])

修改后检查原来的 E -- 是 --> G 是否已经移除，否则会出现绕过人工复核的另一条路径。

如何通过 AI 继续编辑

结构变化较大时，可以回到 AI 面板提出目标明确的修改：

在审核通过和完成之间增加人工复核。
人工复核拒绝时返回“退回修改”。
保留其他节点、连线和颜色不变。

每轮只处理一个目标。若同时要求增删节点、转换图表类型、重排布局和更换主题，结果难以比较，也更容易产生非预期变更。

图表无法渲染时怎么办

先检查最近一次修改涉及的箭头、括号、引号、关键字和节点 ID。如果问题不明显，可以使用 Mermaid AI 的修复功能查看建议差异，再决定应用或放弃。

修复后要验证两层结果：

1. 语法层：预览重新出现，没有解析错误。
2. 语义层：节点和连线仍符合真实流程。

自动修复可能通过删除无法解析的片段恢复渲染，因此不能把“能显示”作为唯一成功标准。

如何为导出优化布局

• 长流程优先使用与阅读方向一致的横向或纵向布局。
• 把相关节点放入子图，减少跨越整张图的连线。
• 缩短节点文字，把详细解释放在图外。
• 减少只用于装饰的颜色，保证黑白环境仍可区分。
• 避免大量连线在同一点交叉。
• 宽幅图用于幻灯片时，先按目标页面比例预览。

不要靠无限缩小图表来塞进页面。文字小到无法阅读时，应拆图或简化层级。

下载后如何验收 PNG

1. 确认文件可以用系统图像查看器打开。
2. 检查实际宽高和文件大小是否合理。
3. 按 100% 比例查看文字与箭头。
4. 检查四周边缘是否裁切。
5. 放入目标文档或平台，确认没有二次压缩到不可读。
6. 确认浅色文字在透明或白色背景上仍可见。

下载后如何验收 SVG

1. 分别用浏览器和目标编辑工具打开。
2. 放大检查线条、箭头和圆角是否保持清晰。
3. 确认字体替换后没有导致文字溢出。
4. 检查主题颜色和背景是否符合目标页面。
5. 嵌入网站前经过组织规定的 SVG 清洗与安全检查。
6. 不要把不可信 SVG 当作普通静态图片直接内联。

如何在团队中保留可编辑版本

正式交付建议保留三类文件：

• Mermaid 图表或语法源文件，作为权威可编辑版本。
• SVG，用于网页、印刷和设计排版。
• PNG，用于预览和兼容性较弱的平台。

源文件应与需求或代码版本关联。流程变化时更新源文件并重新导出，不要直接在旧 PNG 上涂改后当作最新图表。

敏感信息与共享边界

导出前检查节点是否包含内网地址、账号、访问令牌、客户名称、个人信息或未公开系统结构。AI Chat 中生成的图一旦下载并发送，就脱离了原平台的访问控制。

SVG 还可能保留更多文本和结构信息，即使视觉上被遮挡，也应检查文件内容。需要对外发布时，最好创建专门的脱敏版本，而不是直接复用内部架构图。

常见问题

平移和缩放会改变导出的图表吗？

它们主要用于查看当前图表，不应被当成源图修改。导出前仍要检查实际生成文件的边界和比例。

为什么 PNG 中的文字很模糊？

常见原因是图表过大却导出为较小位图，或目标平台进行了二次压缩。可简化布局、提高导出尺寸，或改用 SVG。

SVG 是否等于 Mermaid 源文件？

不等于。SVG 保存渲染后的矢量结构，Mermaid 语法更适合继续维护流程逻辑。两者都应按用途保留。

编辑后如何回到原始 AI 结果？

大改前先另存为新图表或保存语法快照。若没有版本基线，只能依赖平台历史能力或重新生成，结果未必完全一致。

导出按钮不可用怎么办？

先确认图表已经生成并能正常预览，再检查登录状态、账号权限、浏览器下载限制和剩余点数。界面变化时以当前产品提示为准。

总结

Mermaid AI Chat 的结果不是只能查看的图片。先用全屏、缩放和详情区核对结构，必要时另存一个基线版本，再通过编辑按钮进入 Mermaid Chart 修改语法、布局或样式。交付时按兼容性选择 PNG，按缩放和后期处理需求选择 SVG，同时保留 Mermaid 源图并对下载文件做边界、字体、清晰度和敏感信息检查。