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.

Add a step, add a branch, change shape or color, delete: click a node

In a flowchart, a single click on a node opens a small set of actions (on a phone it sits at the bottom of the preview):

• Rename: the same in-place input as double-click.
• Change shape: rectangle, rounded, stadium, diamond, cylinder, circle, parallelogram. It swaps the pair of brackets in the code.
• Color: a row of stroke colors and a row of fills, Excalidraw's quick picks. Click one to make a step stand out (a risk in red, a finished step in green); it becomes one style line in the code, and “Reset colors” takes it out.
• Add a step after: the new node goes between this node and all of its outgoing links (A→B and A→C become A→new, new→B, new→C), and it opens for renaming right away; type the name and press Enter.
• Add a branch: a new link from this node to a new node; on a diamond decision node the branch is labelled “No” by default, and a click on that link changes it.
• Delete: removes the node and joins the links around it (A→B→C with B deleted becomes A→C); if it was a mistake, use the undo button at the preview's bottom-right or press Ctrl (⌘)+Z.

A click on a link (or on its text) offers edit link text and delete link. All of these are deterministic code rewrites: no AI, no network, and the preview re-renders within half a second. If a line is written in a way the menu cannot handle, it tells you to edit the code.

Mind maps have a menu too: rename, change shape (square, rounded, circle, bang, cloud, hexagon), color, add child, add sibling, and delete (with its whole branch, undoable). In state, class and ER diagrams a click on a node opens the color picker directly, so you can highlight a state or an entity. Details in the help article Edit in the preview.

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. To move a single node, drag it in the preview (flowcharts, state, class and ER diagrams); its position is kept in a comment on the last line of the code. To circle something, point at it or add a note, use “Annotate” in the preview's top-left corner; what you draw is kept on that same line. For the hand-drawn look, switch to a hand-drawn theme.

Everything else: edit the code

For what the click menu does not cover, 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. 20 free runs a month.

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 edit

Changing several places at once, reordering steps, or adding a whole series of steps from one sentence is where the click menu gets slow. While the code renders, the status line “Detected: flowchart” has an “AI edit” button. Click it, type one sentence such as “swap the approval and payment steps”, “add a logging step after every decision” or “add a Rejected branch to the decision”, and press “Edit”. The AI does only what that sentence says; every other node, label and direction stays as written, and no colours are added. The result is test-rendered in your browser first, then shown as a line-by-line diff for you to apply or discard; “Change it” lets you reword the instruction and try again. 2 free runs a day, shared with tidy and draw (AI fix is counted separately).

Try it on the diagram above: “add a logging step after every step”. For one step or one label, clicking or double-clicking the node is quicker.

Cleaning up the writing: AI tidy

Next to “AI edit” there is an “AI tidy” button. 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 2 free runs a day with AI edit and draw.

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