Back to Documentation

Flowcharts

Create decision trees, process flows, and workflow diagrams

Quick Start

Basic Syntax

graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Process]
B -->|No| D[End]

Live Preview

Loading preview...

Node Types

A[Rectangle]
Standard process step
B(Round edges)
Start/end points
C{Diamond}
Decision points
D((Circle))
Connectors
E>Flag]
Asymmetric shape
F[/Parallelogram/]
Input/output

Connection Types

A --> B
Simple arrow
A --- B
Line without arrow
A -.-> B
Dotted arrow
A ==> B
Thick arrow
A -->|Label| B
Arrow with label
A -.->|Label| B
Dotted arrow with label

Complete Examples

Basic Flowchart
Simple flowchart with basic nodes and connections

Code

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Fix it]
    D --> B
    C --> E[End]

Preview

Loading preview...

Use Case

Perfect for simple decision processes and basic workflows

Advanced Process Flow
Complex flowchart with multiple decision points and processes

Code

graph TD
    A[User Login] --> B{Valid Credentials?}
    B -->|No| C[Show Error]
    C --> A
    B -->|Yes| D[Check Permissions]
    D --> E{Admin User?}
    E -->|Yes| F[Admin Dashboard]
    E -->|No| G[User Dashboard]
    F --> H[Manage Users]
    F --> I[System Settings]
    G --> J[View Profile]
    G --> K[My Documents]
    
    style A fill:#e1f5fe
    style F fill:#f3e5f5
    style G fill:#e8f5e8

Preview

Loading preview...

Use Case

Ideal for documenting complex business processes and user workflows

Best Practices

✅ Do
  • • Use clear, descriptive labels for nodes
  • • Keep flowcharts simple and focused
  • • Use consistent node types for similar elements
  • • Add styling to highlight important paths
  • • Use subgraphs to group related elements
❌ Don't
  • • Create overly complex diagrams
  • • Use unclear or ambiguous labels
  • • Mix different diagram types unnecessarily
  • • Forget to define the flow direction
  • • Overcomplicate with too many styles