Example flowchart code
This is the Mermaid source loaded in the editor above. Copy it into a Markdown file inside a ```mermaid block and GitHub, GitLab, Notion or Obsidian will render it.
flowchart TD
A([Start]) --> B[Open the signup form]
B --> C{Email valid?}
C -->|Yes| D[Create account]
C -->|No| E[Show error message]
E --> B
D --> F[(Users DB)]
D --> G[/Send welcome email/]
G --> H([Done])
subgraph Backend
D
F
end
classDef ok fill:#dcfce7,stroke:#16a34a,color:#14532d
class D,H okFlowchart syntax cheat sheet
| Syntax | What it does |
|---|---|
| flowchart TD | Start a flowchart. Direction: TD/TB (top-down), LR, RL or BT. |
| A[Text] | Rectangle node with id A. Other shapes: (rounded), ([stadium]), {decision}, [(database)], ((circle)), [/parallelogram/]. |
| A --> B | Arrow from A to B. Also: --- (line), -.-> (dotted), ==> (thick), --x and --o (cross/circle ends). |
| A -->|label| B | Arrow with a text label. Equivalent form: A -- label --> B. |
| subgraph Name ... end | Group nodes inside a titled box. |
| classDef c fill:#f9f; class A c | Define a reusable style and apply it to nodes. |
| %% comment | A line comment, ignored by the renderer. |
How to make a Mermaid flowchart
- 1Start the code with flowchart TD for top-down or flowchart LR for left-to-right.
- 2Add nodes with an ID and a label, such as A[Start].
- 3Connect nodes with arrows such as A --> B.
- 4Label decisions with A -->|Yes| B and group steps in subgraphs.
- 5Export the flowchart as SVG or PNG, or copy a share link.
Direction and node shapes
The header sets the direction: TB or TD (top to bottom), BT (bottom to top), LR (left to right) and RL (right to left). LR usually fits better on wide screens and slides.
The brackets around a label set the shape: A[Rectangle], B(Rounded), C([Stadium]), D[(Database)], E((Circle)), F{Decision} for a diamond and G{{Hexagon}}. Use the diamond for yes/no decisions so readers recognise them instantly.
Arrows and link labels
--> draws an arrow, --- a plain line, -.-> a dotted arrow and ==> a thick arrow. Add text with A -->|label| B or A -- label --> B.
You can chain links on one line, as in A --> B --> C, and fan out with A --> B & C.
Subgraphs and styling
Group related nodes with subgraph Title ... end. Subgraphs can contain their own direction statement and can be linked to like nodes.
Define reusable styles with classDef highlight fill:#fde68a,stroke:#b45309 and apply them with class A highlight or the shorthand A:::highlight.