Mermaid Live Editor.

What is Mermaid?

Mermaid is an open-source, text-based diagram language. Instead of dragging boxes and arrows, you describe a diagram in a few readable lines and Mermaid lays it out automatically. Because a diagram is plain text, it can live next to your code, be reviewed in a pull request and be updated in seconds when a process changes.

This Mermaid live editor renders your code as you type, highlights syntax errors and keeps the last valid diagram visible while you fix them. It includes templates for every common diagram type, a no-code form for adding flowchart steps, themes, a hand-drawn style and export to SVG, PNG, Markdown and share links.

Supported diagram types

The first keyword of your code selects the diagram type. Each type has a dedicated page with focused templates and a guide:

Mermaid syntax cheat sheet

A flowchart starts with a direction: TD (top-down), LR (left to right), BT or RL. Nodes have an identifier and an optional label whose brackets set the shape. Arrows connect identifiers and can carry text between pipes.

flowchart LR
    A[Rectangle] --> B(Rounded)
    B --> C{Decision}
    C -->|Yes| D([Stadium])
    C -.->|No| E[(Database)]
    E ==> F((Circle))
    %% Lines starting with %% are comments

• --> solid arrow, --- line without arrowhead, -.-> dotted arrow, ==> thick arrow.
• subgraph Name … end groups nodes into a box or swimlane.
• classDef name fill:#fde,stroke:#c33 defines a style; class A,B name applies it.
• Wrap labels containing brackets, colons or quotes in double quotes: A["Total (EUR): 25"].

Export Mermaid to SVG, PNG or Markdown

Download SVG for documents, websites and slides that need sharp lines at any size, or PNG at 1× to 4× resolution for chat apps, tickets and tools that do not accept SVG. The background can match the theme, be white or be transparent.

“Copy for Markdown” wraps the code in a fenced code block tagged mermaid. GitHub, GitLab, Obsidian and Notion can render such blocks directly, so the diagram stays editable in your README, wiki or notes. Those platforms ship their own Mermaid version, so very recent syntax may render here but not there yet; exporting an SVG avoids that difference.

Use “Save .mmd” to keep an editable source file, and “Open file” to load .mmd, .mermaid, .txt or a Markdown file — the first Mermaid block in a Markdown file is extracted.

Fixing common Mermaid syntax errors

• A lowercase node called end breaks flowcharts because it closes a subgraph. Write End or finish[end] instead.
• Parentheses, brackets or colons inside a label must be quoted: A["Step (optional)"].
• In a Gantt chart, dates must match the dateFormat line exactly, and task identifiers used with after must exist.
• In a mind map, indentation defines the tree. Mixing tabs and spaces can attach a branch to the wrong parent; the editor inserts four spaces when you press Tab.
• Error messages give a line number. The editor keeps the last valid diagram on screen, so you can compare it with your change.

Privacy and offline-friendly editing

Rendering happens in your browser with the open-source Mermaid library. Your code is not uploaded, drafts are kept in this browser’s local storage, and a share link stores the compressed diagram after the # sign, which browsers do not send to the web server.

Once the page and the diagram engine have loaded, rendering does not need further requests, which makes it suitable for internal architecture diagrams, incident timelines and other material you would rather not paste into an online account.