Mermaid Diagram Renderer

Turn Mermaid text syntax into a live diagram — flowcharts, sequence diagrams, Gantt charts, pie charts, class diagrams, and more. Type (or paste) Mermaid code on the left and a rendered SVG diagram appears on the right as you go, ready to copy or download as SVG or PNG.

Mermaid is the diagram-as-code syntax used across GitHub, GitLab, Notion and countless documentation tools: instead of dragging boxes around in a GUI, you describe the diagram in a few lines of readable text, which makes it easy to keep next to your code and review in a pull request like any other file.

How to use it

1. Type or paste Mermaid syntax into the code box, or click one of the example buttons (Flowchart, Sequence, Gantt, Pie, Class) to load a starting point for that diagram type.
2. Pick a theme — Mermaid's own built-in themes: Default, Dark, Forest, Neutral, or Base.
3. The diagram re-renders automatically a moment after you stop typing.
4. If your syntax has an error, an inline message tells you what's wrong instead of showing a broken or half-drawn diagram.
5. Use Download on the diagram panel to save the SVG (infinitely scalable, ideal for docs and further editing), or the image icon next to it to save a PNG (a flattened raster export, handy for pasting into places that don't render SVG).

Privacy

Diagrams render entirely in your browser using the Mermaid JavaScript library — nothing you type is ever sent to a server. You can safely diagram private architecture, internal workflows, or anything else you'd rather not upload.

What kinds of diagrams does Mermaid support?

Flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, pie charts, git graphs, and several more specialized diagram types — the syntax itself (the first word of your code, like flowchart or sequenceDiagram) tells the renderer which kind to draw.

Why did my diagram fail to render?

Mermaid's parser is strict about syntax — a missing arrow, an unmatched bracket, or a keyword typo will produce a parse error rather than a guess at what you meant. The error message names the token it choked on; fixing that spot and waiting for the debounce to fire usually resolves it.

Can I use this diagram in Markdown or a GitHub README?

Yes — since the source is plain Mermaid text, you can paste your code directly into a fenced ```mermaid code block in any Markdown renderer that supports Mermaid (GitHub, GitLab, Notion, and many static site generators do), and it will render the same diagram natively. Use this tool to preview and debug the diagram, and to export a standalone SVG/PNG for places that don't render Mermaid.