Visual Editor

One place to edit, collaborate, and refine

Use the Visual Editor to customize diagrams, collaborate live, or leave feedback async.

Mermaid Visual Editor showing a flowchart being customized with drag-and-drop — adjust nodes and edges while Mermaid generates the underlying syntax automatically

Customize in clicks

Adjust edges, labels, and more instantly.

Work where you are

Fine-tune your diagrams without extra design tools.

Skip the syntax

Drag to design while Mermaid generates the code – or blend AI, clicks, and code.

Replace scattered docs with one visual

Turn fragmented notes into a clear, editable diagram.

Design together, move faster

Co-create diagrams live on a shared canvas.

Async-friendly collaboration

Share feedback and updates visually, so projects keep flowing across time zones.

How to build a diagram

Step 1: Open the Mermaid Visual Editor to start building or editing a diagramStep 2: Click any node or edge to select, resize, or reshape it in the Visual EditorStep 3: Drag into empty canvas space to create new diagram nodes without writing Mermaid syntaxStep 4: Double-click any node label to edit the text directly on the diagramStep 5: Mermaid code updates automatically in sync with every visual change in the editorStep 6: Share or present the finished diagram directly from Mermaid

Click nodes or edges to resize and reshape them

Drag into empty space to create new nodes

Double-click any label to edit text

Watch the code update automatically with every change

Collaborate live or async with automatic updates across teammates

Share or present whenever you’re ready

Less time syncing, more time building

One shared canvas for mapping ideas, collaborating live,  and keeping teams on the same page, literally.

FAQ

Have questions about the Visual Editor? These should help.

FAQ Icon