Mermaid Diagram Editor

Nodes

Sketch nodes and links here. Mermaid lays out the real diagram.

Templates

Selected

Select a node or edge

Actions

Export

Tips

36 templates (structure / planning / charts / railroad) — Mermaid 12
Flowcharts: sketch map + Mermaid result (what export draws)
Other types: single preview + Source (no split)
Click text on non-flowchart previews to edit
Mermaid ignores sketch positions
Use Flow (N↔S / E↔W) to steer flowchart layout
Toggle Result to hide the preview; drag the divider to resize
Export matches the Mermaid result
Click an arrow, then drag an endpoint onto another node or port
Drag arrow endpoints to reconnect · Reverse / Delete in the sidebar
Del deletes the selected node or arrow

Mermaid does not keep your sketch positions. Use the sketch map to build the graph easily; the Mermaid result is what export actually draws. Steer it with Flow (north–south or east–west).

Sketch

Result

Mermaid result will appear here