Edit, lay out and fix

Open this code in the editor and follow along:

flowchart LR
    A[Place order] --> B{In stock?}
    B -- Yes --> C[Reserve stock]
    B -- No --> D[Show out of stock]
    C --> E[Create order]
    E --> F[Payment]
    F --> G([Done])

Change text: double-click a node

Double-click a node in the preview and an input box appears on it. Enter applies, Esc cancels. The change is written back into the code on the left: the code stays the single source of truth, so export, share links and cloud save all see the edited code. Double-click editing works in flowcharts and mind maps; other diagram types are edited in the code.

Direction and spacing: “Layout”

The “Layout” button above the preview (on a phone: bottom of the “Theme” panel) applies to flowcharts:

• Direction: top→down, left→right, bottom→up, right→left. It rewrites the direction in the first line, flowchart TD. Left→right is the usual choice for a wide slide.
• Node spacing / rank spacing: two sliders written into a %%{init: …}%% line at the top of the code; “Reset” removes it.

Because these are native Mermaid syntax, the same code gives the same layout anywhere Mermaid is supported. Mermaid has no coordinates, so nodes cannot be dragged here; for that, use the free canvas.

Add steps, change shapes: edit the code

The edits people make most often:

• Insert a step: add a line between two nodes, C --> C2[Verify address] then C2 --> E, and remove the old C --> E.
• Text on an arrow: B -- Yes --> C, or B -->|Yes| C.
• Node shapes: [box], (rounded), ([stadium, for start and end]), {diamond, decision}, [(cylinder, database)], ((circle)).
• Parentheses or quotes in a label: wrap the whole label in double quotes, A["Sign in (phone)"], or you get “bracket not closed”.
• Line breaks: <br> inside the label.
• Groups: subgraph Name … end; that is how swimlanes are drawn, see Flowcharts from an AI reply.

Nothing to click afterwards: the preview re-renders within half a second.

When the code has an error

With a syntax problem, the preview keeps the last good diagram and the error bar under the editor explains what is wrong, with a line number:

• “Go to line N” jumps there; the line is marked in the editor too.
• “Common errors →” opens the Help Center entry for that error, with an example and the fix.
• “AI fix” sends the current code and the error message to the AI engine once. The result is test-rendered in your browser first, then shown as a line-by-line diff for you to apply or discard. Five free runs a day.

The errors that AI replies produce most often: -> used as a flowchart arrow (it should be -->), end used as a node name, a group missing its end. The error bar names which one it is.

Try it: change one --> in the code above to ->, watch the error bar, then click “AI fix”.

Rather not touch the code: AI tidy

While the code renders, the status line “Detected: flowchart” has an “AI tidy” button next to it. It does not change the meaning, add or remove steps, or write any colours; it only cleans up the writing: shapes by meaning (rounded start / end, diamond decisions), a direction that suits the shape, grouping steps that clearly belong together, wrapping long labels. You get the same diff before anything is applied. It shares the five free daily runs with AI fix.

Next

• Previous: Getting code that renders
• Next: Export to Word, PowerPoint and PDF
• Every error and its fix: Common errors and how to fix them