Mermaid Live Editor
with visual drag & drop
The only Mermaid live editor with a true freeform visual canvas. Drag nodes, draw connections, and watch the code write itself — or write code and watch the canvas come alive.
No sign-up. No install. Works in your browser.
graph TD
A[Start] --> B{Decision?}
B -->|Yes| C[Process]
B -->|No| D(Retry)
C --> E((Done))
D --> B
9
Node Shapes
4
Edge Types
4
Layout Directions
0
Sign-ups Required
The first Mermaid editor with
true freeform editing
Other editors make you choose: write code or use a visual tool. Mermaid Live Editor gives you both at once. Drag a node on the canvas and the Mermaid syntax updates instantly. Edit a line of code and the canvas redraws in real time. Two views, one diagram, zero friction.
Everything you need to diagram faster
From quick sketches to polished architecture diagrams, Mermaid Live Editor has the tools to get you there.
Freeform Visual Canvas
Drag nodes, draw connections, and reshape your diagram on an infinite canvas. No grid snapping, no constraints — pure creative flow.
Two-Way Code Sync
Every visual change writes valid Mermaid syntax. Every code edit redraws the canvas. One source of truth, two ways to shape it.
Slide-Ready Export
One click turns any diagram into a clean, presentation-friendly layout. Copy as a crisp PNG straight to your clipboard.
9 Node Shapes
Rectangles, diamonds, hexagons, cylinders, stadiums, and more. Pick the shape that matches your meaning — visually.
Smart Auto-Layout
Powered by the ELK engine, diagrams snap into clean hierarchies. Choose top-down, left-right, or any direction you need.
Style Everything
Custom fill, stroke, and text colors per node. Four edge types — arrow, open, dotted, thick. Make it yours.
Three steps. Zero learning curve.
Write or Draw
Start with Mermaid code or drop nodes on the canvas. Both approaches work simultaneously.
Shape & Style
Change shapes, colors, connections, and layout direction. The code updates in real-time.
Export & Share
Copy as PNG, tidy for slides, or grab the Mermaid source. Ready in seconds.
Code-only editors leave half the story untold
Most Mermaid tools give you a text box and a preview pane. Mermaid Live Editor gives you a living, breathing canvas.
| Capability | Code-Only Editors | Mermaid Live Editor |
|---|---|---|
| Visual drag-and-drop | No | Yes |
| Code editor | Yes | Yes |
| Two-way live sync | No | Yes |
| Node shape picker | No | Yes |
| Per-node color styling | No | Yes |
| Slide-ready layout | No | Yes |
| One-click PNG copy | No | Yes |
| Auto ELK layout | No | Yes |
| No sign-up required | Sometimes | Yes |
Your next diagram is
one click away
Stop switching between code and preview. Open the editor and start building — visually.
Free forever. No account needed.