Skip to content

Flowcharts

Flowcharts are the most common diagram type. Use flowchart as the diagram type.

flowchart LR
  A[Start] --> B{Is it working?}
  B -->|Yes| C[Done]
  B -->|No| D[Fix it]
  D --> B
flowchart TB
  subgraph Auth["Authentication"]
    A1[Login] --> A2[Validate Token]
    A2 --> A3[Grant Access]
  end
  subgraph API["API Layer"]
    B1[Receive Request] --> B2[Check Permissions]
    B2 --> B3[Process Data]
  end
  Auth --> API
  API --> C[Response]
flowchart LR
  A[Start] --> B[Process]
  B --> C[End]
  style A fill:#f9f,stroke:#333,stroke-width:2px
  style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
  style C fill:#bfb,stroke:#333,stroke-width:2px

Use w-NNN and h-NNN in the info string to set explicit dimensions:

flowchart TD
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[Car]