Mermaid Live Editor

About this tool

Mermaid is a 'diagram-as-code' language natively supported by GitHub, GitLab, Notion, and Obsidian. Define flowcharts, sequence diagrams, Gantt charts, class diagrams, ER diagrams, and state machines in plain text and get crisp SVG output. This live editor provides a split-pane view: edit Mermaid syntax on the left and see the SVG preview update automatically on the right (300ms debounce). A template dropdown covers all six diagram types so you can start immediately without memorizing syntax. Switch between dark, forest, and default themes to match your target document. Download the rendered SVG with one click — vector output that scales to any resolution. The official Mermaid library runs entirely in-browser.

Why use it

• No server or build step required — the official Mermaid library renders SVG directly in your browser.

• Instant live preview catches syntax errors before committing diagrams to documentation.

• Template library covers all six major Mermaid diagram types so you can start quickly.

• Downloaded SVG is vector-based and scales to any resolution for use in presentations or print.

• Ideal for technical writers and developers who embed Mermaid diagrams in GitHub README files or Notion docs.

• No server, no install, no build step — the official Mermaid library renders SVG directly in your browser tab.

How to use

1. Select a template from the dropdown or start typing Mermaid syntax directly in the left pane.
2. The right pane updates the SVG preview automatically as you type (debounced 300ms).
3. Use the theme selector to switch between dark, forest, and default themes.
4. Click Copy Source to copy your diagram definition for use in a README or docs file.
5. Click Download SVG to save the rendered diagram as a scalable SVG file.
6. Select a diagram type from the template dropdown to load a worked example into the editor, or start typing Mermaid syntax directly in the left pane.
7. The right pane updates the SVG preview automatically as you type, with a 300ms debounce that keeps typing smooth.

When it helps

• Designing software architecture diagrams during planning sessions where syntax-driven iteration beats dragging boxes.
• Documenting API flows as sequence diagrams for team wikis.
• Creating project timelines as Gantt charts without a spreadsheet tool.
• Visualizing database schemas as ER diagrams before implementation.
• Prototyping state machine logic before coding a state management layer.

Examples

flowchart LR
  A[Code Push] --> B[CI Build]
  B --> C{Tests Pass?}
  C -->|Yes| D[Deploy]
  C -->|No| E[Notify Author]

SVG showing five nodes left-to-right: Code Push → CI Build → diamond decision → Deploy or Notify branches.

sequenceDiagram
  participant U as User
  participant W as Web
  participant A as Auth
  U->>W: GET /login
  W->>A: POST /token
  A-->>W: 200 + JWT
  W-->>U: Set-Cookie

SVG with three vertical lifelines (User, Web, Auth) and four horizontal arrows showing the OAuth-style token exchange.

erDiagram
  USER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
  PRODUCT ||--o{ LINE_ITEM : ordered_in

SVG showing four entity boxes (USER, ORDER, LINE_ITEM, PRODUCT) connected by relationship lines with cardinality markers.

gantt
  title Sprint 24 Plan
  dateFormat YYYY-MM-DD
  section Backend
  API design :a1, 2026-05-08, 3d
  Implementation :a2, after a1, 5d
  section Frontend
  Wireframes :b1, 2026-05-08, 2d

SVG horizontal-bar chart with sections (Backend, Frontend), tasks aligned to dates, and visible task durations.

Tips

• Use `flowchart TD` (top-down) or `flowchart LR` (left-right) to control layout orientation — LR is great for wide pipelines, TD for hierarchy.
• Quote labels containing special characters: `A["Label: detail"]` for square-bracket nodes or `A("Label")` for rounded nodes prevents parser errors.
• Click any template to replace the editor content and quickly see the syntax for that diagram type — copy a fragment, then build out from it.
• Use `subgraph Name ... end` blocks to group related nodes into labeled containers, which makes large flowcharts easier to read.
• For sequence diagrams, prefer `participant Alice` declarations at the top so participants render in the order you intend, not in first-appearance order.
• If a Gantt chart bar overflows the chart area, shorten the task name or split into two tasks — Gantt has limited room for long labels.

Frequently Asked Questions

Glossary

Mermaid

An open-source JavaScript library (created by Knut Sveidqvist, 2014) for rendering diagrams from text syntax, natively supported by GitHub, GitLab, Notion, and many documentation tools.

flowchart

A Mermaid diagram type for directed graphs with boxes and arrows, supporting top-down (TD), left-right (LR), bottom-up (BT), and right-left (RL) layouts.

sequenceDiagram

A Mermaid diagram type showing message exchanges between actors over time, commonly used for API and protocol documentation. Supports sync (->>) and async (->) arrows.

Gantt chart

A horizontal-bar chart of tasks across time, used for project planning. Mermaid Gantt syntax uses dateFormat, sections, and task duration declarations.

ER diagram

Entity-Relationship diagram — Mermaid's erDiagram type renders database tables and their relationships (||--o{ for one-to-many, etc.).

stateDiagram-v2

Mermaid's state-machine diagram type, supporting nested states, parallel states, and choice/fork/join nodes for finite-state-machine documentation.

subgraph

A Mermaid grouping syntax (`subgraph name ... end`) that visually contains a set of nodes inside a labeled box, useful for organizing larger flowcharts.

SVG

Scalable Vector Graphics — an XML-based image format that scales to any resolution without pixelation. Mermaid renders all diagrams as SVG by default.