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.

HTTP request / responseData accessPersistent channel (websocket, gRPC)Queue / brokerDashed: planned

Loading diagram…

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.
Drag the bottom edge: Resize the viewer in the page, from 220 px up. A grip marks the edge. With the edge focused, ↑ and ↓ move it by 24 px, Page Up and Page Down by 120 px, Home makes it as short as it goes and End as tall as the window. Double-click or Enter puts it back. The diagram refits to the new size until the reader has panned or zoomed.
Expand the viewer: Make the viewer most of the window’s height, keeping it in sight. The same button shrinks it again. Unlike full screen, the page stays around it.
Full screen: Take the whole component, with its panel, to full screen. The resize edge and the expand button give way to it.
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

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 open, 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.

Nested diagrams

A box with an Expand and an Open strip on its bottom edge holds a whole diagram. See nested diagrams.

Click the box: The drawer shows the diagram it holds as a picture, with the same two buttons beside it.
Expand icon on the box, in the outline, or in the drawer: Shows the inner diagram in place, as a group around it, and moves the camera there. Collapse in the group’s header folds it back. A node inside can be expanded too.
Open icon on the box, on the group’s header, in the outline, or in the drawer: Moves into the inner diagram, with its own views, scenarios and player. The icons on the box and in the outline are for the pointer; the buttons in the drawer have names for the keyboard and for screen readers.
Back, or Esc: Goes up one level. Esc closes the drawer first when it is open, and does nothing while focus is in something else on the page.
A name in the trail: Goes straight to that level and closes the ones below it.

The level you leave is kept exactly as it was: its view, scenario, step, open drawer and expanded groups. Whatever was playing pauses. The box you came out of pulses once.

The bar under the picture

A bar along the bottom of the diagram, as wide as the picture, chooses the scenario, says what its step is doing and plays it. See the bar.

Scenario menu: Opens a list of the view’s scenarios upward over the picture. ↑ ↓ move, Enter chooses, Esc puts it away. Overview goes back to the plain diagram. A scenario that a reader chooses starts playing, unless the system asks for reduced motion.
Play, Pause, Resume, Replay: One button whose label says what it will do.
Previous, Next: Step through one step at a time.
The slider: A segment for each step, grouped by phase. Point at it for the step under the pointer, click or drag to go there (playback pauses). ← → step back and on, Home End go to the ends. See the slider.
Steps: Opens every step as a list above the bar. Click a step, or press Enter or Space on it, to play it; the path already travelled stays lit. Esc or a press anywhere else puts the list away. It keeps the step in progress in view. See the steps.
A phase header: In the list, fold the phase’s steps away, or show them. Folded, it still says how many steps it holds and, while it plays, how far it has got. The sequence and the story fold the same phases.
Speed: 0.5×, 1× or 2×.
Flow, Sequence, Story: Switch how the selected scenario is drawn.
CC: Show or hide the words: the title of the step, its phase, who talks to whom, and its note.
more: Beside a note that does not fit in two lines. Opens the list of steps, where the note is shown whole.

The panel

A panel floating over the left of the picture, inside the viewport, holds the outline and the views. See the panel.

Outline tab: Groups, nodes and their connections as a tree. Click a node to select it and glide to it; click a connection to go to the node at its other end; point at a row to light it up in the picture. ↑ ↓ move, ← → fold and unfold, Enter selects. See the outline.
Views tab: Switch between slices of the model. Appears when a diagram has more than one view.
← → on a tab: Move to the next tab.
The arrow at the top of the panel: Fold the panel to a button, or bring it back.

Links and the address bar

The address follows the scenario and step as #<diagram>=<scenario>.<step>, and the boxes opened below a diagram as #<diagram>~=<node>/<node>, so a link opens exactly where it was copied. See playback and nested diagrams.

Accessibility

Boxes are focusable buttons, and the drawer takes focus when it opens.
Opening a nested diagram moves focus to its Back button, and coming back returns it to the box that was opened. A box that holds a diagram says so in its accessible name.
Controls have labels, the bar is a labelled group, the scenario menu is a menu the arrow keys move along, the slider is a slider that says “Step 3 of 9” and the title, and the panel’s tabs are a real tab list that the arrow keys move along.
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.