How to view a Mermaid diagram online
Paste your code into the editor. If you copied a whole chat answer, leave the explanation in: the tool finds the ```mermaid block and ignores the prose around it. You can also paste a mermaid.live link, or one of this page's share links, and it swaps the link for the code inside it.
The preview updates about a third of a second after you stop typing. Use the zoom buttons to read a large diagram up close or Fit to see all of it, and the theme menu to switch between Mermaid's default, neutral, forest and dark looks. The example buttons above the editor load a working diagram of each common type, which helps when you can't remember how a Gantt section or a sequence note is written.
Fixing Mermaid errors
Mermaid only draws code it can fully parse, so one bad line stops the whole diagram. When that happens the preview keeps the last version that rendered, dimmed, and the message under the editor says which line Mermaid choked on and what it expected. Fix that line and the preview comes back by itself.
In code written by an AI assistant, the usual problems are a label with unescaped parentheses, quotes or a semicolon (wrap the label in double quotes: `A["Step (optional)"]`), the word `end` used as a node name in a flowchart (capitalise it), a missing diagram type on the first line, and two diagram syntaxes mixed together. Pasting the error and the code back to the assistant usually fixes it in one go.
Exporting Mermaid to PNG or SVG
SVG is the better format in most cases. It's the diagram exactly as Mermaid drew it, stays sharp at any size, and can be opened and restyled in Figma, Illustrator or Inkscape. Copy SVG puts the markup on your clipboard for pasting straight into those tools. PNG is for places that only take images, such as slides, chat, email and tickets. It's exported at twice the diagram's natural size, so text stays crisp on high-resolution screens.
Exports use the theme you've picked. The dark theme exports on a dark background, the others on white. There's no watermark and no account.
Sharing a diagram with a link
Share link compresses your code into the address and copies it. Whoever opens the link sees the same diagram in this editor and can change it without changing yours. The code sits after the `#` in the URL, the fragment, which browsers never send to the server, so the diagram isn't stored anywhere and the link keeps working for as long as you keep it.
Very large diagrams make long links. Most chat apps and email clients handle them fine, but if one gets cut off, share the code as a file instead.
When you need to move the boxes yourself
Mermaid lays the diagram out for you, which is the point, until you want one box somewhere else. You can't drag anything in a Mermaid rendering. The only way to change the picture is to change the code. When the layout matters more than regenerating the diagram later, use Edit as shapes. It opens your code in our Mermaid to editable diagram tool, which rebuilds flowcharts, sequence, class, ER and state diagrams as Excalidraw shapes and arrows you can drag, restyle and draw on.
Save to my canvas puts the diagram, exactly as rendered here, on a new OmniCanvas canvas as an image. There it sits next to your notes, sketches and other files, and syncs across your devices. That button is the only thing on this page that sends anything off your device.
Mermaid viewer or mermaid.live?
mermaid.live is the Mermaid project's own live editor, and it's very good. If you need its extras, like saving diagrams to a Mermaid Chart account or configuring the renderer in detail, use it. This viewer covers the everyday job of pasting code, seeing it and exporting it, and it opens mermaid.live links. Where it goes further is in what you do next: turning the diagram into editable shapes, or keeping it on a canvas with the rest of your notes.