Fast, static-first
Astro static site. Mermaid.js loads only when you open the preview tool, so the rest of the site stays light.
Mermaid, rendered instantly. Diagrams as code, kept private.
Paste Mermaid syntax and watch the SVG appear as you type. Export PNG or SVG, copy a shareable URL, or learn the syntax for any of the eleven diagram types — without leaving the browser.
Pick a diagram type
Flowchart
Boxes and arrows for processes, decisions, and pipelines.
Learn →Sequence
Time-ordered messages between actors and services.
Learn →Class
Object-oriented classes, attributes, and relationships.
Learn →State
State machines, UI flows, and lifecycle transitions.
Learn →ER
Entity-relationship diagrams for database schemas.
Learn →Gantt
Timelines with sections, dependencies, and milestones.
Learn →Pie
Quick proportional charts.
Learn →Mindmap
Hierarchical idea maps and brainstorms.
Learn →Private by design
Rendering happens in your browser. We never receive your diagram source — not even for share URLs (we use the URL fragment).
More than a tool
Each diagram type ships with a guide, a cheat sheet, and worked examples so you can learn while you sketch.
Strict-mode rendering
Mermaid runs with securityLevel: 'strict'. Even pasted snippets that try to inject scripts are sanitised.
Why text-based diagrams
Diagrams as code live in pull requests, render automatically in GitHub READMEs, and diff cleanly when you change them. They are versioned, they survive a laptop crash, and they take seconds to share. Mermaid Preview is the workshop where you draft, debug, and export those diagrams.