Flowchart

Best for branching logic — decisions, steps, and the paths between them.

flowchart TD
  start([Start]) --> ok{OK?}
  ok -->|yes| go[Proceed]
  ok -->|no| stop[Halt]
  subgraph Backend
    api[API] --> db[(Postgres)]
  end

Shapes: [rect] (rounded) ([stadium]) [[subroutine]] [(database)] ((circle)) {diamond} {{hexagon}}. Links: --> --- -.-> ==> <-->, labels via -->|text| or inline A -- text --> B. subgraph Name … end groups nodes.

Flowcharts are the only diagrams that accept Mermaid styling (style / classDef / class / :::).