Editing Mermaid diagrams — flowchart, swimlane, mind map
Flowchart, swimlane, and mind map diagrams can be edited visually in the browser:
- Click Edit to open the visual editor.
- Drag nodes to reposition them. Connections are automatically preserved.
- Double-click a node to rename it inline.
- Use the toolbar to Add step, Add decision, Add circle, or Delete selected nodes.
- Click Save to apply changes as a new version, or Cancel to discard.
If your edits change the process structure, the AI may suggest an updated description to keep text and diagram in sync.
Rendering: flowchart, swimlane and mind map now use the same ReactFlow + ELK renderer for view and edit mode, so the canvas looks identical whether you are just viewing or actively editing. Sequence diagrams continue to use the classic Mermaid renderer — their visual grammar doesn’t map cleanly to a graph canvas.
For swimlanes, Storm2Flow saves lane identifiers in canonical Mermaid form behind the scenes while preserving readable lane labels, so edit, save, reload, and re-edit cycles keep lane containers intact.
Connecting and re-routing edges (draw.io-style)
Every flowchart shape — rectangles, rounded rectangles, stadiums, circles, hexagons, decision diamonds — shows a + glyph on each of its four handles in edit mode. The + is the always-create affordance: drag from a + to start a new edge between two nodes. The handle area is now scoped tightly to the glyph itself, so clicking near a node corner (or on a diamond’s slanted edge) selects the node rather than accidentally starting a phantom edge.
Existing edges show small edge-update anchors at their endpoints when the edge is selected. Drag an anchor to re-route an existing edge to a different source or target — distinct from the + glyph, which always creates a new edge. Edge labels also no longer block clicks on the handle or the edge underneath them, so labelled edges are as easy to select and re-route as unlabelled ones.
Edge routing
Edges pick their routing style from the shape of the source node. A non-diamond parent (rectangle, rounded, stadium, circle, hexagon, etc.) uses junction routing: a plain bezier fan where every outgoing edge leaves from the same layout-default handle on the parent — arrows read left-to-right in LR layouts and top-to-bottom in TB layouts. A diamond parent uses decision routing: a custom staggered smoothstep edge that picks a distinct turn coordinate per sibling so option labels never overlap, even with five or more branches. Back-edges (targets behind the source on the primary axis) fall back to geometric handle selection in both modes so the loop-back is visually obvious.
LR and TB layouts, with the back-edge case and a mixed graph for reference.Resizing and labels
Most div-based flowchart shapes can be resized in the visual editor. Decision diamonds auto-size from their label, keep text inside the visible dark diamond, and can be manually resized while preserving the square decision shape. Circles remain fixed-size. Subgraph / container nodes (swimlane lanes and grouped flowchart sections) are also manually resizable; touched groups keep their saved dimensions across regenerations, while untouched groups continue to receive fresh automatic sizing.