UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Mermaid Live Editor

Write Mermaid diagram syntax and see a live SVG preview — flowcharts, sequence, Gantt, class, ER, and state diagrams.

About Mermaid Live Editor

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 Mermaid Live Editor

No server or build

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

Instant live preview catches

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

Template library covers all

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

Downloaded SVG is vector-based

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

Ideal for technical writers

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

No server

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

How to use Mermaid Live Editor

  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 to use Mermaid Live Editor

  • Designing software architecture diagrams during planning sessions.
  • 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.
  • Designing software architecture diagrams during planning sessions where syntax-driven iteration beats dragging boxes.

Examples

Simple deployment flowchart

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

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

API authentication sequence diagram

Input: 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

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

Database ER diagram

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

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

Project Gantt chart

Input: 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

Output: 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

What is Mermaid and where is it used?▾
Mermaid is an open-source JavaScript library for generating diagrams from text definitions. It is natively supported by GitHub (in README files and issues), GitLab, Notion, Obsidian, and many documentation platforms like Docusaurus and MkDocs.
What diagram types does Mermaid support?▾
The most common types are flowchart, sequenceDiagram, gantt, classDiagram, erDiagram, stateDiagram-v2, pie, gitGraph, and journey. This editor includes templates for flowchart, sequence, Gantt, class, ER, and state diagrams.
Can I use the downloaded SVG in a Word document or PowerPoint?▾
Yes. Most modern versions of Word and PowerPoint accept SVG imports. You can also open the SVG in Inkscape, Figma, or Illustrator for further styling before embedding it.
How do I embed a Mermaid diagram in a GitHub README?▾
Wrap your Mermaid code in a fenced code block with the language identifier 'mermaid'. GitHub automatically renders the diagram in the preview. The rendered version uses Mermaid's default theme, not your selected theme here.
Why does my diagram show an error in the preview?▾
The error panel below the preview shows the exact syntax error reported by the Mermaid parser. Common issues are incorrect indentation, missing colons or arrows, or using a keyword reserved by the diagram type.
Is there a character limit on the diagram source?▾
There is no enforced limit in this tool. Very large or deeply nested graphs may take longer to render and can produce crowded SVG output — consider splitting complex diagrams into multiple focused charts for clarity.

Explore the category

PlantUML Renderer Write PlantUML diagrams and preview them as SVG — sequence, class, activity, and more. Tailwind Class to CSS Converter Look up what CSS properties any Tailwind CSS utility class generates, including responsive and state variants. Invoice Maker Fill an invoice form with line items, tax, and discount, see live preview, and download a clean PDF. Template-based, no AI, no signup. Regex Tester Test regular expressions with live matches HTTP Status Lookup Search HTTP status codes and names with class-based filters and notes. OG Tag Generator Generate Open Graph meta tags with preview-friendly fields and copy-ready output.
Mermaid vs PlantUML vs Graphviz: Diagrams as Code Compared Three popular diagram-as-code tools, three different philosophies. We compare syntax, layout engines, output quality, and which one fits you Apr 2026 · 9 min

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.