Overview
Renders Mermaid diagram source into a live, zoomable SVG — flowcharts, sequence and class diagrams, ER diagrams, gantt charts, pie charts, gitGraphs, and everything else Mermaid 11 supports — with pan, fullscreen, and example presets to start from.
How It Works
Type or paste Mermaid source in the editor; rendering is automatic and debounced, so mid-typing pauses do not thrash the renderer. Zoom with the mouse wheel or the plus and minus buttons (0.2× to 4×), pan by dragging or with the directional pad, and open Maximize for a fullscreen modal. Copy Code copies the source, Copy SVG copies the rendered markup, and Export SVG downloads diagram.svg.
Step-by-Step Usage Guide
- Start from an example preset or paste your own Mermaid source.
- Adjust the diagram until the preview renders without the syntax-error badge.
- Zoom and pan to inspect, or Maximize for a full-screen look.
- Copy the source into your repo, or export the SVG for docs and slides.
Technical Specifications & Standards
Diagrams are rendered by the real Mermaid library (v11, lazy-loaded so it does not weigh down the rest of the site) into an SVG whose root is rewritten to be responsive: fixed width and height are stripped in favour of a viewBox-driven layout. The theme follows the site's dark or light mode through Mermaid's base theme variables — there is no separate theme picker. Syntax errors are caught and displayed in place of the diagram, so a bad arrow never blanks the canvas silently.
Targeted Use Cases
- Rendering architecture and data-flow diagrams for documentation sites.
- Previewing Mermaid blocks destined for GitHub READMEs and pull requests, which render the syntax natively.
- Drawing ER diagrams for a schema discussion without installing anything.
- Exporting an SVG for a slide deck or design review.
Notes & Gotchas
- Export is SVG only — there is no PNG download. SVG is the right format for docs and most slides anyway; rasterise it externally if you must.
- The theme follows the site's light/dark setting rather than a picker. If a diagram must look a specific way, set colours explicitly in the Mermaid source.
- Rendering is debounced by roughly 600 ms, and a syntax error replaces the preview with the parser's message — it names the offending construct, so read it.
- Very dense diagrams are easier to review in Maximize mode, where the zoom steps are larger.
Frequently Asked Questions
Which diagram types are supported?
Anything Mermaid 11 renders: flowchart, sequence, class, ER, gantt, pie, gitGraph, state diagrams, and more — the tool does not restrict the syntax.
Can I download a PNG?
No. Export SVG produces a vector file (diagram.svg) that stays sharp at any size; convert it in an image tool if you need a raster.
Does it send my diagram anywhere?
No. Rendering happens in your browser via the bundled Mermaid library.
Why did my diagram disappear?
A syntax error replaced it. The red message says what Mermaid could not parse; fix that line and the diagram returns.