How to Create a Mermaid Flowchart
Learn how to turn a process or decision tree into a readable Mermaid flowchart with code examples and practical tips.
By Mermaid Studio Team · Published August 2, 2026 · Updated August 2, 2026
Start with the story, not the syntax
A useful flowchart answers one question for one audience. Before writing Mermaid code, decide whether the diagram explains a business process, a technical workflow, or a decision tree.
Write the first action, the expected outcome, and the decisions that can change the path. This keeps the finished diagram focused instead of turning it into a map of every possible detail.
- • Name steps with short action phrases
- • Use one decision per meaningful branch
- • Keep unrelated flows in separate diagrams
Write a basic flowchart
Mermaid flowcharts use nodes and arrows to express relationships. The direction after `flowchart` controls how the diagram is laid out.
A simple decision flow
flowchart TD
Start[Receive request] --> Review{Needs review?}
Review -- Yes --> Approve[Review request]
Review -- No --> Complete[Complete task]
Approve --> CompleteMake branches easy to scan
Use a diamond-shaped node for a decision and label each outgoing edge. Labels such as Yes, No, Approved, or Retry are more useful than unlabeled lines when someone is reading the diagram in a review.
If the flow becomes too wide, switch from left-to-right to top-to-bottom or split the process at a meaningful boundary.
Continue in the online editor
Once the structure is clear, open the Mermaid flowchart editor to preview the result, adjust the labels, and export the finished diagram.