Online store checkout
A shop with a CDN, a gateway, three services, a cache, a database, a queue and a payment provider. It is the diagram behind most examples in these docs.
Things to try:
- Pick Place an order and press play, then switch to Sequence and Story to read the same steps two other ways.
- Click API gateway or order-service to open their notes.
- Open Backend only for the same model with the edge layer left out.
- Pick Card declined, and see how a failure is a scenario of its own.
- Hover a line, then the matching row of the interfaces table at the bottom.
How a shopper's browser reaches the store, what the backend does with each request, and where things can go wrong. Click any box for details, or pick a scenario above the diagram and press play to watch a request travel through the system.
Everything in one picture. Letters on the edges match the interfaces table underneath.
Scenario
HTTP request / responseData accessPersistent channel (websocket, gRPC)Queue / brokerDashed: planned
Loading diagram…
| Key | From → To | Kind | Auth | What travels |
|---|---|---|---|---|
| A | Shopper browser → CDN | http | — | HTTPS |
| B | CDN → API gateway | http | — | — |
| C | API gateway → Keycloak | data | client credentials | signing keys |
| D | API gateway → catalog-service | http | — | /products |
| E | API gateway → cart-service | http | — | /cart |
| F | API gateway → order-service | http | — | /orders |
| G | catalog-service → Redis | data | — | cache |
| H | catalog-service → PostgreSQL | data | — | — |
| I | cart-service → Redis | data | — | — |
| J | order-service → PostgreSQL | data | — | — |
| K | order-service → Stripe | channel | API key | payment intent |
| L | order-service → RabbitMQ | queue | — | order.created |
| M | RabbitMQ → notification-worker | queue | — | — |
The source is diagram.yaml and two files in nodes/. See Views, Steps and Node docs for what each part does.