Mermaid Live Editor

Write Mermaid syntax and see your diagram rendered live — export as SVG or PNG in one click, no account required.

What it does

Real-time live preview

See your diagram rendered as you type with a 150ms debounce — fast enough to feel instant, slow enough not to thrash.

14 Mermaid diagram types

Flowchart, Sequence, ER, Class, State, Gantt, Pie, Mindmap, Timeline, Git Graph, Quadrant, XY Chart, Block, and Sankey — all with starter templates.

Monaco code editor

The same editor engine powering VS Code. Multi-cursor, find/replace, auto-indent, and keyboard shortcuts you already know.

SVG and PNG export

Download as lossless SVG or PNG at 1×, 2×, or 3× resolution. PNGs are rendered via a hidden canvas — no blurry screenshots.

5 built-in themes

Switch between Default, Dark, Forest, Neutral, and Base themes. The preview re-renders automatically on theme change.

Privacy-first URL sharing

Share diagrams via URL — the entire diagram is compressed with LZString and stored in the URL fragment. Nothing leaves your browser.

How to use Mermaid Live Editor

  1. 1
    Choose a diagram type

    Select from 14 diagram types in the toolbar dropdown. A starter template loads automatically so you can see the syntax immediately.

  2. 2
    Edit the Mermaid code

    Type or paste Mermaid syntax in the left pane. The diagram updates live as you edit. If you make a syntax error, the last valid render stays visible.

  3. 3
    Pick a theme (optional)

    Use the Theme dropdown to switch between Default, Dark, Forest, Neutral, and Base. The diagram re-renders with the new theme instantly.

  4. 4
    Share or export

    Click Share to copy a URL that restores your exact diagram when opened. Click Export to download as SVG or PNG in your preferred resolution.

When to use this

System architecture documentation

Use the Flowchart or Block diagram type to map out microservices, API gateways, and databases. Export as SVG to embed in your RFC or design doc.

API and service interaction design

Sequence diagrams show exactly which actors communicate, in what order, with what messages. Share the URL with your team for async review.

Database schema design

ER diagrams let you define entities, attributes, and relationships in Mermaid syntax. Export as PNG to drop into a Notion page or Confluence wiki.

Project planning and scheduling

Gantt charts map tasks to dates and dependencies. Great for sprint planning, release timelines, or onboarding schedules.

Common errors & fixes

Blank preview after typing
You have a syntax error. The editor shows the last valid render dimmed and displays the error message at the bottom of the preview pane. Check the error text for the line causing the problem.
Wrong diagram type rendered
Each Mermaid diagram type starts with a specific keyword (flowchart, sequenceDiagram, erDiagram, etc.). Make sure the first line of your code matches the selected diagram type.
Gantt chart dates not rendering
Gantt charts require a dateFormat declaration (e.g., dateFormat YYYY-MM-DD) that matches the date strings in your task definitions.
ER diagram cardinality wrong
Mermaid ER cardinality uses symbols like ||--o{, ||--|{, and }o--||. The left side describes the first entity's cardinality, the right side the second entity's.

Diagrams as code: why Mermaid beats diagram tools for engineers

Tools like draw.io and Lucidchart are powerful but create a fundamental disconnect: your diagram lives in a file format that doesn't version-control well, doesn't diff meaningfully, and can't be reviewed in a pull request.

Mermaid diagrams are plain text. They live in your repository alongside the code they describe. When the architecture changes, you update the Mermaid file and the change shows up in git diff. When a colleague reviews your RFC, they can read the diagram definition and suggest edits in a comment. When you need to update a diagram six months later, you're editing text — not trying to remember which tool you used and whether you still have the license.

The Mermaid syntax takes maybe 20 minutes to learn for the most common diagram types. That investment pays off every time you embed a diagram in a README, a design doc, a Confluence page, or a GitHub issue — all of which render Mermaid natively.

Choosing the right Mermaid diagram type for your use case

Flowcharts (flowchart TD/LR) are the workhorse. Use them for decision trees, process flows, and any directed graph where the relationships between nodes matter more than time or structure.

Sequence diagrams (sequenceDiagram) are ideal for API design, microservice interactions, and authentication flows where the order of messages between actors is the main thing to communicate.

ER diagrams (erDiagram) map database schemas. Define entities with their attributes, then describe the cardinality of relationships between them. They render clean enough to drop directly into technical documentation.

Class diagrams (classDiagram) are the UML standard for object-oriented design — inheritance, composition, methods, and properties. Useful in backend architecture docs or when documenting a domain model.

Gantt charts are for timeline planning: tasks, durations, dependencies, and sections. The Mermaid Gantt type handles dateFormat configuration to match your date strings.

For quick data summaries, Pie charts are the fastest to write — three lines. For anything where hierarchy matters (mindmaps, org charts, topic breakdowns), Mindmap is more expressive.

Frequently Asked Questions

Is the Mermaid Live Editor completely free?

Yes. The tool is free with no usage limits, no account required, and no paid tier. All rendering happens in your browser.

Do my diagrams get uploaded to a server?

No. Mermaid renders entirely in your browser. Your diagram code is never sent to any server. Shared URLs encode the diagram in the URL itself using LZString compression.

Which Mermaid diagram types are supported?

All 14 types: Flowchart, Sequence, ER, Class, State, Gantt, Pie, Mindmap, Timeline, Git Graph, Quadrant, XY Chart, Block, and Sankey — each with a starter template.

Will my diagram be saved if I close the tab?

Yes. The editor autosaves your diagram, selected diagram type, and theme to your browser's localStorage. Your work is restored automatically when you return.

How do I share a diagram with a colleague?

Click the Share button. It copies a URL to your clipboard. Anyone who opens that URL sees your exact diagram — no account needed on either end. The diagram is encoded in the URL itself.

What is the best export format for documentation?

SVG for anything embedded in a web page, wiki, or doc where scalability matters. PNG at 2× for emails, slides, or anywhere a raster image is needed. PNG at 3× for print-quality output.

Can I use this for GitHub README diagrams?

Yes. GitHub renders Mermaid natively in Markdown files. Write and preview your diagram here, then copy the code and paste it into your README inside a mermaid fenced code block.

Related Tools

edit_note

Markdown Editor

Live preview markdown rendering engine.

auto_awesome_mosaic

SVG Converter

Convert SVG to PNG at any resolution or ICO for favicons.

difference

Diff Checker

Compare two files for visual differences.

schema

SQL to ORM Converter

Convert CREATE TABLE SQL to Prisma, Drizzle, SQLAlchemy, Django, TypeORM, Sequelize, GORM, and Ecto model definitions — free, browser-based, no account needed.