Mermaid
Type Mermaid syntax and see the diagram rendered as SVG.
Tips
- Supports flowchart, sequence, gantt, class, state, pie, and journey diagrams.
- Download SVG saves the rendered diagram as a vector file.
- Mermaid runs entirely in your browser — nothing is uploaded.
Mermaid in your browser
Mermaid is a text-based diagram syntax that compiles to SVG. Instead of dragging shapes in a graphical editor, you describe the diagram in a few lines of text and let the renderer lay it out. The result is diff-friendly, version-controllable, and easy to regenerate when the underlying system changes.
Diagram types you can render
- Flowcharts (
graph TD,graph LR) — boxes and arrows, the most common everyday diagram. - Sequence diagrams — message exchanges between actors, perfect for explaining API flows.
- Class and ER diagrams — for object models and database schemas.
- Gantt charts and timelines — lightweight scheduling without a project management tool.
- State, journey, mind-map, git-graph — newer types added in recent releases; check the upstream docs for syntax.
How the rendering works
Mermaid runs entirely in JavaScript: it parses the text into an internal model, asks dagre or its built-in layout engine to position the nodes, and then emits an SVG element. Everything happens in your browser, so the diagrams you paste here are never sent anywhere. Once rendered, the SVG can be saved or screenshotted like any other vector image.
Tips for clean diagrams
Keep node labels short — the layout algorithm uses label width as a hint, so a long label forces the surrounding boxes to spread out. For complex flows, prefer graph TD (top-down) over graph LR (left-right): vertical layouts scale better when you add nodes later.