ChatFlowchart 如何把流程图图片或 PDF 转换为可编辑的 Mermaid 代码？

ChatFlowchart 可以上传流程图截图、扫描件、白板照片或 PDF 页面，识别其中可见的标签、形状、箭头和布局，再重建为可编辑图表并导出 Mermaid 代码。转换不是无损还原，生成后必须逐项核对节点文字、箭头方向、判断分支和跨页关系。

图片转 Mermaid 的实际过程

根据当前产品页面，图片或 PDF 转换大致包含以下步骤：

1. 上传流程图图片或 PDF 页面。
2. 可选填写备注，说明图表类型或特殊规则。
3. AI 识别可见的形状、文字、箭头与空间关系。
4. 在画布中打开重建结果。
5. 通过画布或对话修改节点和连接。
6. 导出 Mermaid 代码或其他目标格式。

工具恢复的是图片中可观察到的结构，不会自动获得制作原图的软件对象、隐藏图层、备注、链接或业务定义。

支持哪些输入

当前页面列出的图片格式包括 PNG、JPG、WEBP 和 GIF，也支持截图、扫描件、白板照片、旧流程图图片以及 PDF 页面。

输入虽然都能归为图片，但质量差异很大：

• 原生导出的高清 PNG 通常最容易识别。
• JPEG 压缩可能让细线和小字产生噪点。
• 白板照片可能存在透视、反光和手写文字问题。
• 扫描 PDF 需要依赖图像识别，而文本 PDF 可能包含更清晰的字符。
• 多页 PDF 还需要明确具体页面和跨页关系。

上传前如何处理图片

1. 裁掉与流程无关的浏览器边框、工具栏和页眉页脚。
2. 校正旋转和透视，让节点边缘尽量水平或垂直。
3. 提高文字与背景对比，避免过曝和阴影。
4. 保留完整箭头，不要从连接线中间裁切。
5. 确认最小文字在原始尺寸下清晰可读。
6. 对包含敏感信息的图先做真正的脱敏副本。

只在图片上覆盖一个半透明色块不一定完成脱敏，原文件仍可能保留文字或元数据。应生成不含敏感内容的新文件并再次检查。

PDF 应该如何准备

一页包含一张完整图时，转换最稳定。若 PDF 有多页或一张流程跨页，应先决定处理策略：

• 每页独立成图：分别转换，再统一节点命名。
• 跨页连续流程：在备注中说明上一页出口与下一页入口。
• 一页多张图：先裁成独立区域，避免 AI 混合关系。
• 图表与正文混排：只保留必要图形，减少无关文字干扰。

不要假设工具能自动理解页面顺序就是流程顺序。PDF 的阅读顺序与箭头语义可能不同。

备注中应该写什么

备注应补充图片本身难以判断的信息，而不是重复所有文字：

This is a top-down approval flowchart.
Diamonds are decisions.
Dashed arrows represent rejection paths.
Keep node labels in Simplified Chinese.
Do not infer any hidden steps.

如果扫描图中有模糊节点，可以在备注中说明准确文字和它与相邻节点的关系。

识别后先检查节点文字

OCR 容易混淆形近字符、数字与字母，例如 0 与 O、1 与 l，中文小字号也可能缺字。建议建立对照表：

检查项	常见错误	处理方式
节点标题	漏字、错字、断行	逐个与原图对照
判断标签	“是/否”互换	结合箭头方向确认
编号	数字与字母混淆	使用业务上下文校正
系统名	英文缩写识别错误	对照正式术语表

如何检查箭头与分支

视觉识别最危险的错误不是错别字，而是连接关系错误。细线、交叉线、反向箭头和虚线都可能被漏掉。

1. 从开始节点沿主路径走到终点。
2. 对每个判断分别走完所有出口。
3. 检查交叉线是否真的相连。
4. 检查回路箭头是否指向正确节点。
5. 确认虚线和实线是否承载不同语义。
6. 检查是否存在孤立节点。

如果原图的两条线只是视觉交叉，没有连接点，重建结果却合并为一个关系，就会改变业务流程。

重建后的 Mermaid 代码是什么样

flowchart TD
    A([提交申请]) --> B{资料完整？}
    B -- 否 --> C[补充资料]
    C --> A
    B -- 是 --> D[进入审核]
    D --> E{审核通过？}
    E -- 否 --> F([拒绝])
    E -- 是 --> G([批准])

节点 ID、标签和排列可能与原文件不同。转换目标应是恢复可维护的逻辑，而不是追求每个像素完全相同。

如何直接修正 Mermaid 代码

局部文字或单条连接错误时，直接编辑代码比重新识别整张图更可靠：

• 保留稳定节点 ID，只修改显示标签。
• 用明确的边标签恢复“是”“否”或状态。
• 删除重复节点前先检查所有引用。
• 修改一处后立即预览。
• 保存原始识别版作为对照。

如何通过聊天修改图表

ChatFlowchart 支持通过对话重命名节点、增加或删除步骤、重新连接关系和调整布局。指令应包含修改对象与不变项：

把“Auth”重命名为“Authentication Service”。
保留节点 ID 和所有现有连接不变。

在 Step 2 后增加一个判断节点“Token valid?”。
Yes 进入原来的 Step 3，No 连接到“Return 401”。

对话修改后仍要比较代码。AI 可能为了完成重排而改变其他节点或边。

如何处理图片中的泳道

泳道表示角色、团队或系统边界。Mermaid 流程图通常可用子图近似表达：

flowchart LR
    subgraph User[用户]
        A[提交申请]
        D[补充资料]
    end

    subgraph Service[业务系统]
        B{资料完整？}
        C[创建审核任务]
    end

    A --> B
    B -- 否 --> D
    D --> A
    B -- 是 --> C

这能恢复责任分组，但不保证与原绘图工具的泳道样式完全一致。

复杂图片应该拆分还是一次转换

节点多、文字小、线条密集时，拆分通常更可靠：

1. 保留一份完整原图作为总览。
2. 按子流程裁成有少量重叠的区域。
3. 分别转换并校对。
4. 统一跨区域节点 ID 与名称。
5. 在 Mermaid 编辑器中合并源码。
6. 检查跨区箭头没有重复或丢失。

拆分不能沿着箭头或节点中间裁切，否则上下文会丢失。

为什么无法保证一比一还原

图片只有最终像素，没有原始图形对象的语义。AI 需要推断一个菱形是否为判断、交叉线是否连接、颜色是否有业务含义，以及文本属于哪个节点。

Mermaid 还使用自动布局，重建后的节点位置和边线路由可能不同。只要逻辑、标签和分组正确，布局变化并不一定是错误。

支持哪些导出结果

当前产品页列出的输出包括 PNG、SVG、PDF、Draw.io 兼容文件、Mermaid 代码、Excalidraw 和共享链接。本文目标是可编辑 Mermaid，因此应优先导出 Mermaid 代码，再按需要生成展示文件。

不同转换入口或账号方案的按钮可能不同，应以当前结果页显示为准。

如何验收最终 Mermaid 文件

1. 代码可以在独立 Mermaid 渲染器中打开。
2. 节点总数与原图一致，或差异有明确原因。
3. 所有可见标签都已对照原图。
4. 每条关键边的方向正确。
5. 判断出口和循环完整。
6. 子图表达正确角色或系统边界。
7. 重新渲染后没有裁切和文字溢出。
8. 源图和转换版按版本对应保存。

上传敏感流程图前要注意什么

架构图和业务流程图可能包含内网地址、系统名称、客户信息、账号标识或安全控制。即使产品页面提供隐私或自托管说明，也应先核对实际部署、账号方案、数据保留政策和组织规则。

上传前生成脱敏副本，只保留转换所需内容。高敏感图表不应在未确认数据处理边界的在线工具中处理。

常见问题

PDF 中有多页流程图怎么办？

优先逐页转换，在备注中说明页面之间的入口和出口，再统一节点名称并合并源码。

白板照片文字识别错误很多怎么办？

先校正透视、提高对比、裁掉背景，并在备注中提供模糊节点的准确文字。必要时只恢复结构，再手工填写标签。

重建结果布局不同是否代表失败？

不一定。Mermaid 会自动布局，重点应检查节点、关系、分支和分组是否正确。

可以从图片恢复原始 Draw.io 文件吗？

工具可以重建并导出兼容格式，但这不是恢复原文件内部对象、隐藏图层和元数据。结果仍需校对。

为什么转换后的图能显示但逻辑不对？

语法可渲染只证明代码形式有效。箭头方向、分支标签和交叉线含义仍可能识别错误，必须进行业务走查。

总结

ChatFlowchart 可以把图片或 PDF 页面中的可见流程结构重建为可编辑 Mermaid 代码，但输入质量和人工校对决定最终可靠性。上传前裁切、校正并脱敏，转换后逐项核对文字、箭头、分支、回路和泳道；整体错误时重新识别，局部错误时编辑代码或用对话修正。最终应保留原图、校对后的 Mermaid 源码和经过验收的导出文件。