Flowchart2Mermaid 如何结合文本、拖拽和自然语言命令编辑流程图？

作者：袖梨 2026-09-13

Flowchart2Mermaid 把 Mermaid 源码作为流程图的统一表示，同时提供内联文本编辑、拖放图形元素和自然语言命令三种修改方式。最稳妥的工作流是先保存一份可渲染基线：错字和短标签用内联编辑，新增节点与连接用拖放，涉及流程语义的局部变化用自然语言命令，复杂或异常结果再回到 Mermaid 源码修正。每次只做一个可验证变更，并检查代码与图形是否同步。

三种编辑方式分别解决什么问题

  • 内联文本编辑：修改节点标签，适合错字、术语和简短说明。
  • 拖放编辑：插入处理、判断、输入输出和数据库节点，适合结构变化。
  • 自然语言命令：让 AI 按指令调整当前图，适合有明确目标的关系修改。

论文还允许直接编辑 Mermaid 代码。源码不是第四个可有可无的入口，而是三种操作共同同步的事实表示，也是故障恢复和版本控制的基础。

为什么先保存可渲染基线

图片转换得到第一版 Mermaid 后，应先确认它能渲染，再保存 .mmd 文件。此时不要求完全正确，但至少要做到节点和主要路径可见。

基线有三个作用：

  • 后续修改失败时可以回退。
  • 能够比较每次编辑到底改变了什么。
  • 避免 AI 在错误代码上继续扩大问题。

建议按阶段保存，例如 flow-v1-import.mmd、flow-v2-structure.mmd 和 flow-v3-reviewed.mmd，最终再整理为正式文件。

第一步：用内联编辑修正文字

用户可以点击渲染图中的节点标签直接修改，变化会同步到 Mermaid。适合：

  • 修正图片识别造成的错字。
  • 统一“客户”“用户”等术语。
  • 缩短过长节点名称。
  • 调整判断问题的表达。

不要用内联编辑改变结构含义。例如把“审核订单”改为“退款完成”虽然语法不变，却会让原连接失去业务意义。此类修改要同时检查上下游边。

怎样给节点命名

  • 处理节点使用动宾短语，例如“校验库存”。
  • 判断节点写成可回答的问题，例如“库存充足？”。
  • 状态节点使用统一状态名，例如“待支付”。
  • 避免多个节点使用完全相同的显示文字。

唯一且简短的名称也能降低自然语言命令引用节点时的歧义。

第二步：用拖放调整结构

前端提供常见流程图原语，可以拖入画布，再连接到已有节点。新增一个判断节点时，不能只完成拖放，还要补齐进入边、所有出口和出口标签。

  1. 选择处理、判断、输入输出或数据库节点。
  2. 拖到目标位置。
  3. 设置唯一名称。
  4. 连接上游节点。
  5. 为每个结果连接下游节点。
  6. 检查 Mermaid 代码同步结果。

视觉位置不是流程顺序的可靠依据，箭头才是。拖到两个节点之间不代表系统一定自动重接原边。

新增判断节点的示例

假设原流程是：

flowchart TD
    A[接收订单] --> B[创建支付单]
    B --> C[等待付款]

需要加入库存判断，结构应变成：

flowchart TD
    A[接收订单] --> D{库存充足}
    D -- 否 --> E[通知缺货]
    D -- 是 --> B[创建支付单]
    B --> C[等待付款]

关键不是多了一个菱形，而是原来的 A --> B 应被替换，且“否”分支有明确终点。

第三步：用自然语言做目标明确的修改

内置助手使用当前 Mermaid 代码和用户指令生成更新。有效命令应包含动作、目标节点、位置、连接和限制：

在“创建支付单”之前增加判断节点“库存充足？”。
“是”连接到“创建支付单”，“否”连接到新节点“通知缺货”。
不要修改其他节点和连接。

论文示例还包括“在流程 C 前增加判断节点”和“把开始连接到审核”。这些命令都具有明确作用范围。

不推荐的命令

优化这个流程。
让它更专业、更完整。

这类指令没有验收标准，模型可能重写节点、关系和样式。

自然语言修改的执行链路

浏览器把当前 Mermaid 代码和指令发送给后端，后端组合受控提示，并由集成 AI 助手生成新的代码。论文实现中的助手使用 GPT-4.1。返回结果经过验证后重新渲染。

因此自然语言修改不是离线字符串替换，会涉及网络和模型推理。当前代码和指令都应视为会离开浏览器，敏感流程需先脱敏。

每次修改后检查什么

  1. 目标节点是否已按要求变化。
  2. 未指定节点是否保持不变。
  3. 新增边的方向和标签是否正确。
  4. 是否出现重复节点或悬空节点。
  5. 循环是否有出口。
  6. Mermaid 源码是否仍可渲染。

先看代码差异，再看渲染图。图形可能因自动布局整体移动，但真正需要关注的是节点和关系变化。

三种编辑方式如何组合

推荐按以下顺序：

  1. 内联文字：先修正所有可见标签。
  2. 拖放结构：补齐明显遗漏的节点和边。
  3. 自然语言：完成有上下文的局部语义变换。
  4. 源码检查：处理精确连接和语法细节。
  5. 人工验收：逐边对照原图和业务规则。

顺序不是硬性规定，但先稳定名称后再让 AI 引用节点，通常更少歧义。

什么时候应直接编辑源码

  • 只需修正一条边。
  • AI 连续两次改变无关结构。
  • 需要精确控制节点标识。
  • 出现括号或特殊字符错误。
  • 需要审查自动操作生成的差异。

一个可维护流程图的源码应简洁、标识稳定、边标签明确：

flowchart LR
    start[提交申请] --> check{材料完整}
    check -- 否 --> revise[退回补充]
    revise --> start
    check -- 是 --> review[人工审核]
    review --> done[完成]

双向同步如何验证

论文称图形与文本保持双向同步。实际使用时可做简单验证：

  1. 在图中改一个唯一标签。
  2. 确认源码对应文字同步变化。
  3. 在源码新增一条测试边。
  4. 确认渲染图出现该连接。
  5. 撤销测试改动并再次确认一致。

如果两个视图不一致，应停止后续编辑，保存源码和截图，刷新或回退到最近稳定版本。

拖放位置与 Mermaid 自动布局的边界

Mermaid 主要描述拓扑结构并自动布局。拖动节点可以改善交互和表达，但并非所有像素位置都能永久编码进 Mermaid。重新渲染、切换方向或在其他版本打开时，位置可能变化。

把节点与边的语义作为事实来源，不要依靠“左边就是先执行”表达业务顺序。

如何避免编辑冲突

不要同时在多个标签页修改同一份图，也不要在 AI 请求尚未完成时继续拖放。可以采用以下节奏：

  1. 执行一个修改。
  2. 等待代码和图形同步完成。
  3. 检查差异。
  4. 保存稳定版本。
  5. 再执行下一项。

团队协作时为每次修改指定一名操作者，其他人通过评论提出建议，减少覆盖。

如何处理 AI 误改

  1. 不要在错误版本上继续输入更多命令。
  2. 恢复最近保存的 .mmd。
  3. 把原命令拆成更小范围。
  4. 使用唯一节点名和明确连接。
  5. 加入“不要改变其他内容”的限制。
  6. 仍失败时直接改源码。

AI 输出可渲染不等于结构正确。论文评测也显示语法有效性可能接近满分，而关系恢复仍明显更差。

如何检查边和分支

边是流程图转换和修改中最容易出错的部分。逐个判断节点建立检查表：

  • 进入边来自哪里。
  • 有几个出口。
  • 出口标签是否互斥。
  • 每个出口到哪里。
  • 是否最终结束或回到合法循环。

不要只比较节点文字，因为完整节点列表仍可能组成错误流程。

如何导出和移交

系统支持导出 .mmd 和 SVG，也能打开 Mermaid Live Editor。推荐交付：

  • .mmd：长期维护和版本控制。
  • SVG：文档、网页和演示中的矢量展示。
  • 脱敏原图：用于追溯识别来源。
  • 审核记录：说明哪些边和节点已人工确认。

打开外部编辑器后，应确认 Mermaid 版本和图表语法兼容。

如何纳入 Git 工作流

把 Mermaid 源码放在固定目录，并按修改目的提交：

docs/diagrams/checkout-flow.mmd
docs/images/checkout-flow.svg

提交说明可以写“补充库存失败分支”，而不是笼统写“更新流程图”。代码审查应关注节点和边的变化。

数据和隐私边界

图片转换会把图像发送到 Node.js 后端和外部视觉语言模型；自然语言编辑会发送当前代码与指令。内联和拖放虽然发生在浏览器交互层，也可能与服务器状态同步。

  • 移除密码、密钥和连接字符串。
  • 替换真实用户与客户信息。
  • 隐藏生产域名、IP 和安全边界。
  • 不要上传未公开漏洞流程。
  • 确认所选模型符合组织数据政策。

研究系统的适用边界

Flowchart2Mermaid 来自 2025 年 12 月的 arXiv 预印本，并提交至 EACL 2026 Demo Track。论文把智能补全、协作编辑和跨图一致性列为未来方向，因此不应假设这些能力已经完整实现。

作者也承认视觉语言模型可能幻觉、误读元素或无法完全匹配原图布局与语义。系统定位是辅助工具，需要用户审查。

常见问题如何排查

点击标签无法内联编辑

确认当前处于编辑状态而不是只读预览，并选择实际文本区域。必要时直接在 Mermaid 源码中修改。

拖入节点后没有连接

拖放可能只新增节点。手工建立进入边和出口，并检查源码中是否生成对应关系。

自然语言命令找错节点

先统一节点名，再使用唯一名称。必要时直接引用 Mermaid 节点标识。

修改后整个布局变化

Mermaid 会根据结构重新自动布局。检查关系是否正确，不要把位置变化直接判断为语义变化。

代码与图形不同步

停止编辑，保存当前代码和截图，刷新后从最近稳定版本恢复。不要继续叠加 AI 修改。

AI 删除了异常分支

回退版本，把命令缩小到一个节点或一条边，并明确不得改变其他分支。

导出后在其他平台无法渲染

检查目标平台的 Mermaid 版本和支持类型。简化不兼容语法，或使用 SVG 作为展示。

最终验收清单

  1. 已保存初始可渲染基线。
  2. 节点名称唯一且术语一致。
  3. 拖放新增节点有完整连接。
  4. 自然语言修改范围明确。
  5. 每次修改后都检查源码差异。
  6. 所有判断出口和循环已验收。
  7. 代码与图形保持同步。
  8. .mmd 和 SVG 已导出。
  9. 输入内容已脱敏。
  10. 流程负责人已确认业务语义。

总结

Flowchart2Mermaid 的三种编辑方式应按问题类型分工：内联编辑修文字，拖放修改结构，自然语言命令完成范围明确的语义变化，Mermaid 源码负责精确控制和恢复。双向同步让这些操作共享同一表示，但自动布局、AI 误改和并发操作仍可能造成偏差。保存基线、一次只改一项、逐边验收并导出 .mmd，才能把混合编辑真正变成可维护流程。

相关文章

精彩推荐