Mermaid Chart Editor
Edit locally and preview Mermaid flowcharts, sequence diagrams, and other charts in strict safe mode; you can download SVG or PNG.
How to use the Mermaid chart editor
The chart source code is parsed and rendered only in the current browser and will not be uploaded; the renderer uses strict safe mode.
Enter chart source code
Paste Mermaid code of no more than 128 KiB, and choose the default, neutral, forest, or dark theme.
Render and fix
Click Render to view an isolated preview; syntax errors will show location or parsing information, making it easier to return to the source and fix them.
Download chart
After confirming the tags and connections, export a safely cleaned SVG or PNG.
Limitations and Notes
- Only Mermaid syntax supported by the site’s current fixed version is supported; experimental features, legacy syntax, and third-party extensions may be incompatible.
- Strict safety mode will restrict the HTML tag, click callbacks, external links, and custom scripts, and some advanced interactions will not be rendered.
- Source code, statement count, lexical tokens, chained nodes, number of connections, and rendered SVG all have safety limits; exporting PNG is also limited by canvas size.
FAQ
Why didn’t the click command run?
The tool enables strict security mode and does not execute link callbacks or scripts in order to maintain a safe boundary for local previews.
Which one should I choose, SVG or PNG?
SVG is suitable for continued editing and lossless scaling; PNG is better suited for documents or social platforms that do not support SVG.
Will the chart be saved automatically?
No. The source code is kept only in the current page’s memory; please copy or download it before leaving.