Skip to content
English
All tools

Categories

Developer ToolsEncoding & DecodingJSON & DataHash & ChecksumText ToolsDate & TimeNetwork ToolsFile ToolsMarkdown & Diagrams

Mermaid Live Editor

A free-form Mermaid editor: type diagram-as-code and get a live rendered diagram you can export.

Processed locally in your browser

Options
0 chars · 0 lines
The result will appear here.

What is Mermaid Live Editor?

Mermaid turns short text definitions into diagrams: flowcharts, sequence diagrams, class and state diagrams, entity-relationship diagrams, Gantt charts, mind maps, pie charts, user journeys, timelines and Git graphs. Because the source is plain text, diagrams can live in version control next to your code and docs.

This editor renders your code with Mermaid in strict security mode with HTML labels disabled, so the SVG contains only plain shapes and text. If the syntax is wrong you get the parser message with the line and what was expected, instead of a blank screen. Pick a theme and export the result.

How does it work?

  1. Type or paste Mermaid code; the first line must name the diagram type (flowchart, sequenceDiagram, gantt…).
  2. Choose a theme (default, neutral, forest, dark or base) to match your document.
  3. Read the parser message if the diagram does not render, fix the reported line and try again.
  4. Export the diagram as SVG or PNG for slides, wikis and documentation.

Common use cases

  • Drafting architecture and process diagrams for a README or design document.
  • Debugging a Mermaid block that does not render on GitHub or in your wiki.
  • Creating diagrams for slides without a drawing tool.
  • Learning Mermaid syntax by editing a working example.

Examples

Try this input in the tool above:

flowchart TD
    A([Start]) --> B[Read configuration]
    B --> C{Configuration valid?}
    C -- Yes --> D[Start server]
    C -- No --> E[Show error message]
    E --> B
    D --> F([Ready])

Privacy

Mermaid Live Editor runs entirely in your browser. The text or files you provide are processed on your device and are not uploaded, logged or stored on our servers.

Limitations

Rendering uses the Mermaid version bundled with this site, so very new diagram types or syntax may differ from your platform. Interactive features such as click links are disabled for safety.

Frequently asked questions

Is my diagram code sent to a server?

No. Mermaid runs locally in your browser and the code never leaves your device.

Why do I get a syntax error?

The message quotes the line where parsing stopped and what token was expected. Common causes: a missing diagram keyword on the first line, unquoted labels containing brackets or parentheses, or a stray character in an arrow.

Can I use the diagram outside this site?

Yes. Export SVG for scalable graphics or PNG for slides, or copy the Mermaid code into any platform that supports it, such as GitHub, GitLab or Notion.

Related tools

More tools in Markdown & Diagrams →