Flowchart2Mermaid 如何将流程图图片转换为可编辑的 Mermaid.js 代码？

作者：袖梨 2026-09-13

Flowchart2Mermaid 是一个研究型 Web 系统：用户上传流程图图片，后端把图片和所选模型发送给视觉语言模型，模型按照结构化提示生成 Mermaid.js 代码，前端立即渲染并保持代码与图形同步。用户随后可以直接改标签、拖放节点、编辑源码或用自然语言下达修改指令，最后导出 .mmd 或 SVG。它适合把静态图转换为可维护初稿，但论文明确要求人工检查完整性与正确性。

Flowchart2Mermaid 解决什么问题

传统流程图常以截图、扫描件或白板照片流转。图片便于阅读，却难以修改节点、插入分支、比较版本或放进代码仓库。普通 OCR 只能识别文字，无法可靠恢复形状、箭头方向和控制流。

Flowchart2Mermaid 使用视觉语言模型同时理解文字和图形关系，并把结果转换成文本化 Mermaid。这样可以继续编辑、重新渲染、导出和版本管理。

系统处理链路是什么

  1. 浏览器接收用户上传的流程图图片。
  2. 前端编码图片，并附带所选模型标识发送到 Node.js 后端。
  3. 后端用详细系统提示约束流程图元素、结构和 Mermaid 输出格式。
  4. 视觉语言模型生成第一版 Mermaid 程序。
  5. 后端清理 Markdown 包装并做轻量规范化和验证。
  6. 浏览器使用 Mermaid.js 实时渲染结果。
  7. 用户通过代码、图形或自然语言继续修改。
  8. 最终导出 .mmd 或 SVG，或转交 Mermaid Live Editor。

图片处理不是纯浏览器本地过程。论文架构明确说明图片会传到后端，再由外部视觉语言模型推理。敏感流程图必须先脱敏并确认模型使用权限。

怎样准备输入图片

  • 裁掉浏览器窗口、页眉和无关说明。
  • 保证节点文字清晰且对比充分。
  • 尽量正对拍摄白板，减少透视变形。
  • 让箭头端点和方向可辨。
  • 复杂大图按子流程拆分。
  • 遮盖真实姓名、账号、内网地址和凭据。

论文系统主要面向流程图，不应把 UML、网络拓扑或任意信息图都当作当前可靠输入。作者将扩展到更多图表类型列为未来工作。

如何完成第一次图片转换

  1. 打开 Flowchart2Mermaid Web 应用。
  2. 上传 PNG、JPG 等界面支持的流程图图片。
  3. 选择可用的视觉语言模型。
  4. 提交转换并等待 Mermaid 代码。
  5. 检查渲染后的节点、边与标签。
  6. 对照原图标记识别错误。
  7. 选择合适的编辑方式修正。
  8. 通过最终检查后再导出。

所选模型会影响节点和关系恢复质量，也会影响延迟、成本和数据处理边界。论文展示多模型后端，但在线演示当前可选项应以实际界面为准。

第一种编辑方式：直接修改标签

用户可以在渲染图中点击节点标签并进行内联编辑。适合修正 OCR 错字、统一术语和缩短文字。修改会同步到底层 Mermaid 代码。

内联编辑后应检查节点标识是否保持稳定，以及改名是否影响自然语言指令中的引用。例如图中有多个“审核”节点时，仅按显示名称下达指令可能产生歧义。

第二种编辑方式：拖放节点和连接

前端支持拖放常见流程图元素，包括处理、判断、输入输出和数据库节点，还能重新定位、删除和增加连接。图形操作会同步到底层 Mermaid 程序。

使用拖放时应注意：

  • 新增判断节点后补齐所有出口。
  • 删除节点前处理与它相连的边。
  • 避免只改变位置却误以为改变了流程顺序。
  • 检查视觉连接与 Mermaid 代码是否一致。
  • 保存修改前导出一个稳定版本。

第三种编辑方式：自然语言修改

内置 AI 助手可以根据指令修改当前 Mermaid 图，例如：

在“付款”之前增加一个“库存确认”判断节点。
把开始节点连接到审核节点，并将边标记为“提交”。
删除重复的通知节点，不改变其他分支。

后端会把当前代码和指令组合成受控提示，请模型返回更新结果，再验证并渲染。为了便于核对，每次指令最好只修改一个明确目标。

怎样减少自然语言修改的歧义

  • 引用唯一节点名称。
  • 明确新增节点的位置和类型。
  • 写出边的起点、终点与标签。
  • 说明哪些内容不能改变。
  • 复杂修改拆成多次执行。

“把流程优化一下”没有可验证边界，可能导致模型重写整张图。

如何直接编辑 Mermaid 源码

文本编辑仍是最可控的方式。识别后的代码可能类似：

flowchart TD
    A[接收申请] --> B{材料完整}
    B -- 否 --> C[退回补充]
    C --> A
    B -- 是 --> D[审核申请]
    D --> E{审核通过}
    E -- 是 --> F[完成]
    E -- 否 --> G[拒绝]

TD 表示从上到下。方括号是普通节点，花括号是判断。直接改代码时要保持节点标识唯一，检查括号、连接符和边标签。

双向同步意味着什么

论文的核心交互设计是文本与图形保持同步：代码修改会反映到渲染图，内联或拖放操作也会更新代码。这比把识别结果只导出为图片更适合版本控制。

但“双向同步”不等于任何视觉布局都能无损表达。Mermaid 主要依靠自动布局，精确像素位置和复杂自由画布样式可能无法完整保留。应以结构语义为主要目标。

如何查看大型流程图

前端提供可滚动视口、缩放按钮和自适应画布。检查大型图时先缩放到全局，确认整体分支，再放大检查标签和交叉边。若必须频繁平移才能理解，应把图拆成主流程与子流程。

如何导出与继续编辑

论文说明系统支持导出 .mmd 与 SVG，并能一键打开 Mermaid Live Editor。两种格式用途不同：

  • .mmd：文本真源，适合 Git、代码审查和后续修改。
  • SVG：矢量交付文件，适合网页、论文和演示文稿。

建议同时保存两者。源码用于维护，SVG 用于展示。转交外部编辑器后还应检查 Mermaid 版本兼容性。

如何把输出纳入版本控制

可以采用以下结构：

docs/
  diagrams/
    approval-flow.mmd
  images/
    approval-flow.svg
  source-images/
    approval-flow-redacted.png

只提交已经脱敏的原图。代码审查重点关注节点、边、方向和分支标签，而不是只看 SVG 是否漂亮。

论文评测是怎样进行的

作者从 FlowVQA 数据集中选取 200 张流程图，使用相同结构化指令评测五个视觉语言模型：GPT-4.1、GPT-4.1-mini、GPT-4o、GPT-4o-mini 和 Gemini-2.5-Flash。

评测分两类：

  • 符号指标：节点实体的精确率、召回率与 F1，边关系的精确率、召回率与 F1，以及代码语义余弦相似度。
  • 高层指标：结构准确、流程准确、语法有效、语义保真和完整性。

Mermaid 可以用不同标识和语法表达相同图，所以作者没有直接比较字符串。

评测结果说明了什么

在该 200 图子集上，GPT-4.1-mini 与 Gemini-2.5-Flash 的节点和边提取表现最强。两者实体 F1 均约为 0.986，关系 F1 分别约为 0.979 和 0.976。GPT-4o-mini 的关系 F1 约为 0.743，明显较低。

结果还揭示一个重要问题：GPT-4o-mini 的语法有效性接近满分，但结构准确、流程准确和完整性只有约 0.83 至 0.86。也就是说，代码能够渲染并不代表箭头和分支正确。

为什么边比节点更难识别

论文发现关系提取普遍比实体提取困难。模型较容易读出节点文字，却可能漏掉细线、误判箭头方向、混淆交叉连接或忽略不显眼分支。

人工验收应优先检查：

  1. 每条边的起点和终点。
  2. 判断节点的所有出口。
  3. 循环返回位置。
  4. 跨越多个节点的长连接。
  5. 颜色较淡或被遮挡的箭头。

评测结果有哪些限制

论文是 2025 年 12 月提交的 arXiv 预印本，并注明提交至 EACL 2026 Demo Track。评测只覆盖 FlowVQA 的一个 200 图子集，不能代表任意企业白板、低质量扫描件或所有语言。

高层结构指标由 GPT-4.1 作为评审模型给出，论文说明实现依赖模型的隐式推理，而不是完全显式的数值计算。还使用“可重构性覆盖”机制：若评审认为只需小改就能变成标准图，可给予满分。这些因素都要求谨慎解释“近乎无损”的结论。

系统当前有哪些局限

  • 视觉语言模型可能幻觉或误读图形元素。
  • 生成布局不一定与原图一致。
  • 语义和分支可能不完整。
  • 评测范围较小。
  • 更多 UML 类型仍属于未来扩展。
  • 智能补全、协作和跨图一致性检查仍在未来工作中。

因此它是辅助转换工具，而不是无需复核的图表数字化流水线。

图片和代码如何保护

系统采用浏览器、Node.js 后端和外部模型的客户端—服务器架构。上传图片会被编码并发送到后端；自然语言修改还会把当前代码与指令交给 AI 助手。具体在线演示的数据保留和模型策略应在使用前另行确认。

  • 遮盖密码、令牌和连接字符串。
  • 替换真实客户、员工和项目名称。
  • 删除生产域名、IP 与网络边界。
  • 只上传转换所需的图像区域。
  • 对受监管资料使用组织批准的模型和部署。

怎样完成可靠的人工验收

  1. 节点检查：文字、类型和数量与原图一致。
  2. 边检查：方向、标签和连接目标正确。
  3. 分支检查：所有判断结果都存在。
  4. 循环检查：返回点和退出条件正确。
  5. 语法检查：在系统和目标 Mermaid 渲染器中都能打开。
  6. 业务检查：流程负责人确认含义。
  7. 版本检查：保存 .mmd 和原图对应关系。

常见问题如何排查

节点文字正确但箭头连错

这是论文评测中最值得警惕的错误类型。直接编辑 Mermaid 边，或使用唯一节点名称下达自然语言连接指令。

上传后没有生成代码

检查图片类型、大小、网络和所选模型是否可用。重新裁切为清晰的单张流程图后再试。

生成代码无法渲染

检查图表声明、括号、箭头和特殊字符。缩减到最小可渲染版本，再逐段恢复。

拖放后代码结构异常

检查新增节点标识与连接，确认没有重复 ID 或悬空边。必要时恢复修改前的 .mmd。

自然语言修改改变了无关节点

回退到稳定版本，缩小指令范围，明确节点名称并写出“不要修改其他节点和连接”。

导出的 SVG 与原图布局不同

系统目标是恢复结构化语义，不是像素级复刻。若布局影响理解，可调整 Mermaid 方向或在外部编辑器中优化。

结果分数看起来很高，是否可以免审

不可以。评测基于特定数据子集且部分指标使用模型评审，论文也明确承认幻觉和误读风险。

最终验收清单

  1. 图片已裁切、校正并脱敏。
  2. 节点数量与文字已逐项核对。
  3. 每条箭头方向已对照原图。
  4. 判断、循环和异常分支完整。
  5. 自然语言修改只影响预期范围。
  6. Mermaid 在目标环境可以渲染。
  7. .mmd 和 SVG 已分别保存。
  8. 流程负责人完成业务审核。
  9. 没有把研究评测结果当作生产保证。

总结

Flowchart2Mermaid 通过视觉语言模型把流程图图片转换为 Mermaid.js，并提供内联文字、拖放图形、源码和自然语言四种互补修改方式。系统的双向同步让静态图变成可版本控制文本，但最难恢复的往往是箭头和分支关系。论文在 200 张图上的结果较强，却仍受数据规模、模型评审和真实图片差异限制。使用时应对图片脱敏，逐边核对结果，并同时保存 .mmd 与 SVG。

相关文章

精彩推荐