Draw flowcharts, sequence diagrams, Gantt charts, class diagrams, and more with Mermaid. Type the text, see the diagram, copy the SVG. Free and private — runs in your browser.
How it works
Mermaid turns plain text into diagrams. Pick a starting point from theExamples menu, then edit the text on the left — the diagram on the right re-renders as you type. Use the Split / Write / Preview toggle to focus on one side, and drag the divider between the panes to resize them.
Drag the preview to pan, hold Ctrl (or Cmd) and scroll to zoom, or use the − / + buttons. “Copy” puts the Mermaid text on your clipboard; “Save .mmd” downloads it. Short diagrams are also saved in the URL, so a link reproduces exactly what you drew.
Frequently asked questions
What kinds of diagrams can I make?
Anything Mermaid supports: flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, git graphs, mindmaps, and user journeys. The Examples menu has a starter for each.
Is my diagram sent to a server?
No. Everything runs in your browser. Nothing is uploaded, and closing the tab is the only way to lose a diagram you haven’t saved or copied.
How do I share a diagram?
Short diagrams are encoded in the page URL — copy the address bar and share it. For anything longer, use “Copy” or “Save .mmd” and share the text.
The diagram looks cut off. How do I see all of it?
Drag the preview to pan, or hold Ctrl/Cmd and scroll to zoom. The “Reset” button in the preview header restores the original size and position.
Why does an error appear under the preview?
Mermaid is a strict syntax. The message under the preview tells you what it couldn’t parse — usually a missing colon, a stray character, or an unsupported shape. Fix the line it points to and the diagram re-renders automatically.