How to make a flowchart
- Start from the example flowchart. Each line connects two steps:
A[Start] --> B{Is it paid?}draws a box, a diamond and an arrow between them. - Give each step a short ID (A, B, C or words) and a label in brackets. The shape depends on the brackets:
[box],(rounded),{decision},([stadium])for start and end, and((circle)). - Label arrows with
A -- Yes --> B. Change the first line fromflowchart TD(top-down) toflowchart LRfor left to right. - Download the result as SVG for documents and slides, or PNG for chats and email.
Why text-based flowcharts are faster
In drag-and-drop tools, most time goes into aligning boxes and rerouting arrows every time something changes. Here you describe the steps and their connections and the layout is calculated automatically, so adding a step in the middle takes one line. Flowcharts are ideal for documenting business processes, onboarding steps, support scripts, decision trees, algorithms for homework, and user flows for apps and websites.
Keep labels short, use decisions (diamonds) for yes/no questions, and limit a chart to about 15 steps; split bigger processes into several charts. The same text works in GitHub, GitLab, Notion and Obsidian, which render Mermaid natively.
Diagrams are rendered in your browser, and your text is saved only on your device.
FAQ
How do I make a decision box?
Use curly braces: B{Approved?}. Then draw two labelled arrows from it, such as B -- Yes --> C and B -- No --> D.
Can I change the colours?
Pick a theme from the menu, or style a node with a line such as style A fill:#ffe4b5,stroke:#333.
How do I make the chart go left to right?
Change the first line to flowchart LR.