场景解决方案2026年8月19日

AI 画的流程图不对,怎么对着预览改?

模型写出的 Mermaid 经常能解析,但箭头绕错、节点挤成一团。本文讲清为什么流程图必须对着渲染改,怎样让正在用的 AI 只改某一段源码,以及什么图不该交给自动布局。

AI 写得出 Mermaid,不等于图画对了——语法合法只保证能渲染,箭头和层次要对着预览改。不要让模型在对话里「再画一张」独自做完;让它只替换出错的那一段,你看图说话。

文章核心论点配图

为什么 AI 画的流程图经常「能运行但不对」?

因为大模型先保证源码能解析,并不保证自动布局之后人能读。Mermaid、PlantUML 这类方案由算法决定节点坐标:交叉多少、层与层是否对齐,要等渲染才知道。对话里贴出的代码块看起来整齐,只是等宽字体的错觉。

业务描述还有缺口。人说「从选题到发布」,模型常补上你没提的审核节点,或把并行的「设计 / 开发」画成一条直线。这类错误改一句提示重出整张,已经摆对的左半边也可能被重排。原理上的三段流水线(解析—布局—渲染)见 diagram-as-code 在做什么;本文只解决「图已经不对,怎么改」。

中文环境还有一类高频语法坑:节点或边上有中文、中文冒号时,解析器可能报 unrecognized text,需要给标签加上英文双引号。模型偶尔会忘。页上一旦出现渲染错误,先修语法,再谈结构。

怎么对着预览只改错的那一段?

打开带实时预览的 Mermaid 页,让正在用的 AI 读写这一页上的 diagram.mmd,你指出节点名或步骤序号,而不是说「重画」。打开 Mermaid 图表,打开「连接你的 AI」,标签保持开着。

一次来回可以是这样——AI 加快改节点,你对着渲染图判断业务流程对不对:

你:
把「从选题到发布」画成流程。第三步改成人工核对,设计和开发不要串成一条。先写到当前页,不要在对话里出图。

助手:
已经写入 diagram.mmd。预览里是选题 → 大纲 → 人工核对 → 成稿 → 发布。请看箭头和层次——哪一步不对,指出节点名,我只改那一段。

不要靠想象猜图画对不对——左边是对话,箭头连到右边正在打开的 Mermaid 页,流程图已经画出「人工核对」那一步:

左边和 AI 对话,右边 MeTool 流程图页立刻出现渲染结果

看见某根箭头绕错,说「只改这一根」,不要说「重新画一张」。人机双写在这里,就是图还活在预览里、人还能插手。接入见 连接你的 AI,概念见 人机双写

语法非法时,页上会显示渲染错误——把错误原文发回对话,明确「只修语法,不要改业务流程」。还可以说:

  • 「子图标题改成『发布』,里面只留审核和上线。」

导出前让助手列出 SVG / PNG / JPG,你选一种再触发浏览器下载。矢量稿、要进幻灯片时优先 SVG;必须贴进不支持 SVG 的编辑器再用 PNG。不要默认三种都下。

什么图交给 Mermaid,什么图不要?

关系清楚、允许算法摆位置的图,才交给 Mermaid;要精确控位的图,用手动画布。

图的类型 更合适 原因
流程图、时序图、ER、类图、甘特、饼图 Mermaid + 预览迭代 节点和边能说清
节点很多、交叉已经读不动 拆成两张,或改用手动画布 自动布局救不了过高密度
海报、信息图、必须像素对齐的架构美化稿 手动画图工具 坐标必须由人定
只要给同事看一眼流程 Mermaid 导出 PNG 即可 不必上设计稿
版本库里要 diff 的架构说明 保留 .mmd 源码 文本可审阅

引擎或布局库升级后,同一份源码的节点位置可能变。这是自动布局的特性,不是这一页坏了。对外发布的图,定稿后导出位图或 SVG 存档,不要默认「源码永远像素级可复现」。

边界:一次只连一页;关掉标签,助手无法继续改图。极复杂的图可能让浏览器布局变慢,这时应拆图,而不是让模型再堆节点。AI 加速的是「改这一根箭头」,不是替你决定业务流程对不对。

小结

AI 画流程图,先分开两件事:源码能不能解析,和图能不能读。把 diagram.mmd 放在实时预览里,语法错误对着报错修,结构错误对着节点改。让模型在对话里独自「再画一张」,看起来省事,丢掉的是已经摆对的那一半。

常见问题

把 Mermaid 源码放到带实时预览的绘图页上,指出「哪一个节点、哪一根箭头」让助手只改那一段。语法错了页上会报渲染错误;结构错了则改节点或边,不要整份覆盖。导出前在 SVG、PNG、JPG 里选一种。