Edit text and layout in the preview

Double-click to edit text

Double-click a node in the preview (double-tap on a phone). An input appears over the node; press Enter to apply or Esc to cancel. The change goes straight into the code on the left: for flowcharts it edits the text inside a definition such as A[text], and a node that never had a label (the B in A --> B) gets B[new text] added where it first appears; for mind maps the line is located by its text. The code stays the single source of truth, so export, share links and cloud save all see the edited code.

Supported today: flowcharts (flowchart / graph) and mind maps (mindmap). Other diagram types show no input on double-click; edit the code directly. If the preview text does not match a definition in the code (Markdown in labels, or a node defined in several places), you get “Couldn't find this node's definition”; again, edit the code.

Direction and spacing

On desktop the Layout button sits above the preview; on phones it is at the bottom of the Theme panel:

• Direction: top→down, left→right, bottom→up, right→left, which edits the direction on the first line, flowchart TD.
• Node spacing / rank spacing: two sliders written to the first line of the code as %%{init: {"flowchart": {"nodeSpacing": …, "rankSpacing": …}}}%%; Reset removes that line.

Both apply to flowcharts only; other diagram types show a note. Because this is native Mermaid syntax, pasting the code anywhere that renders Mermaid gives the same layout.

Why nodes can't be dragged into place

Mermaid syntax has no coordinates; positions come from the layout algorithm. Allowing drag would mean storing positions outside the code, where share links, cloud versions and code pasted elsewhere cannot carry them, and edges would have to be redrawn as straight segments. So we only offer the two knobs the layout algorithm already understands. For finer control, group nodes with subgraph or reorder the edges.