Mermaid preview

Mermaid Live Preview

Paste Mermaid code and see the diagram drawn as you type: flowcharts, sequence, class, state and ER diagrams, Gantt charts, pie charts, mind maps, timelines and Git graphs. It renders in your browser in Mermaid's strict mode, and nothing you paste is uploaded.

How do I use the Mermaid preview?

1. Paste Mermaid code, with or without its ```mermaid fence.
2. Pick a theme, or keep the one that follows Bracely's light or dark mode.
3. Copy the SVG, or save the diagram as SVG, PNG or JPEG.

What does the Mermaid preview do?

• Every Mermaid diagram type, Mermaid 12
• Strict mode: no scripts, links can't run code
• Light, dark, neutral and forest themes
• Save as SVG, PNG or JPEG
• Errors with the line number
• Turn JSON into an ER diagram first with JSON to ER diagram

Frequently asked questions

Is my diagram uploaded?

No. Mermaid runs in your browser; the code and the picture stay on your device.

Why does it take a moment the first time?

Mermaid is a large library, so Bracely loads it only when you open this tool. After that your browser keeps it.

More JSON tools

Bracely has 93 JSON tools in one page. Related ones:

• JSON Viewer
• JSON table viewer
• JSON visualizer
• JSON to chart
• GeoJSON viewer
• JSON size analyzer
• HTML & Markdown preview
• JSON column viewer
• JSON image viewer
• JSON Minifier
• Sort JSON
• Hex viewer
• API tester
• JSON Formatter
• JSON Validator
• JSON Repair
• JSON Diff
• JSON to YAML
• JSON to CSV
• jq Playground

Runs entirely in your browser. Nothing you paste is uploaded. Made by Saurabh Pagrut · About · Privacy policy
Last updated 22 October 2026 · Version 5.1 · Changelog
Saurabh Pagrut on GitHub · LinkedIn · X · YouTube · Instagram