Free Mermaid Diagram Editor — Live Preview, PNG & SVG Export

Write Mermaid.js code on the left, watch your diagram render live on the right. This free online Mermaid editor runs entirely in your browser — no login, no data uploaded to a server. It supports every Mermaid diagram type: flowchart, sequence, class, state, ER, Gantt, pie, git graph, mindmap, and user journey.

How to use

1. Pick a template from the bar (Flowchart, Sequence, Class, …) or write your own Mermaid syntax in the left pane.

2. The preview updates automatically as you type (~350ms debounce).

3. Switch between four themes — Default, Forest, Dark, Neutral — to match your doc or slide.

4. Export the diagram as PNG (2× retina, dark/light background respected) or SVG (vector, ideal for docs).

5. Use the zoom controls (−/+/reset) to inspect details.

Why Mermaid? It's the most widely supported text-to-diagram syntax in the developer world: GitHub renders it in markdown, Notion embeds it natively, mkdocs / docusaurus plugins read it, and most static site generators support it. Editing a .md file is great for storage; this editor is great for authoring.

Diagram types supported

Type	What it's for
flowchart / graph	Processes, decision trees, architecture overviews
sequence	API calls, protocols, message flow between actors
class	OO class hierarchies, DB schema in OOP style
state / stateDiagram-v2	State machines, lifecycles, FSMs
er / erDiagram	Entity-relationship diagrams for databases
gantt	Project plans, sprints, release timelines
pie	Quick composition / share charts
git	Commit graphs, branch/merge visualization
mindmap	Brainstorms, hierarchical notes
journey	User flows, onboarding maps

Example: a flowchart

flowchart TD
    A[User opens app] --> B{Logged in?}
    B -->|Yes| C[Show dashboard]
    B -->|No| D[Redirect to login]
    D --> E[Authenticate]
    E --> C

Paste the snippet above into the editor and you'll see the diagram render instantly.

Tips

• The editor auto-saves your code and theme to localStorage — close the tab and your work is still there when you come back.
• Hit 📋 Copy to grab the Mermaid source to paste into a README or Notion page.
• For large diagrams, use ⬇ SVG instead of PNG — the export is vector and stays crisp at any zoom.
• The Mermaid library (v11.15.0) is loaded from a CDN inside the iframe; the page itself stays a single self-contained file.

Need more?

---