Flowchart
Map any process, decision or algorithm
What is a Flowchart?
A flowchart shows the steps of a process and the decisions between them. It is the most universal diagram: onboarding flows, algorithms, approval chains, troubleshooting guides — if it has steps and choices, a flowchart can show it.
Flowcharts turn up wherever a process has to be agreed on before it is built: RFCs, runbooks, onboarding docs, support scripts. Their strength is branching — every path a request can take, including the ones nobody planned for. Their weakness is time and ownership: a flowchart says what happens next, never who does it or how long it takes. Add a subgraph per team, or switch diagram type.
Live example
flowchart TD
A([Start]) --> B{Payment valid?}
B -->|Yes| C[Reserve stock]
B -->|No| D[Show error]
C --> E{In stock?}
E -->|Yes| F[Confirm order]
E -->|No| G[Notify customer]
F --> H([Done])
D --> H
G --> HWhen to use it
Common mistakes
A node named end breaks parsing
The word end closes a subgraph, so a node using it as an identifier is a parse error rather than a warning. Give the node a different id and put the word in the label instead: done([End]).
Unquoted parentheses in a label
A[Pay (card)] fails, because Mermaid reads the inner parenthesis as another shape delimiter. Wrap the whole label in double quotes — A["Pay (card)"] — which also covers quotes, hashes and semicolons.
A crossing edge overrides subgraph direction
direction LR inside a subgraph is ignored as soon as an edge starts or ends on one of its nodes: the box reverts to the parent direction. Point the edge at the subgraph id instead and the inner direction survives.
Basic syntax
flowchart TD
A[Rectangle] --> B{Decision}
B -->|Yes| C([Rounded])
B -->|No| D[(Database)]flowchart LRThe first line sets the layout direction: TD or TB for top-down, LR left to right, BT and RL for the reverse. Long chains read better as LR.
B -->|Yes| C B -.->|timeout| DA label between pipes explains why a branch is taken. Dotted arrows mark exceptional paths, and thick arrows written ==> mark the nominal one.
A["Pay (card)"] --> B{{Route}}Brackets choose the shape: [] rectangle, {} decision, () rounded, {{}} hexagon, [()] database. Quote any label containing parentheses or other Mermaid punctuation.
subgraph payments [Payment service] direction LR P1 --> P2 endA subgraph draws a labelled box around related nodes — one service, team or phase. Its own direction line lets that box flow sideways while the page flows down.
Questions about this diagram
When should I use a flowchart instead of a sequence diagram?
Use a flowchart for the logic of one process (steps and decisions). Use a sequence diagram when several actors or systems exchange messages over time.
Can the AI generate a flowchart from a text description?
Yes — describe the process in plain language (“user signs up, verifies email, then…”) and Mermaid Studio generates the complete flowchart, ready to edit.
Does GitHub render Mermaid flowcharts in a README?
Yes. Put the code in a fenced block tagged mermaid and GitHub renders it in READMEs, issues and pull requests; GitLab and Notion do the same. For tools without native support, export SVG or PNG.
Why does Mermaid place my nodes in an order I did not choose?
Layout is computed, not authored — there are no coordinates in the syntax. Influence it by changing the direction, grouping nodes into subgraphs, reordering your edge declarations, or adding an invisible link (A ~~~ B) to push one node below another.
What is the difference between graph and flowchart in Mermaid?
Both still parse in v11. graph is the original keyword; flowchart targets the newer renderer and is the one the documentation and the recent shapes are written against. Use flowchart for anything new.
How do I colour specific boxes in a flowchart?
Two ways: style A fill:#eef,stroke:#66f for a single node, or classDef warn fill:#fee followed by class B,C warn to reuse one style across several. Both are part of the source, so the colours survive PNG and SVG export.
Flowchart or another diagram type?
Flowchart or state diagram?
Ask what the boxes are. If they are actions — verbs someone performs — a flowchart is right. If they are conditions the same object sits in, waiting for an event, use a state diagram. An order lifecycle is states; the approval process around it is a flowchart.
Flowchart or mind map?
A mind map is a strict tree: one root, one parent per node, no labels on the branches, no loops. The moment two branches have to converge, or an arrow needs a condition written on it, you have outgrown mind maps and want a flowchart.
Create your Flowchart now
Describe it in plain language — the AI writes the Mermaid code for you.
Open Mermaid Studio