What is a Flowchart diagram?
Branching processes, decision trees, request paths. The most-used diagram type — and the entry point for most teams adopting diagrams-as-code.
Use a Flowchart when…
Branching processes with decision points
Request paths and onboarding flows
Decision trees in design docs
The minimal syntax
Copy this and you have a working flowchart. Build from here.
flowchart TD Start([User opens app]) --> Auth{Logged in?} Auth -- yes --> Home[Home feed] Auth -- no --> Login[Login screen] Login --> Auth Home --> Compose[Compose post] Compose --> Publish[(Database)] Publish --> Home
Patterns worth memorizing
Subgraphs
Group related nodes inside a `subgraph` block to visually cluster a service or layer.
Link styling
Use `linkStyle 3 stroke:#888,stroke-width:1px` to dim edges that are less important.
ELK renderer
Add `%%{init: {"flowchart": {"defaultRenderer": "elk"}}}%%` for cleaner layouts on large graphs.
The things that will trip you up
Mermaid silently ignores misspellings — these are the failures we see most.
- 01
Nodes can't contain `(`, `)`, or `[` in labels — wrap them in `"…"`.
- 02
TD vs LR is a single-character change (`TD` top-down, `LR` left-right) — most non-trivial graphs read better as LR.
- 03
Mermaid silently ignores misspelled directives; if nothing changes, double-check the spelling.