[{"data":1,"prerenderedAt":31},["ShallowReactive",2],{"i-lucide:grip":3,"i-lucide:chevron-right":8,"i-lucide:moon":10,"i-lucide:sun":12,"i-lucide:languages":14,"i-lucide:chevron-down":16,"i-lucide:shield-check":18,"i-lucide:mail":20,"blog-body-ai-mermaid-flowchart-iterate-zh":22,"i-lucide:lightbulb":23,"i-lucide:code":25,"i-lucide:file-text":27,"i-lucide:git-branch":29},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"12\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"12\" cy=\"19\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"19\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"19\" r=\"1\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m9 18l6-6l-6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"4\"\u002F>\u003Cpath d=\"M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m5 8l6 6m-7 0l6-6l2-3M2 5h12M7 2h1m14 20l-5-10l-5 10m2-4h6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":17},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m6 9l6 6l6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"\u002F>\u003Cpath d=\"m9 12l2 2l4-4\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":21},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7\"\u002F>\u003Crect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\u002F>\u003C\u002Fg>","\u003Cblockquote>\n\u003Cp>AI 写得出 Mermaid，不等于图画对了——\u003Cstrong>语法合法只保证能渲染，箭头和层次要对着预览改\u003C\u002Fstrong>。不要让模型在对话里「再画一张」独自做完；让它只替换出错的那一段，你看图说话。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fai-mermaid-flowchart-iterate\u002Fcover.webp\" alt=\"文章核心论点配图\">\u003C\u002Fp>\n\u003Ch2>为什么 AI 画的流程图经常「能运行但不对」？\u003C\u002Fh2>\n\u003Cp>因为大模型先保证\u003Cstrong>源码能解析\u003C\u002Fstrong>，并不保证\u003Cstrong>自动布局之后人能读\u003C\u002Fstrong>。Mermaid、PlantUML 这类方案由算法决定节点坐标：交叉多少、层与层是否对齐，要等渲染才知道。对话里贴出的代码块看起来整齐，只是等宽字体的错觉。\u003C\u002Fp>\n\u003Cp>业务描述还有缺口。人说「从选题到发布」，模型常补上你没提的审核节点，或把并行的「设计 \u002F 开发」画成一条直线。这类错误改一句提示重出整张，已经摆对的左半边也可能被重排。原理上的三段流水线（解析—布局—渲染）见 \u003Ca href=\"\u002Fzh\u002Fblog\u002Fp\u002Fdiagram-as-code\u002F\">diagram-as-code 在做什么\u003C\u002Fa>；本文只解决「图已经不对，怎么改」。\u003C\u002Fp>\n\u003Cp>中文环境还有一类高频语法坑：节点或边上有中文、中文冒号时，解析器可能报 \u003Ccode>unrecognized text\u003C\u002Fcode>，需要给标签加上英文双引号。模型偶尔会忘。页上一旦出现渲染错误，先修语法，再谈结构。\u003C\u002Fp>\n\u003Ch2>怎么对着预览只改错的那一段？\u003C\u002Fh2>\n\u003Cp>打开带实时预览的 Mermaid 页，让正在用的 AI 读写这一页上的 \u003Ccode>diagram.mmd\u003C\u002Fcode>，你指出节点名或步骤序号，而不是说「重画」。打开 \u003Ca href=\"\u002Fzh\u002Fmarkdown\u002Fmermaid\u002F\">Mermaid 图表\u003C\u002Fa>，打开「连接你的 AI」，标签保持开着。\u003C\u002Fp>\n\u003Cp>一次来回可以是这样——AI 加快改节点，你对着渲染图判断业务流程对不对：\u003C\u002Fp>\n\u003Cp>\u003Cstrong>你：\u003C\u002Fstrong>\u003Cbr>\n把「从选题到发布」画成流程。第三步改成人工核对，设计和开发不要串成一条。先写到当前页，不要在对话里出图。\u003C\u002Fp>\n\u003Cp>\u003Cstrong>助手：\u003C\u002Fstrong>\u003Cbr>\n已经写入 \u003Ccode>diagram.mmd\u003C\u002Fcode>。预览里是选题 → 大纲 → 人工核对 → 成稿 → 发布。请看箭头和层次——哪一步不对，指出节点名，我只改那一段。\u003C\u002Fp>\n\u003Cp>不要靠想象猜图画对不对——左边是对话，箭头连到右边正在打开的 Mermaid 页，流程图已经画出「人工核对」那一步：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fai-mermaid-flowchart-iterate\u002F02-ai-flow.webp\" alt=\"左边和 AI 对话，右边 MeTool 流程图页立刻出现渲染结果\">\u003C\u002Fp>\n\u003Cp>看见某根箭头绕错，说「只改这一根」，不要说「重新画一张」。人机双写在这里，就是图还活在预览里、人还能插手。接入见 \u003Ca href=\"\u002Fzh\u002Fblog\u002Fp\u002Fconnect-ai-to-online-tools\u002F\">连接你的 AI\u003C\u002Fa>，概念见 \u003Ca href=\"\u002Fzh\u002Fblog\u002Fp\u002Fhuman-ai-cowriting\u002F\">人机双写\u003C\u002Fa>。\u003C\u002Fp>\n\u003Cp>语法非法时，页上会显示渲染错误——把错误原文发回对话，明确「只修语法，不要改业务流程」。还可以说：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>「子图标题改成『发布』，里面只留审核和上线。」\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>导出前让助手列出 SVG \u002F PNG \u002F JPG，你选一种再触发浏览器下载。矢量稿、要进幻灯片时优先 SVG；必须贴进不支持 SVG 的编辑器再用 PNG。不要默认三种都下。\u003C\u002Fp>\n\u003Ch2>什么图交给 Mermaid，什么图不要？\u003C\u002Fh2>\n\u003Cp>关系清楚、允许算法摆位置的图，才交给 Mermaid；要精确控位的图，用手动画布。\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>图的类型\u003C\u002Fth>\n\u003Cth>更合适\u003C\u002Fth>\n\u003Cth>原因\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>流程图、时序图、ER、类图、甘特、饼图\u003C\u002Ftd>\n\u003Ctd>Mermaid + 预览迭代\u003C\u002Ftd>\n\u003Ctd>节点和边能说清\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>节点很多、交叉已经读不动\u003C\u002Ftd>\n\u003Ctd>拆成两张，或改用手动画布\u003C\u002Ftd>\n\u003Ctd>自动布局救不了过高密度\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>海报、信息图、必须像素对齐的架构美化稿\u003C\u002Ftd>\n\u003Ctd>手动画图工具\u003C\u002Ftd>\n\u003Ctd>坐标必须由人定\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>只要给同事看一眼流程\u003C\u002Ftd>\n\u003Ctd>Mermaid 导出 PNG 即可\u003C\u002Ftd>\n\u003Ctd>不必上设计稿\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>版本库里要 diff 的架构说明\u003C\u002Ftd>\n\u003Ctd>保留 \u003Ccode>.mmd\u003C\u002Fcode> 源码\u003C\u002Ftd>\n\u003Ctd>文本可审阅\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>引擎或布局库升级后，\u003Cstrong>同一份源码的节点位置可能变\u003C\u002Fstrong>。这是自动布局的特性，不是这一页坏了。对外发布的图，定稿后导出位图或 SVG 存档，不要默认「源码永远像素级可复现」。\u003C\u002Fp>\n\u003Cp>边界：一次只连一页；关掉标签，助手无法继续改图。极复杂的图可能让浏览器布局变慢，这时应拆图，而不是让模型再堆节点。AI 加速的是「改这一根箭头」，不是替你决定业务流程对不对。\u003C\u002Fp>\n\u003Ch2>小结\u003C\u002Fh2>\n\u003Cp>AI 画流程图，先分开两件事：源码能不能解析，和图能不能读。把 \u003Ccode>diagram.mmd\u003C\u002Fcode> 放在实时预览里，语法错误对着报错修，结构错误对着节点改。让模型在对话里独自「再画一张」，看起来省事，丢掉的是已经摆对的那一半。\u003C\u002Fp>\n",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":24},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 14c.2-1 .7-1.7 1.5-2.5c1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5c.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":26},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m16 18l6-6l-6-6M8 6l-6 6l6 6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":28},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\"\u002F>\u003Cpath d=\"M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":30},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M15 6a9 9 0 0 0-9 9V3\"\u002F>\u003Ccircle cx=\"18\" cy=\"6\" r=\"3\"\u002F>\u003Ccircle cx=\"6\" cy=\"18\" r=\"3\"\u002F>\u003C\u002Fg>",1788171097099]