Mermaid Live Editor Online

A Mermaid editor built into a Markdown editor

Mermaid turns a few lines of text into a diagram, which makes diagrams easy to diff, review and keep next to the documentation they explain. This page's editor is a split Markdown editor with Mermaid support built in: write the diagram where it belongs in the document, and the preview redraws it a moment after you stop typing. Diagrams you have not changed come back from a cache, so editing the prose around them stays fast; the engine itself loads the first time a document contains a diagram, which can take a moment.

Start with this block in the editor:

```mermaid
flowchart LR
  Idea --> Draft --> Review
  Review -->|changes| Draft
  Review -->|approved| Publish
```

and the flowchart appears on the right. Change LR (left to right) to TD (top down), add a node, or rename an edge, and the picture follows.

Diagram types you can draw

Every diagram below renders in the preview. Put the diagram keyword on the first line inside the fence:

• Flowchart (flowchart TD) — processes, decisions, architecture sketches.
• Sequence diagram (sequenceDiagram) — calls between services or people over time.
• Class diagram (classDiagram) and state diagram (stateDiagram-v2).
• Entity-relationship diagram (erDiagram) — database schemas.
• Gantt chart (gantt), timeline (timeline) and user journey (journey).
• Pie chart (pie), quadrant chart (quadrantChart) and mindmap (mindmap).
• Git graph (gitGraph), requirement diagram (requirementDiagram) and C4 (C4Context).
• Newer types such as Sankey (sankey-beta), XY chart (xychart-beta), block (block-beta), packet, kanban and architecture (architecture-beta).

Syntax for beta diagram types can change between Mermaid releases, so check the official Mermaid documentation for the exact keywords; this editor runs the version bundled with the site.

Debugging a diagram

When Mermaid cannot parse the code, the diagram block turns into an error box with the parser's message — the line number, the text it choked on and what it expected. Fix the line and the diagram replaces the error. Use the Split layout so you can see both at once; the preview scrolls with the line you are editing. Diagrams are rendered in Mermaid's strict security mode, so click callbacks and scripts inside diagram definitions are disabled, and inline HTML elsewhere in the document is sanitized.

Saving, sharing and exporting

The document autosaves in your browser. Export → Download .md gives you the Markdown file to commit next to your code. Share creates a link that contains the whole document, so a colleague opens it with the diagram already drawn. Download .html exports a standalone page with the diagrams as SVG, and Print / Save as PDF produces a PDF in which the diagrams stay sharp at any zoom. Diagram colours follow the light or dark theme you choose.

When to use this and when to use a dedicated tool

If you only want to iterate on one diagram with a configuration panel and image downloads, a dedicated tool such as mermaid.live is built for that. If the diagram belongs in a document — a README, a design note, an agent's plan, project documentation — a Markdown editor that renders Mermaid is the shorter path, because you see the diagram in context and can download the whole file. New to the syntax around it? See the Markdown cheat sheet, or open the Markdown editor directly.