Mermaid Flowchart Syntax
A flowchart declaration opens with graph or flowchart followed by a direction, then one relationship per line.
| Construct | Meaning | Example |
|---|---|---|
graph TD | Top-down layout. TB is a synonym. | graph TD
A --> B |
graph LR | Left-to-right layout. | graph LR
A --> B |
A[Label] | Rectangle node. | graph TD
A[Rectangle] |
A(Label) | Rounded node. | graph TD
A(Rounded) |
A{Label} | Decision diamond. | graph TD
A{Decision} |
A[(Label)] | Cylinder, conventionally a datastore. | graph TD
A[(Database)] |
A -->|text| B | Labelled arrow. | graph TD
A -->|yes| B |
style A fill:#f00 | Override one node's colours. | graph TD
A[Red]
style A fill:#ff0000 |
Everything together
Mermaid source
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[Ship it]
B -->|No| D[Debug]
D --> A
style C fill:#667eea,color:#ffffff