Mermaid preview

Choose an example or enter Mermaid code, then Render (Ctrl/⌘+Enter in the editor). After the first request, Live updates follow edits after a short pause; switch Live off to render manually. Normal Enter keeps a new line. An edit invalidates the old preview and download immediately.

Examples cover flowchart, sequence, class, Gantt, pie, state and entity-relationship syntax. Labels are editable demonstration data. Syntax errors appear by the editor, with a line number when available. Correct the code and render again.

Fit scales the diagram into the available width and height without distorting it. Turn it off for natural-size local scrolling. SVG download contains the current successful diagram with a viewBox and explicit dimensions. It is a vector diagram, not a PDF or an editable office document. Some SVG viewers differ in their support for HTML labels.

Mermaid 10.9.5 loads from jsDelivr on the first render. Diagram processing runs in your browser; the library request reaches the CDN but diagram code is not sent there. A connection/CSP failure can be retried with Render; a browser-cached module failure may require reloading the page. Only your raw code and the Live/Fit settings stay in this browser after navigation and reload; diagrams and exports are not stored. Render again to rebuild the preview. Source is limited to 20000 characters and the renderer to 500 edges; large diagrams can still take time. No hard interrupt for a running layout. Strict mode and sanitized output are used; external embedded images are omitted.