Checkout architecture
Clients through edge, services, data, and Stripe — metro routing, brand icons, and OrderPlaced on the bus.
Edit source — diagram updates live
Source
diagram "Checkout" {
direction LR
presentation {
title: "Checkout"
titleSubtitle: "Edge → services → data → Stripe · sync calls and OrderPlaced"
groupAccent: true
}
layout {
density: normal
spacingScale: 1.05
}
edges {
route: metro
crossings: smart
}
group system {
chrome: false
arrange: row
align: stretch
group clients "Clients" {
arrange: stack
web: actor "Web checkout" {
icon: monitor
note: "SPA"
}
mobile: actor "Mobile app" {
icon: smartphone
note: "iOS / Android"
}
}
group edgePlane "Edge" {
arrange: stack
cdn: external "CDN" { icon: globe }
api: gateway "API Gateway" {
icon: waypoints
subtitle: true
technology: "Kong"
}
}
group app "Application" {
arrange: stack
checkout: service "Checkout" {
icon: shopping-cart
note: "cart · totals · place order"
}
inventory: service "Inventory" {
icon: package
note: "reserve stock"
}
billing: service "Billing" {
icon: credit-card
note: "authorize · capture"
}
}
group data "Data plane" {
arrange: stack
db: database "Postgres" { icon: logos:postgresql }
cache: cache "Redis" { icon: logos:redis }
bus: broker "Event bus" { icon: logos:kafka }
}
group integrations "Integrations" {
arrange: stack
stripe: external "Stripe" { icon: simple-icons:stripe }
mail: external "Email" { icon: send }
}
}
web -> cdn "assets"
web -> api "HTTPS"
mobile -> api "HTTPS"
cdn ..> api
api -> checkout "POST /orders" { priority: high }
api -> inventory "GET /stock"
api -> billing "POST /pay"
checkout -> db "write order" { priority: high }
checkout ..> cache "session"
inventory -> db "reservations"
inventory ..> cache "hot SKUs"
billing -> stripe "PaymentIntent" { priority: high }
billing -> db "payment row"
checkout => bus "OrderPlaced" { icon: mail; priority: high }
bus => mail "receipt"
}
Try this
Flip direction LR to TD, or add another worker on the bus with =>.