Controls and keyboard
Everything here works on every diagram without any setup. Try it on this one.
Everything in one picture. Letters on the edges match the interfaces table underneath.
Scenario
The shopper pays. The order is stored first, charged second, and announced to the rest of the system last.
HTTP request / responseData accessPersistent channel (websocket, gRPC)Queue / brokerDashed: planned
Loading diagram…
ISubmit
1
Shopper browser→order-servicevia CDN, API gatewayPOST /orders
The gateway has already checked the token, so the order service trusts the user id header.
2
order-service→PostgreSQLINSERT order (pending)
IICharge
3
order-service→Stripecreate payment intent
4
Stripeauthorise card
5
Stripe→order-servicesucceeded
IIIFinish
6
order-service→PostgreSQLmark paid
7
order-service→RabbitMQorder.created
8
order-service→Shopper browservia API gateway, CDN201 Created
9
RabbitMQ→notification-workerorder.createdplanned
Planned. Confirmation emails are not sent yet.
| 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 canvas
Section titled “The canvas”- Drag
- Pan the diagram.
- Ctrl or ⌘ + scroll
- Zoom. A plain scroll moves the page, so a diagram never traps the reader.
- Two-finger pinch
- Zoom on a touch screen. One finger scrolls the page.
- − and +
- Zoom out and in, between 0.15× and 3×.
- Fit
- Fit the whole diagram in the frame. It also refits on its own when the frame changes size, until the reader pans or zooms.
- Full screen
- Take the whole component, with the player and the step list, to full screen.
- Hide planned
- Appears when the diagram has planned items. Hides planned nodes and their edges.
- Follow
- Appears while a scenario is selected. Moves the camera to wherever the action is.
Boxes and lines
Section titled “Boxes and lines”- Hover or focus a box
- Highlights the box and everything it connects to, and fades the rest.
- Hover a line
- Highlights the line and its two ends. With an interfaces table, the matching row lights up too.
- Click a box, or Enter or Space on a focused one
- Opens the drawer: the box’s documentation, connections, links and source files.
- A link in the drawer
- Moves to the connected box.
- Esc
- Closes the drawer. Clicking the background closes it too.
Every box can be reached with Tab, and has an accessible name that includes its title and subtitle.
Views and scenarios
Section titled “Views and scenarios”- View tabs
- Switch between slices of the model. Appear when a diagram has more than one view.
- Scenario buttons
- Select a scenario. Overview goes back to the plain diagram. A scenario that a reader selects starts playing, unless the system asks for reduced motion.
- Flow, Sequence, Story
- Switch how the selected scenario is drawn.
The player
Section titled “The player”- Play, Pause, Resume, Replay
- One button whose label says what it will do.
- Previous, Next
- Step through one step at a time.
- Scrubber
- Drag to any moment. Playback pauses.
- Speed
- 0.5×, 1× or 2×.
- A step in the list
- Click, or Enter or Space, to play that step. The path already travelled stays lit.
Links and the address bar
Section titled “Links and the address bar”The address follows the scenario and step as #<diagram>=<scenario>.<step>, so a link opens exactly where it was copied. See playback.
Accessibility
Section titled “Accessibility”- Boxes are focusable buttons, and the drawer takes focus when it opens.
- Controls have labels, and the player is a labelled group.
- Scenarios start paused for readers who ask for reduced motion. They can still step and scrub.
- Colour is never the only signal: planned items are dashed and tagged, lookups and errors have their own line styles in the sequence view.