Live Mermaid Preview
Type Mermaid syntax on the left, see the rendered diagram on the right.
Use Examples to load a sample for any diagram type, or
paste your own. The render runs locally in strict mode —
no server, no surprises.
What is Mermaid?
Mermaid is a JavaScript library that turns short text descriptions into rendered diagrams. GitHub, GitLab, Notion, Obsidian, Hugo, Jekyll, and many documentation tools render Mermaid blocks automatically, which is why it has become the de-facto "diagrams as code" syntax.
What you can do here
- Render any of the eleven Mermaid diagram types as you type.
- Switch themes between default, dark, forest, and neutral.
- Export the result as SVG (vector) or PNG (raster).
- Share a URL that encodes the diagram in the fragment — the diagram source never reaches our server.
- Learn from the per-type guides under Diagrams.
Privacy notes
Rendering runs entirely in your browser. The Mermaid library is bundled
from node_modules at build time, not fetched from a CDN at
runtime. The "Copy share URL" feature stores the diagram in the URL
fragment (#code=...); fragments are never transmitted to
the server, so your diagram source is not in our access logs.
See our Privacy Policy.