📖 What is this tool?
A flowchart visualizes a process as a series of steps, decisions and connections. This builder uses Mermaid flowchart syntax: you define nodes (rectangles, diamonds, circles) and connect them with arrows, and the diagram renders live. Choose from Basic Flow, Dev Workflow and System Architecture templates. Use top-down (TD) or left-to-right (LR) layouts. Ideal for documenting CI/CD pipelines, onboarding processes, decision trees and API routing logic. Everything runs in your browser.
💡 Example
Input
flowchart TD
A[Start] --> B{Working?}
B -->|Yes| C[Ship it!]
B -->|No| D[Debug]
Output
Live flowchart with decision diamond and paths
🛠️ Common Use Cases
- Document business processes and workflows
- Map application logic and decision trees
- Create onboarding and troubleshooting guides
- Visualize CI/CD pipelines
- Document system architecture
📝 Mermaid Flowchart Syntax Reference
graph TD — top-down layout; use LR for left-to-rightA[Rectangle] — standard process nodeB{Diamond} — decision nodeC(Rounded) — rounded rectangleD((Circle)) — circular node (start/end)E[/Parallelogram/] — input/output nodeA --> B — solid arrowA -.-> B — dotted arrowA ==> B — thick arrowA -->|label| B — arrow with text labelsubgraph Title ... end — group nodes into a labeled boxstyle A fill:#0f0,stroke:#333 — custom node styling
⚠️ Common Mistakes
- Using reserved words as node IDs —
end, graph, subgraph and style cannot be node IDs; wrap them in quotes or choose different names
- Forgetting brackets around labels —
A alone creates a node labeled "A"; use A[My Label] for readable text
- Mixing up arrow syntax —
--> is a solid arrow, --- is a line with no head; adding too many dashes breaks the syntax
- Unclosed subgraphs — every
subgraph needs a matching end
❓ Frequently Asked Questions
What is the difference between TD and LR flowcharts? ▾
TD (Top-Down) flows vertically from top to bottom. LR (Left-Right) flows horizontally. Use TD for process flows and LR for system architecture or pipeline diagrams.
How do I add shapes to flowchart nodes? ▾
Use [] for rectangles, () for rounded, {} for diamonds (decisions), [/text/] for parallelograms. Example: A[Rectangle], B(Rounded), C{Diamond}
Can I style individual nodes? ▾
Yes — use classDef to define styles and the ::: operator to apply them. Example: classDef green fill:#0f0; A:::green[Styled Node]
How do I create a decision tree with Yes/No branches? ▾
Use a diamond node for the decision: B{Is valid?}, then connect with labeled arrows: B -->|Yes| C[Continue] and B -->|No| D[Error]. The diamond shape signals a decision point.
How do I group nodes into sections? ▾
Use subgraph Title ... end to group related nodes inside a labeled box. Subgraphs can be nested and you can draw arrows between nodes in different subgraphs.
Can I change node colors? ▾
Yes — use the style directive: style A fill:#e0f7fa,stroke:#00838f,color:#000. You can also define CSS classes with classDef and apply them to multiple nodes at once.
🔒
Your data stays private. All processing happens entirely in your browser. Nothing is ever sent to our servers. You can use this tool offline after the page loads.