Flowcharts & architecture

Direction

Start with flowchart LR (also TB, BT, RL). architecture is a flowchart that defaults to left-to-right. Layout is automatic: layers, crossing reduction, and smooth routing.

Shapes

flowchart LR
  a[Rect] --> b(Round) --> c([Stadium]) --> d[(Database)]
  e[[Subroutine]] --> f((Circle)) --> g{Decision} --> h{{Hexagon}}
  i[/Input/] --> j[\Output\] --> k[/Trapezoid\] --> l>Flag]

Edges

flowchart LR
  a -->|label| b
  a -.->|dotted| c
  a ==>|thick| d
  a --- e
  a --o f
  a --x g
  a <--> h

Groups

---
title: Checkout request
---
flowchart LR
  client([Browser]) --> gw[API Gateway]
  gw -->|verify| auth[Auth]
  gw --> orders[Orders]
  orders --> db[(Postgres)]
  orders -.-> queue{{Queue}}
  queue --> mail[Email worker]
  subgraph backend [Backend]
    auth
    orders
    db
  end

scenario Happy path
  client -> gw : POST /checkout
  gw -> auth : token
  auth is done
  gw -> orders
  orders is active
  orders -> db : insert
  db is done
  orders -> queue, orders -> gw
  note orders : Order #42 created
  queue -> mail : receipt
  mail is done
  gw -> client : 201 Created
  orders is done

scenario Token expired
  client -> gw : POST /checkout
  gw -> auth
  auth is error
  note auth : JWT expired
  gw -> client : 401
  client is warn