Mermaid viewer and live editor
Paste any Mermaid diagram and see it render instantly — a viewer, a live editor and a playground in one page. Flowcharts, sequence diagrams, ER models, class diagrams, gantt charts and mind maps all preview as you type, on your own device.
One step per line. Indent two spaces to branch beneath the line above.
View a Mermaid diagram online
Paste Mermaid source into the left pane and the rendered diagram appears on the right. There is nothing to install and no account to create: the page loads the official Mermaid renderer once from a public CDN, then draws every diagram locally on your device.
Got a .mmd file, or a Mermaid block someone pasted into a ticket? Open it in any text editor, copy the text and paste it into the editor above — the file itself never leaves your machine, because this Mermaid visualizer runs in the browser rather than on a server. The same page is also the editor, so you can read someone else’s diagram and fix it without switching tools.
A Mermaid playground for trying syntax
Use it as a playground: load one of the example chips above, change an arrow, add a node, and watch what the renderer does with it. Every edit re-renders, so the feedback loop is fast enough to learn Mermaid by experiment instead of by reading the specification.
When a diagram is worth keeping, press “Copy share link”. The editor encodes your source into the URL fragment, so the link reopens exactly that diagram — and because a fragment is never sent to a server, sharing one still uploads nothing.
Mermaid syntax checker
Before anything is drawn, the source goes through the official Mermaid parser. If it does not parse, the message is tidied into a single readable line under the preview instead of a raw parser dump, and the last diagram that did render stays on screen so you can compare the broken version with the working one.
That makes this a practical syntax checker for a block that refuses to render in a GitHub README or your docs tool: paste the failing block, read the message, fix the line, then copy the corrected source back out.
What is Mermaid?
Mermaid is an open-source “diagram-as-code” language: you write a short text description and Mermaid renders the diagram. It is the same syntax GitHub, GitLab, Obsidian and many docs platforms render natively, which is why a Mermaid diagram is so portable — paste the block anywhere that supports it and it draws itself.
This editor runs the official Mermaid renderer in your browser. Type or paste any supported diagram type and it renders live, with zero setup and nothing sent to a server.
From editor to your docs
Export a vector SVG for crisp embedding, a PNG for slides, or copy a ready-made ```mermaid Markdown block to drop into a GitHub README where it renders automatically. For diagrams that should stay editable, keep them as Mermaid source in your repo and re-open them here any time.
Diagram types
Frequently asked questions
How do I view a Mermaid diagram online?
Paste the Mermaid source into the editor on this page and it renders immediately in your browser — no signup, no upload, nothing to install. If the diagram lives in a .mmd or Markdown file, open that file in any text editor and paste the block here.
Is this a free online Mermaid editor?
Yes — paste Mermaid and it renders live in your browser, free, with no signup and no watermark. You can export SVG/PNG or copy the source.
Is there a free Mermaid playground?
This page is one. Load an example, edit it, and the preview redraws as you type. “Copy share link” puts the whole diagram in the URL fragment, so you can reopen it later or send it to someone — still without uploading anything.
Can it check my Mermaid syntax?
Yes. Every render runs the official Mermaid parser first, so invalid syntax is caught and reported as one readable line under the preview, with the last good diagram left on screen. Fix the line and it re-renders.
Which Mermaid diagram types are supported?
Flowcharts, sequence diagrams, ER diagrams, class diagrams, state diagrams, gantt charts, mind maps and pie charts — the full Mermaid renderer is loaded.
Does my Mermaid code get uploaded?
No. The Mermaid engine loads once from a public CDN and then everything renders locally. Your diagram text never leaves your device.
How do I embed a Mermaid diagram in a GitHub README?
Copy the Markdown block from the export menu and paste it into your README. GitHub renders fenced ```mermaid code blocks automatically — no image needed.
Which Mermaid version is this?
The editor loads Mermaid 11 from a public CDN, so you get current syntax and diagram types without installing anything.