Write diagrams as text, watch them render live
flowchart TD), write one statement per line, and the renderer draws the picture as you type. This suite runs Mermaid 11 entirely in your browser — no signup, no server round-trip, and the SVG or PNG export is generated locally. GitHub, GitLab, and Notion render the same syntax natively, so what you build here pastes straight into a README.
| Diagram | First line | Best for |
|---|---|---|
| Flowchart | flowchart TD | Process steps, decisions, pipelines |
| Sequence | sequenceDiagram | Message order between services or people |
| Class | classDiagram | Object-oriented design, UML class models |
| Entity relationship | erDiagram | Database schemas and table relations |
| State | stateDiagram-v2 | Lifecycle of one object or ticket |
| Gantt | gantt | Task schedules and dependencies |
| Pie | pie | Share-of-total comparisons |
| Mind map | mindmap | Brainstorms and topic trees |
Direction codes for flowcharts: TD/TB top-down, LR left-right, BT and RL for the reverses. Mermaid ships more types beyond these eight (timeline, journey, quadrant, gitGraph, sankey); they use the same single-statement-per-line style.
Diagrams-as-code replaces drag-and-drop canvas editors with a text format. The code is the source of truth: it diffs line by line in code review, lives in the same repository as the thing it documents, and regenerates the identical image on every machine. Mermaid is the format GitHub chose for native rendering inside Markdown, which is why so many teams already have it in their toolchain.
First, the opening line names the diagram type. Second, each following line makes one statement — declare a node, connect two nodes, or open a block like loop or alt. Third, IDs are separate from labels: you write A[Collect payment] once and refer to it as A afterward, which keeps long diagrams readable.
Pick an example from the dropdown or clear the editor and start typing. Rendering fires as you pause, and the status line under the editor shows the exact parse error when something breaks, with the character position — fix the line and the preview redraws. The SVG export is what you want for documentation; PNG is handy for slides. For deeper dives into one diagram type, use the sequence diagram maker, class diagram maker, and ER diagram maker pages, which carry full syntax tables for their type.
Here is the CI pipeline example from the editor, annotated. It renders a flowchart with 5 nodes and 5 arrows: commit feeds test, test splits on a decision diamond into a publish branch and a failure branch, and the notify step loops back to commit with a dashed retry edge.
flowchart LR — flowchart, laid out left to rightA[Commit] --> B[Test] — two nodes, one edgeB --> C{Pass?} — braces make a decision diamondC -->|yes| D[Publish] — the label on the edge goes between pipesC -->|no| E[Notify] -.-> A — a dashed edge for the retry pathCount the pieces and you can predict the drawing before it renders: five boxes or diamonds, five connections. That's the whole mental model — the code states the structure, and layout is automatic.
Yes. Mermaid is open-source JavaScript released under the MIT license, so it is free for personal and commercial use with no watermark. This page runs that same library entirely in your browser — your diagram text is never uploaded anywhere.
Declare the diagram type on the first line (flowchart TD, sequenceDiagram, classDiagram, or erDiagram), then write one statement per line. Nodes are connected with arrows like A --> B. The renderer draws the picture as you type, so you see syntax mistakes immediately instead of after an export.
Yes. The buttons above the preview export the current diagram as an SVG file or a 2x-resolution PNG, both produced locally in your browser. The SVG stays crisp at any zoom for docs and wikis; the PNG drops straight into slides and chat apps.
Flowcharts, sequence diagrams, class diagrams, ER diagrams, state diagrams, gantt charts, pie charts, mind maps, timelines, org charts, user journeys, quadrant charts, and more. This suite ships dedicated pages for the four most-used types and loads the full library, so most other types paste in and render too.
GitHub, GitLab, and Notion all render Mermaid code blocks natively, and many documentation systems have plugins for it. That makes it a good format to keep in version control: the diagram is reviewable text, diffs show exactly which line changed, and anyone can regenerate the image.