Mermaid diagram viewer
Write Mermaid text and see the diagram, then export SVG.
Runs in this tab. The file stays here.
Paste Mermaid code to see the diagram.
Rendering happens in your browser with the bundled Mermaid library — no requests are made.
This runs in your browser. Nothing is uploaded.
About Mermaid diagram viewer
Write Mermaid diagram text and see the rendered diagram beside it, then download an SVG. Rendering happens in your browser with the bundled library.
Mermaid lets you describe flowcharts, sequence diagrams, state machines, Gantt charts and similar visuals as plain text, which diffs well in version control. The viewer has a Mermaid code box on one side and the diagram on the other. The preview refreshes shortly after you stop typing, and a syntax problem shows its error message in place of the diagram so you can fix it quickly. If the box is empty, Load example drops in a starter diagram.
Rendering happens locally with the Mermaid library shipped with the site, and no requests are made with your text. It is loaded the first time it is needed, so the first preview can take a moment. Diagram types and syntax follow the bundled version, which can lag the newest release, so a brand-new diagram type may show an error even if the official live editor accepts it. The renderer runs in strict security mode, which turns off click handlers and scripts inside diagrams.
Download SVG saves diagram.svg, available once a diagram has rendered. There is no PNG export, no theme picker and no zoom or pan controls, and the input is not saved if you leave the page. Some Mermaid diagrams put their labels inside the SVG as embedded HTML, which certain vector editors and image converters show blank or misplaced, so open the file in a browser first if you plan to reuse it. If the renderer cannot load at all, the page tells you and shows only your code.
How to use Mermaid diagram viewer
- 1Type or paste Mermaid text into the code box, or click Load example.
- 2Check the preview and fix any error message shown in its place.
- 3Click Download SVG to save diagram.svg.
What it won't do
- SVG export only; no PNG, theme picker or zoom controls.
- Syntax follows the bundled Mermaid version, which may trail the latest release.
- Strict security mode disables click handlers and scripts in diagrams.
Common questions
Why does my diagram show an error in the Mermaid viewer?
Mermaid is strict about syntax. The message usually points at the line. Common causes are a missing diagram keyword on the first line, broken arrows, unquoted special characters in labels, or a diagram type newer than the bundled version.
Does the Mermaid viewer export PNG as well as SVG?
No, only SVG. Open the SVG in a browser and take a screenshot, or convert it with a vector tool, if you need a raster image.
Is my Mermaid diagram text uploaded when I preview it?
No. The library is bundled and renders in your tab, and the page makes no request with your diagram text.
Why is a downloaded Mermaid SVG missing its text in another app?
Some diagram types store labels as embedded HTML inside the SVG, and not every editor or converter renders that. Check the file in a browser first, and try a different diagram type or editor if the labels are blank.
Related tools
Why this one doesn't upload your file
There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation