Flowchart

Flowcharts use the graph or flowchart keyword followed by a direction.

Directions

Keyword	Direction
TD / TB	Top to bottom
BT	Bottom to top
LR	Left to right
RL	Right to left

Top-Down

graph TD
  A --> B
  B --> C

Left-Right

graph LR
  A --> B
  B --> C

Node Shapes

Rectangle

graph LR
  A[Rectangle]

Rounded

graph LR
  A(Rounded)

Circle

graph LR
  A((Circle))

Diamond (decision)

graph LR
  A{Diamond}

Hexagon

graph LR
  A

Stadium / pill

graph LR
  A([Stadium])

All shapes together

graph LR
  A[Rectangle] --> B(Rounded)
  B --> C((Circle))
  C --> D{Diamond}
  D --> E
  E --> F([Stadium])

Edge Types

Solid arrow

graph LR
  A --> B

Dotted arrow

graph LR
  A -.-> B

Thick arrow

graph LR
  A ==> B

No arrow (line)

graph LR
  A --- B

Circle arrow

graph LR
  A --o B

Cross arrow

graph LR
  A --x B

Edge Labels

graph TD
  A{Decision} -->|Yes| B[Do it]
  A -->|No| C[Skip it]

Node Chains

Multiple nodes and edges on one line:

graph LR
  A --> B --> C --> D

Subgraphs

Group nodes in subgraphs:

graph TD
  subgraph Frontend Frontend
    A[React] --> B[Components]
  end
  subgraph Backend Backend
    C[API] --> D[Database]
  end
  B --> C

Full Example

graph TD
  Start[Start] --> Input[Receive input]
  Input --> Validate{Valid?}
  Validate -->|Yes| Process[Process data]
  Validate -->|No| Error[Show error]
  Error --> Input
  Process --> Save([Save to database])
  Save --> Done((Done))