Canvas Preview
Ready|Flowchart|6 lines · 116 chars
Zoom: 100%

FEATURES

Mermaid Diagrams, Beautifully Themed

Canvas Rendering

Mermaid diagrams are rendered onto an HTML5 canvas with high-DPI support, enabling smooth zoom, pan and pixel-perfect export.

Theme Presets

One-click canvas themes — Clean White, Warm Paper, Ocean Depth, Forest Calm and Dark Pro — restyle your diagram instantly.

Visual Effects

Add drop shadows, glow, background gradients, grid overlays and ambient particles to make your diagrams stand out.

High-Res Export

Export as PNG, JPG, WebP or SVG at 1x, 2x or 4x resolution. Everything runs locally — your diagrams never leave the browser.

HOW IT WORKS

From Code to Canvas in Three Steps

1

Write Mermaid Code

Type or paste Mermaid syntax in the editor — flowcharts, sequence diagrams, Gantt charts, mind maps and more are supported.

2

Pick a Theme

Choose a canvas theme and tune effects like shadows, glow and gradients to match your document or presentation style.

3

Export Anywhere

Download a high-resolution PNG or vector SVG, or copy the image straight to your clipboard for docs, slides and wikis.

FAQ

Frequently Asked Questions

Is my diagram data sent to a server?

No. All parsing, rendering and exporting happens entirely in your browser. Your Mermaid code and diagrams never leave your device.

Which Mermaid diagram types are supported?

All diagram types supported by Mermaid.js: flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, mind maps, timelines and more.

Can I export a transparent background?

Yes. Choose the transparent background option when exporting to PNG or WebP to drop the diagram into slides or documents with any background.