D2 Diagrams

Done. The diagram is at diagrams/checkout.svg, and the editable source is next to it at diagrams/checkout.d2.

Engine: ELK (TALA isn't installed on this machine, so there's no watermark to worry about).

Self-check: I opened the PNG preview and checked it before handing it over. The edges don't cross, every label is readable at README width, and the three containers (Edge, Application, Data Layer) don't overlap. Stripe is dashed and greyed out as an external service, and the charge edge is animated.

direction: right

# larger type so the diagram stays legible scaled down in the README
**.style.font-size: 24
(** -> **)[*].style.font-size: 18

classes: {
  svc: {style: {border-radius: 8; shadow: true}}
  ext: {style: {stroke-dash: 3; font-color: "#666666"}}
}

user: Customer {shape: person}

edge: Edge {
  cdn: CDN
  waf: WAF
}

app: Application {
  api: API Gateway {class: svc}
  auth: Auth {class: svc}
  orders: Orders {class: svc}
}

data: Data Layer {
  pg: PostgreSQL {shape: cylinder}
  cache: Redis {shape: cylinder}
  bus: Kafka {shape: queue}
}

billing: Billing {class: svc}
stripe: Stripe {class: ext}

user -> edge.cdn: HTTPS
edge.cdn -> edge.waf
edge.waf -> app.api
app.api -> app.auth: JWT
app.api -> app.orders: REST
app.orders -> data.pg: SQL
app.orders -> data.cache: cache
app.orders -> data.bus: publish
data.bus -> billing: consume
billing -> stripe: charge {style.animated: true}

Next steps

• If this is going in a GitHub README, I can re-render it with --dark-theme 200 so it follows the reader's light or dark mode.
• If you have a TALA licence, I can re-render with it for tighter packing inside the containers.
• To change it, edit checkout.d2 and ask me to re-render; I'll run the same check again.