About Mermaid Diagram Editor
Edit Mermaid flowcharts, sequence diagrams, class diagrams, Gantt charts, and more with a live preview that updates as you type. Pick a template to get started, then tweak the source in the panel. Download the rendered diagram as SVG when you are ready to drop it into docs or slides.
Everything runs in your browser — GitCircle does not upload your diagram source.
How to use it
- Choose a template (flowchart, sequence, ER, Gantt, git graph, and others).
- Edit the Mermaid source on the left; the preview refreshes automatically.
- Press ⌘/Ctrl + Enter to force an immediate re-render.
- Drag the vertical bar between source and preview (desktop) to resize panes.
- Drag the preview to pan; zoom defaults to Auto-fit (fits the whole diagram in the preview; switch to Manual for − / +).
- Pick a diagram theme (Classic, Dark, Neo, Redux, and more) for Mermaid colors and export background.
- Share copies a link to this page (with
#m=…in the URL when the diagram source is small enough to embed). - Copy source, Copy PNG, Download SVG, or Download PNG (auto or custom size).
- Your draft auto-saves while you edit. Open Diagram library (below the editor) to save by name, load with one click, or delete — saving the same name updates that entry.
- Reset template restores the selected starter example.
Supported diagram types
Templates cover common Mermaid diagram types: flowchart, sequence, class, state, entity-relationship, Gantt, git graph, and mindmap. Any valid Mermaid syntax in the editor will render in the preview.