Mermaid Diagram Editor
Write Mermaid, see the diagram as you type, then print it or export SVG, PNG and Markdown
How it works
Type Mermaid text on the left and the diagram renders on the right as you type — flowcharts, sequence, class, state, entity-relationship, C4, architecture, Gantt, timeline, Kanban, mind map, Git graph, requirement, packet, pie, XY, quadrant, Sankey and radar diagrams, every type in Mermaid 12. Pick a template to start, switch themes or the hand-drawn look, and zoom and pan the preview. A syntax error names the line and leaves the last good drawing on screen while you fix it. Print opens a clean page with the diagram scaled to one sheet — A4 or Letter, portrait or landscape — optionally with the source appended; export gives a standalone SVG, a PNG at 2× or 4×, the image on the clipboard, a Markdown ```mermaid fence for GitHub, Notion or Obsidian, or the .mmd file. Rendering happens entirely in your browser; drafts are kept locally, and Share puts the diagram in the link.
Questions
Which Mermaid diagram types work?
Flowchart, sequence, class, state, entity-relationship, user journey, Gantt, pie, quadrant, requirement, Git graph, C4, mind map, timeline, Sankey, XY chart, packet, Kanban, architecture and radar — everything in Mermaid 12 except block diagrams (block-beta), which the current Mermaid release cannot render inside a React page.
How do I print a Mermaid diagram?
Press Print. The diagram opens on a clean white page scaled to fit one sheet in the paper size you chose, and the browser's print dialog lets you save it as a PDF or send it to a printer.
How do I export to PNG or SVG?
SVG downloads the vector file as rendered. PNG 2× and 4× rasterise it at two or four times screen resolution — 4× is right for slides and documents. 'Copy image' puts a PNG on the clipboard for pasting straight into chat or a doc.
Can I use the diagram in GitHub or Notion?
Yes — 'Copy Markdown' copies a ```mermaid code fence, which GitHub, GitLab, Notion, Obsidian and many wikis render natively.
Is anything uploaded?
No. Mermaid runs in your browser with its strict security level, your draft is saved only in this browser, and a Share link carries the diagram compressed in the URL.