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.
- Open the Interfaces bar at the bottom, then hover a row to light up its line, or a line to light up its row.
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 on the bar under 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.
The source is diagram.yaml and two files in nodes/. See Views, Steps and Node docs for what each part does.