Render Mermaid diagrams without a backend
Drop your Mermaid source in the box. It re-renders as you type (with a short debounce) and tells you exactly what’s wrong if the syntax breaks. Export the result as SVG for the docs site or PNG to drop into a slide.
Notes
- Live render. The diagram redraws ~350 ms after you stop typing. Hit Render to force an immediate redraw.
- Errors. Mermaid’s own parser message is shown verbatim — usually it points at the line and token where parsing broke.
- PNG export. The SVG is rasterised in a
<canvas>at 2× resolution against a white background, so it looks crisp in slides without a transparent quirk. For docs, prefer the SVG download — it scales infinitely and stays small. - What gets loaded. The Mermaid library is fetched once from
cdn.jsdelivr.net(a public CDN). Your diagram source never leaves the page after that — rendering happens entirely in the browser. - Security. Mermaid runs with
securityLevel: 'strict', which strips inline HTML and click handlers from labels. Paste diagrams from untrusted sources without worrying about embedded scripts.