Mermaid Diagram Editor with Live Preview
Write Mermaid syntax on one side and watch the diagram render live on the other. Prettify ships eight starter templates and exports your finished diagram to SVG or PNG, all rendered locally in your browser. Open the editor and start typing, or drop in a template.
Live preview as you type
The editor splits into source on one side and a rendered diagram on the other, and the preview re-renders as you edit so you see the effect of each line immediately. When the syntax is off, the error is surfaced instead of leaving you with a blank canvas and no clue why.
That tight loop makes Mermaid approachable even if you do not remember every keyword, because the diagram itself tells you when a change worked.
Templates and export
Eight starter templates cover the common diagram types: flowchart, sequence, class, state, entity-relationship, Gantt, pie, and mindmap. Insert one, then edit the labels and nodes to fit your case rather than writing the boilerplate from scratch.
When the diagram is ready, export it to SVG for a crisp vector you can drop into docs or slides, or to PNG for a raster image. Both export formats are free and require no account.
Local and offline-friendly
The diagram renders entirely in your browser, so a diagram of internal architecture or a private workflow is never uploaded. As a Progressive Web App, Prettify keeps working offline after your first visit, so you can sketch diagrams without a connection.
Frequently asked questions
Is the Mermaid editor free?
Yes. Writing Mermaid, the live preview, the starter templates, and SVG and PNG export are all free with no sign-up. Pro adds cross-format extras like side-by-side split view and saved history.
Does my diagram source get uploaded?
No. The diagram is rendered locally in your browser, so the source and the image stay on your device and are never sent to a server.
Which diagram types are supported?
The templates cover flowcharts, sequence, class, state, entity-relationship, Gantt, pie, and mindmap diagrams, plus any other diagram type the Mermaid syntax supports.
Can I export the diagram as an image?
Yes. You can export to SVG for a scalable vector or to PNG for a raster image, and both options are free without an account.
Does it work without an internet connection?
Yes. Prettify is a Progressive Web App that keeps working offline after the first visit, so the editor and preview run without a connection.