Mermaid Live Editor

Mermaid Live Editor

Write Mermaid diagram syntax on the left and watch the diagram update on the right in real time. Supports the eleven Mermaid diagram types — flowchart, sequence, class, state, ER, Gantt, pie, mindmap, timeline, user journey, and quadrant chart — with five themes (default, dark, forest, neutral, base). Export the rendered diagram as a clean SVG vector or a high-resolution PNG. Everything runs in your browser; nothing is uploaded.

What is Mermaid and what can I draw with it?

Mermaid is a JavaScript-based diagramming language that lets you describe a diagram in plain text. It started as an alternative to expensive Visio-style tools and has become the de facto diagram standard in developer documentation — supported natively by GitHub, GitLab, Notion, Obsidian, VS Code, and many static site generators.

This editor supports all the diagram types Mermaid 10 ships with:

- Flowchart — boxes, decisions, arrows. The most common use.
- Sequence — message exchanges between participants over time.
- Class — UML class diagrams with inheritance, composition, methods, attributes.
- State — finite state machines with transitions and substates.
- Entity-Relationship — database tables and their relationships.
- Gantt — project timelines with tasks, dependencies, milestones.
- Pie — proportion charts.
- Mindmap — radial idea hierarchies.
- Timeline — events along a horizontal time axis.
- User journey — UX flow with sentiment scores.
- Quadrant chart — 2×2 grid for prioritisation.

Pick one from the Examples dropdown to get started, then edit the code to fit your data.

How is this different from the official Mermaid Live Editor?

The official mermaid.live editor is excellent — and this tool uses the exact same rendering engine (mermaid-js v10.9). Differences:

- This page is one of ~1,400 tools on a single domain, so the diagram editor shares the site's UI, dark mode, and language switching (English/Spanish/Vietnamese/French/Portuguese).
- No accounts, no Pan/Zoom canvas, no shareable URL: by design simpler. If you need link-sharing or persistent diagrams, mermaid.live or GitHub Gist is the right place.
- We use the UMD bundle from cdn.jsdelivr.net so the diagram is rendered after the page loads. No build step or paid tier.
- All processing is local. Mermaid renders SVG entirely in JavaScript; nothing is sent to a server.

If you need to embed Mermaid in a private/offline environment, the same code works there too — just self-host mermaid.min.js and run this exact rendering call.

How do I create a flowchart?

Flowcharts are the easiest type. Start with a direction declaration, then list nodes and edges:

flowchart TD
A[Start] --> B{Decision?}
B -- Yes --> C[Do thing]
B -- No --> D[Skip]
C --> E[End]
D --> E

Directions: TD (top-down), LR (left-right), BT, RL.

Node shapes by bracket type:
- [Rectangle]
- (Rounded)
- ((Circle))
- {Diamond / decision}
- [/Parallelogram/]
- [\Trapezoid\]
- [(Cylinder)]

Edge styles:
- --> arrow
- --- line
- -. dotted .->
- ==> thick arrow
- -- text -->

Load the Flowchart example and play with shapes to feel the syntax.

How do I make a sequence diagram for an API or chat flow?

Sequence diagrams show the order of messages between participants:

sequenceDiagram
participant Browser
participant API
participant DB
Browser->>API: POST /login {email, password}
API->>DB: SELECT user WHERE email=?
DB-->>API: row(id, hash)
API->>API: bcrypt.compare()
API-->>Browser: 200 OK + token
Note over Browser,API: Future requests<br>send the token
Browser->>API: GET /profile (Bearer token)
API-->>Browser: 200 OK + profile JSON

Arrows: ->> solid with head; -->> dashed reply; -> thin; --> dashed.

Notes: Note over X,Y: text — adds a yellow note spanning participants.

Loops, alt blocks, parallel (par) and critical sections are supported. The full grammar is at mermaid.js.org/syntax/sequenceDiagram.

How do I model a database with the ER diagram?

Use erDiagram and one cardinality character per side of the relation:

erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
USER {
int id PK
string email
string name
}
ORDER {
int id PK
int user_id FK
date created_at
}

Cardinality keys (left to right):
- |o zero or one
- || exactly one
- }o zero or more
- }| one or more

So USER ||--o{ ORDER reads as 'a user has zero or more orders'.

Inside the {} block list columns as type name modifier — modifier can be PK (primary key) or FK (foreign key). This is excellent for embedding small schemas in a README without spinning up a real schema viewer.

How does the Gantt chart syntax work?

Gantt chart syntax describes tasks by section, with dates, durations, and dependencies:

gantt
title Project Plan
dateFormat YYYY-MM-DD
section Design
Wireframes :done, w1, 2026-05-01, 5d
Mockups :active, m1, after w1, 7d
section Development
Backend :b1, 2026-05-13, 14d
Frontend :f1, after b1, 10d
section Launch
QA :q1, after f1, 3d
Release :milestone, after q1, 0d

Task format: 'Name : [statuses], task-id, start-date | after task-id, duration | end-date'

Statuses: done, active, crit (critical path).

Milestones: end with 0d to render as a diamond.

Dependencies: 'after task-id' chains tasks so editing an earlier task auto-shifts the rest. For complex schedules, dedicated tools like Smartsheet or MS Project are better — but for documentation and quick proposals, Mermaid Gantt is hard to beat.

Can I export the diagram?

Yes — two formats:

- SVG: vector, infinitely scalable, embeds directly in HTML/Markdown/PDF, and the text inside remains selectable and searchable. The downloaded file contains exactly the rendered XML you see in your browser's element inspector.
- PNG: raster at 2× resolution by default. Each pixel of the diagram becomes 4 pixels on a high-DPI display. White background is added so the image looks correct on slack/discord/email. Use this when the destination doesn't accept SVG (e.g. some image-sharing services or older Slack clients).

Both exports happen entirely in your browser. The PNG export uses an HTMLCanvasElement to rasterise the SVG; the SVG export is a direct download of the rendered XML. No server roundtrip in either case.

For architecture diagrams that will live in a Git repository, prefer SVG: it diffs reasonably in pull requests and is the standard format GitHub renders inline.

Is there a syntax error highlighter?

When Mermaid fails to parse your code (a typo in a keyword, an unmatched bracket, an unknown shape), the error message from the parser is shown below the editor. The last successfully rendered diagram stays visible on the right — so you can compare your current code against the previous valid version while you fix the issue.

Mermaid's error messages can be cryptic. Common fixes:
- 'Parse error on line N' — look at the indicated line and the one above; usually a missing arrow or bracket.
- 'Lexical error' — an illegal character, often a Unicode quote (“ ”) when you meant ASCII (").
- Diagram type keyword (flowchart, sequenceDiagram, etc.) must be the very first non-blank line; whitespace before it breaks parsing.

For live debugging, paste a short snippet and add lines incrementally — Mermaid renders on every keystroke (with a small debounce) so the first broken edit is easy to spot.

Key Features

• Live diagram rendering on every keystroke (debounced)
• Eleven diagram types: flowchart, sequence, class, state, ER, gantt, pie, mindmap, timeline, journey, quadrant
• Five themes: default, dark, forest, neutral, base
• One-click loading of full sample for each diagram type
• Export as SVG (vector) or PNG (2× retina)
• Per-keystroke debounce keeps the UI responsive even on large diagrams
• Preserves last good render when current code has a parse error
• Zoom in/out controls and reset for the preview pane
• Copy Mermaid source to clipboard
• Powered by [email protected] from jsDelivr CDN (URL pre-tested)
• 100% client-side — your diagram source never leaves the browser
• Mobile-friendly responsive layout
• Dark mode aware with automatic theme switching support
• Strict security level — diagrams cannot execute arbitrary HTML
• Works in any modern browser; no build step required