[{"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-en":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 can write Mermaid without drawing the diagram right — \u003Cstrong>legal syntax only guarantees a render; arrows and layers have to be judged on the preview\u003C\u002Fstrong>. Do not let the model “draw another one” and finish alone in chat. Have it replace only the broken stretch; you talk from the picture.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fai-mermaid-flowchart-iterate\u002Fcover.webp\" alt=\"Core argument illustration\">\u003C\u002Fp>\n\u003Ch2>Why do AI flowcharts often “run” but still look wrong?\u003C\u002Fh2>\n\u003Cp>Because a large model first guarantees \u003Cstrong>source that parses\u003C\u002Fstrong>, not \u003Cstrong>a layout a human can read\u003C\u002Fstrong>. Mermaid and PlantUML let an algorithm pick coordinates. How many crossings, whether layers line up — you only know after render. A code block that looks tidy in chat is the illusion of a monospace font.\u003C\u002Fp>\n\u003Cp>Business descriptions have gaps too. You say “from topic to publish,” and the model invents a review node you never mentioned, or draws parallel “design \u002F engineering” as one line. Regenerating the whole chart from a new sentence can also reshuffle the left half you already placed. The three-stage pipeline (parse — layout — render) is in \u003Ca href=\"\u002Fblog\u002Fp\u002Fdiagram-as-code\u002F\">What diagram-as-code is doing\u003C\u002Fa>. This article only covers “the diagram is already wrong — how do I change it.”\u003C\u002Fp>\n\u003Cp>A frequent syntax trap: labels with spaces, colons, or non-ASCII often need English double quotes, and models forget. When the page shows a render error, fix syntax before structure.\u003C\u002Fp>\n\u003Ch2>How do I change only the broken stretch against the preview?\u003C\u002Fh2>\n\u003Cp>Open a Mermaid page with a live preview, let your current AI read and write \u003Ccode>diagram.mmd\u003C\u002Fcode> on that page, and point at a node name or step number — do not say “redraw.” Open \u003Ca href=\"\u002Fmarkdown\u002Fmermaid\u002F\">Mermaid diagrams\u003C\u002Fa>, turn on Connect your AI, keep the tab open.\u003C\u002Fp>\n\u003Cp>One round can look like this — AI speeds node edits; you judge whether the business flow is right on the render:\u003C\u002Fp>\n\u003Cp>\u003Cstrong>You:\u003C\u002Fstrong>\u003Cbr>\nDraw the flow from topic to publish. Step 3 should be human review. Do not chain design and engineering as one line. Write it to the current page; do not emit an image in chat.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Assistant:\u003C\u002Fstrong>\u003Cbr>\nWritten to \u003Ccode>diagram.mmd\u003C\u002Fcode>. The preview is Topic → Outline → Human review → Draft → Publish. Check arrows and layers — if a step is wrong, name the node and I will only change that stretch.\u003C\u002Fp>\n\u003Cp>Do not imagine whether the diagram is right — chat on the left, an arrow to the Mermaid page on the right, the flowchart already showing the human-review step:\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fai-mermaid-flowchart-iterate\u002F02-ai-flow.en.webp\" alt=\"Chat on the left, MeTool flowchart page on the right showing the rendered diagram\">\u003C\u002Fp>\n\u003Cp>If one arrow wraps the wrong way, say “only this arrow,” not “draw the whole thing again.” Cowriting here means the diagram is still alive in the preview and you can still intervene. Setup: \u003Ca href=\"\u002Fblog\u002Fp\u002Fconnect-ai-to-online-tools\u002F\">Connect your AI\u003C\u002Fa>. Concept: \u003Ca href=\"\u002Fblog\u002Fp\u002Fhuman-ai-cowriting\u002F\">What is human–AI cowriting?\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>When syntax is illegal, the page shows a render error — paste the error text back and say “fix syntax only; do not change the business flow.” You can also say:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>“Rename the subgraph to Publish and keep only review and go-live inside it.”\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Before export, have the assistant list SVG \u002F PNG \u002F JPG; you pick one, then trigger the browser download. Prefer SVG for vector work and slides; PNG when the editor cannot take SVG. Do not download all three by default.\u003C\u002Fp>\n\u003Ch2>Which diagrams belong in Mermaid, and which do not?\u003C\u002Fh2>\n\u003Cp>Diagrams whose relations are clear, and whose positions you will let an algorithm pick, belong in Mermaid. Diagrams that need exact placement belong on a manual canvas.\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Diagram type\u003C\u002Fth>\n\u003Cth>Better fit\u003C\u002Fth>\n\u003Cth>Why\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>Flow, sequence, ER, class, Gantt, pie\u003C\u002Ftd>\n\u003Ctd>Mermaid + preview iteration\u003C\u002Ftd>\n\u003Ctd>Nodes and edges can be named\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>So many nodes that crossings are unreadable\u003C\u002Ftd>\n\u003Ctd>Split into two diagrams, or switch to a manual canvas\u003C\u002Ftd>\n\u003Ctd>Auto-layout will not save density\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Posters, infographics, pixel-aligned architecture comps\u003C\u002Ftd>\n\u003Ctd>A drawing tool\u003C\u002Ftd>\n\u003Ctd>Coordinates have to be human-set\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>A quick process for a teammate\u003C\u002Ftd>\n\u003Ctd>Mermaid export as PNG\u003C\u002Ftd>\n\u003Ctd>No design file needed\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Architecture notes that must diff in git\u003C\u002Ftd>\n\u003Ctd>Keep the \u003Ccode>.mmd\u003C\u002Fcode> source\u003C\u002Ftd>\n\u003Ctd>Text is reviewable\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>After an engine or layout-library upgrade, \u003Cstrong>the same source can place nodes differently\u003C\u002Fstrong>. That is auto-layout, not this page breaking. For diagrams you publish, archive a bitmap or SVG when you freeze the design; do not assume source will always be pixel-reproducible.\u003C\u002Fp>\n\u003Cp>Boundaries: one page at a time; close the tab and the assistant cannot keep editing. Very dense diagrams can slow browser layout — split them rather than asking the model to pile on nodes. AI speeds “change this arrow.” It does not decide whether the business flow is right.\u003C\u002Fp>\n\u003Ch2>Wrap-up\u003C\u002Fh2>\n\u003Cp>AI flowcharts split into two questions: does the source parse, and can a person read the diagram. Keep \u003Ccode>diagram.mmd\u003C\u002Fcode> in a live preview. Fix syntax against the error; fix structure against the nodes. Letting the model “draw another one” alone in chat looks cheaper; what you lose is the half you already placed.\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>",1788171087435]