Skip to content
ToolMug

Use ↑ ↓ to move, Enter to open, Esc to close.

Mermaid Live Editor

Draw flowcharts, sequence diagrams, Gantt charts and more from a few lines of text. Write Mermaid code on the left, watch the diagram update on the right, then export SVG or PNG for documents, slides or Markdown. GitHub, GitLab, Notion and many note apps render Mermaid code directly too.

Runs in your browser — nothing you enter is uploaded

Loading Mermaid…

How to use

  1. Pick a diagram from Insert a template, or paste Mermaid code you already have.
  2. Edit the code on the left. The preview re-renders when you pause typing, and syntax errors are shown below it.
  3. Choose a theme, then download SVG or PNG, or copy the SVG code.

Options explained

Diagram types
Templates cover flowcharts, sequence, class, state and ER diagrams, Gantt charts, pie charts and mind maps. Other Mermaid types such as timelines, quadrant charts and Git graphs can be written directly.
Theme
The built-in default, neutral, dark and forest themes. Neutral is close to black and white and prints well.
Export
SVG is vector and scales without loss. PNG is exported at twice the size with a background colour, for chat apps and slides.

Flowchart cheat sheet

flowchart LR
    A[Rectangle] --> B(Rounded)
    B --> C{Decision}
    C -->|Yes| D[(Database)]
    C -.->|No| E((Circle))

Frequently asked questions

Can I paste Mermaid code into GitHub?

Yes. Put it in a ```mermaid code block in a Markdown file, issue or comment and GitHub renders the diagram. GitLab, Notion, Obsidian and Typora support it too.

Is my code uploaded?

No. Mermaid renders in your browser; the code and diagram never leave your device.

Why doesn't Markdown formatting inside nodes work?

To make PNG export possible, node labels are drawn as SVG text, which does not support HTML tags or some rich-text formatting.

Privacy

This tool runs entirely in your browser. Your files and text are processed on your device and are never uploaded to our servers.

Related tools