Mermaid flowchart editor
Write Mermaid, see the flowchart instantly. Syntax errors are shown next to the code while the last good version stays on screen, so you never lose the picture while typing.
Mermaid code for this chart
flowchart TD
A(["Push to main"]) --> B["Run tests"]
B --> C{"Tests pass?"}
C -->|"No"| D["Notify the author"]
D --> A
C -->|"Yes"| E[["Build container image"]]
E --> F[("Push to registry")]
F --> G{"Is it a release tag?"}
G -->|"Yes"| H["Deploy to production"]
G -->|"No"| I["Deploy to staging"]
H --> J(["Done"])
I --> JMermaid flowchart syntax cheat sheet
Everything you need for flowcharts, from the official Mermaid documentation, condensed. Wrap labels in double quotes and you avoid almost every parse error.
| Code | Result |
|---|---|
flowchart TD | Direction: TD/TB top-down, LR left-right, BT, RL |
A["Text"] | Rectangle (process) |
A("Text") | Rounded rectangle |
A(["Text"]) | Stadium / terminator |
A{"Text"} | Diamond (decision) |
A[/"Text"/] | Parallelogram (input/output) |
A[("Text")] | Cylinder (database) |
A[["Text"]] | Subroutine |
A(("Text")) | Circle |
A{{"Text"}} | Hexagon (preparation) |
A@{ shape: doc, label: "Text" } | Any named shape (doc, delay, sl-rect…) |
A --> B | Arrow |
A -->|"Yes"| B | Arrow with label |
A --- B | Line without arrowhead |
A -.-> B | Dotted arrow |
A ==> B | Thick arrow |
A --> B --> C | Chain on one line |
A & B --> C | Several sources at once |
subgraph X["Title"] … end | Group / swimlane |
%% comment | Comment line |
classDef hot fill:#fc0 | Define a style |
class A hot | Apply a style |
Mermaid or plain steps?
Mermaid gives you full control: custom node ids, styles, dotted lines and arbitrary connections. Plain steps in the flowchart maker are faster when you just want a correct chart, and they compile to Mermaid you can copy here. Both approaches produce the same kind of chart and export the same way.
Questions people ask
Is this a Mermaid live editor?
Yes, for flowcharts. Type or paste Mermaid flowchart code and the diagram redraws as you type, using the official open-source Mermaid library (v12) in your browser. Export as PNG, SVG or a .mmd file.
Does it support other Mermaid diagram types?
This editor is tuned for flowchart / graph diagrams, which is what FlowBuilder is for. Sequence, class and Gantt diagrams need the Mermaid project’s own editor.
How do I put a Mermaid flowchart on GitHub?
In any Markdown file, issue or pull request, write three backticks followed by mermaid, paste the code, and close with three backticks. GitHub renders it automatically; GitLab, Notion, Obsidian and many docs tools do the same.
Why is my Mermaid chart showing a syntax error?
The most common causes: a label containing brackets or quotes without being wrapped in double quotes, the reserved word end used as a node label in lower case, or a missing flowchart TD first line. Wrapping every label in double quotes fixes most errors.
Can I write steps without learning Mermaid?
Yes. Delete the code and type plain steps, one per line. The editor switches to plain mode and shows you the Mermaid it generates under “Mermaid code for this chart”.