Answer: Type Mermaid code and the diagram redraws about 400 ms after you stop typing. Six built-in examples cover flowcharts, sequence, class, ER and state diagrams, and other Mermaid 11 types such as gantt and pie render when you paste them in. Export an SVG or a 2× PNG. Nothing is saved, so copy your code before you close the tab.
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.
Every type shares the one-statement-per-line habit, but the arrows and brackets change from one to the next. This cheat sheet covers the pieces you'll reach for most, taken from the official Mermaid docs.
| Diagram | Core syntax | Example line |
|---|---|---|
| Flowchart | Shapes: [ ] box, ( ) rounded, { } decision, (( )) circle, [( )] database. Edges: --> arrow, --- line, -.-> dotted, ==> thick. Group with subgraph … end. | A[Start] ==> B{OK?} |
| Sequence | ->> solid call, -->> dotted reply, -x cross at the end, -) async. Blocks: loop, alt/else, opt, par. autonumber numbers every message. | W->>P: Charge card |
| Class | <|-- inheritance, *-- composition, o-- aggregation, --> association, ..> dependency, <|.. realization. | Shape <|-- Circle |
| Entity relationship | Ends: || exactly one, |o zero or one, }| one or more, }o zero or more. -- identifying, .. non-identifying. Attributes: type name PK, FK or UK. | CUSTOMER ||--o{ ORDER : places |
| State | [*] start and end, A --> B : event, state Name { } for composite states, <<choice>>, <<fork>> and <<join>>. | Review --> Approved : approve |
| Gantt | dateFormat YYYY-MM-DD, section headings, tasks as name :tags, id, start, length. Start can be after id. Tags: done, active, crit, milestone. | Build :crit, b1, after a1, 3d |
| Pie | pie title Your title, then one "Label" : value per slice. Add showData after pie to print the numbers. | "Mobile" : 62 |
| Mind map | Indentation sets the hierarchy, and the first node is the root. Shapes: [ ] square, ( ) rounded, (( )) circle, {{ }} hexagon. | root((Launch plan)) |
Only the first five types have a ready-made example in the dropdown. Gantt, pie and mind map code still renders here because the page loads the full Mermaid 11 library, so paste a sample from the docs and edit from there.
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 Mermaid's own error message when something breaks, usually with the line number and a pointer to the spot it choked on. 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.
Here's how the page behaves, read straight from its code, so there are no surprises when you export or reload.
| Action | What the page does |
|---|---|
| Typing in the editor | Waits until you've paused for 400 ms, then re-renders. The Render button does the same thing on demand. |
| Picking an example | Replaces everything in the editor with that example and renders it straight away. There's no undo prompt, so copy your own code first. |
| A syntax error | The status line turns red and shows Mermaid's message. The preview keeps the last diagram that rendered successfully. |
| Download SVG | Saves diagram.svg from whatever is in the preview, with an XML header added. No background is painted in, and it stays sharp at any size. |
| Download PNG | Saves diagram.png at twice the diagram's natural size on a solid dark background (#0f1117), matching the preview. |
| Copy code | Copies the editor text to your clipboard. If the browser blocks clipboard access, the status line tells you to select the text by hand. |
| Reloading the page | Nothing is kept. The editor goes back to the CI pipeline example, and nothing is written to local storage or a server. |
| First visit | Mermaid 11 loads from the jsDelivr CDN. If that's blocked, the status line says the library couldn't load. |
For anything that lives on a screen and might get zoomed, pick SVG. It's a vector file, so lines and text stay crisp in a wiki, a design doc or a README. One catch: the suite renders with Mermaid's dark theme, so labels and lines come out in light colours, and the SVG has no background of its own. Drop it on a white page and some text can fade into the page. Check it once before you publish.
PNG is the safer pick for slides, tickets and chat. The page draws the diagram onto a dark canvas at 2× size, so it looks clean on high-density screens and doesn't depend on the background behind it. You can't edit a PNG's text later, though, so keep the Mermaid source too. Paste it into a ```mermaid block in GitHub or GitLab Markdown and it renders there as well.
end in a flowchart node. Mermaid reads lowercase end as the close of a block. Capitalise it (End) or wrap the label in quotes.A[Retry (3x)] confuses the parser. Quote the text instead: A["Retry (3x)"].o or x right after a link. A---oB draws a circle edge, not a link to node oB. Add a space or capitalise the ID.flowchart TD or sequenceDiagram, Mermaid reports that no diagram type was detected and nothing draws.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, and 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, user journeys, quadrant charts, git graphs, 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.
No. The editor doesn't write anything to your browser's storage or to a server, so a reload puts the CI pipeline example back. Click Copy code before you leave and keep the text somewhere safe, ideally next to the project it documents.
The PNG export fills the canvas with the same dark colour as the preview, then draws the diagram at twice its natural size. That keeps the light text readable. If you need a transparent file, download the SVG instead, which has no background of its own.
When the code fails to parse, the page leaves the last good render in the preview and shows the error in red under the editor. Both download buttons export that last good diagram, so fix the error first if you want your latest change in the file.
Not on a first visit. The Mermaid library loads from the jsDelivr CDN when the page opens, and the status line warns you if that request is blocked. Once it's loaded, rendering and exporting happen in your browser and your diagram text isn't sent anywhere.