Mermaid Live Editor, Viewer & Playground

A Mermaid live editor is a tool where you type or paste Mermaid markup and see the diagram render immediately, with no separate compile step or desktop install. This one runs entirely in your browser and supports flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, and pie charts.

Paste or type your Mermaid markup into the editor on the left and the diagram renders instantly on the right — no installation or signup required. You can start from a ready-made example or write your own flowchart, sequence, class, or state diagram.

When your markup fails to render, the editor highlights the error. Click "Send to AI Chat" and the built-in AI assistant explains the root cause, validates a corrected version, and applies the fix directly in the editor.

Yes. This playground is built for AI-generated diagrams: paste the Mermaid markup an LLM or agent produced, render it immediately, and use the AI assistant to validate and repair any broken syntax before you export or share it.

Use the download button above the diagram to export your rendered Mermaid chart as a PNG or SVG file that you can drop into docs, slides, or issues.

Click Share to generate a URL that encodes your current markup. Anyone who opens the link sees the same diagram in the editor, making it easy to collaborate or hand off a diagram.

The Mermaid playground is completely free and works without an account. Just open the page and start editing.

MermaidJS is a simple yet powerful diagramming language that generates charts and diagrams from plain text. It supports flowcharts, sequence diagrams, state diagrams, class diagrams, pie charts, and more, and is open source with its code freely available on GitHub.