Write Mermaid code on the left, see the rendered diagram on the right. Export as PNG or SVG. Supports flowcharts, sequence diagrams, Gantt charts, and more.
A Mermaid diagram viewer renders Mermaid's text-based diagram syntax into visual charts in real time. Instead of drawing boxes and arrows by hand, you describe a flowchart, sequence, state, Gantt, pie, or class diagram in plain text and see it rendered instantly.
Type or paste Mermaid code on the left and the diagram appears on the right as you edit. When it looks right, export it as a high-resolution PNG, a scalable SVG, or copy the SVG markup straight into Figma, a README, or a slide deck. All rendering runs locally in your browser with Mermaid.js — your diagram code is never sent to a server.
Yes. The Mermaid viewer is completely free with unlimited diagrams, no account, no watermarks, and no hidden fees.
All rendering happens in your browser using Mermaid.js. Your diagram code is never sent to any server.
Flowcharts, sequence diagrams, state diagrams, Gantt charts, pie charts, and class diagrams. All standard Mermaid syntax is supported.
Yes. You can download diagrams as PNG (raster) or SVG (vector), or copy the SVG markup to your clipboard for use in other tools.
Both use the same Mermaid.js library for rendering. This tool is lighter, loads faster, and includes one-click PNG/SVG export. For rendering Mermaid diagrams inside Markdown files on Mac, try MacMD Viewer.