Docs / Using the editor

Reading a diagram

How to find your way around a diagram, especially a big one.

These tools work the same in the editor, on a saved diagram someone shared with you, and in interactive embeds.

#Selecting a message

Click an arrow to select it. Volley:

• bands the whole row so you keep your place;
• marks the two lanes it connects;
• highlights the request it answers, or the replies that answer it;
• opens the inspector beside the diagram.

Once a message is selected, press J or ↓ for the next message and K or ↑ for the previous one. Press Esc or click the arrow again to clear the selection.

Hovering over an arrow also marks its two lanes, which helps in wide diagrams.

#The inspector

The inspector is the panel that opens when you select a message. It shows:

• The message number and text, with buttons for Previous message, Next message and Close, and in the editor an Edit line button that jumps to the source.
• Route: the two lanes, such as App -> Auth Server.
• Responds to on a reply, linking to the request it answers, and Response or Responses on a request, linking to its replies.
• Payloads. Each input and output with its format and title, a Fields tab with a table of names and values, and a Raw tab with the body as written. Redacted values are tagged redacted and secret-looking values are tagged example.

When a request has no output of its own but its reply does, the inspector shows that output under the request as "Returned by" the reply. A message with no payloads says so, and in the editor tells you how to add one.

#Show payloads

Turn on Show payloads in the bar under the diagram to draw every payload in place, under the message that carries it. This is the best way to read a whole flow top to bottom, or to print or export a diagram with its data. Volley remembers the setting. Downloaded SVG images include inline payloads when it is on.

#The lane menu

Click a lane's header, at the top of its column, to open its menu.

The menu names the lane in each item, as in Collapse Payments or Rename Payments.

#Big diagrams

Wide diagrams get hard to read. Volley has a few tools for that.

• Collapsed lanes. A collapsed lane becomes a narrow rail with its initials. Click the rail to open it again. Messages between collapsed lanes fold into one row that says how many messages and notes it hides; click Show to expand them.
• Collapse quiet lanes. When the diagram is wider than the pane, a Collapse quiet lanes button appears under it. It collapses the lanes that carry the least traffic until the diagram fits, keeping at least two lanes and the lanes of the selected message open. Expand lanes, which names how many lanes it will open, undoes it.
• Selecting a folded message opens its lanes automatically.
• Lane headers stay visible at the top while you scroll, and repeat at the bottom of long diagrams.

Collapsed lanes are a reading aid. They are not saved in the diagram or in links.

#Zoom

Use the Zoom out and Zoom in buttons under the diagram to step between 50% and 200%. The button between them shows the current zoom; click it to go back to Fit, which sizes the diagram to the pane. Volley remembers your zoom.

#On a phone

On a small screen Volley changes how diagrams are read:

• Fitted lanes. Lanes collapse automatically until the diagram fits the screen. All lanes opens them again, and Fit lanes collapses them back.
• Details sheet. The inspector slides up from the bottom. Drag its handle or swipe up to make it taller, swipe down to shrink or close it, and swipe left or right to move to the next or previous message.
• Steps view. Switch Show the diagram as from Diagram to Steps to read the flow as a numbered list. Each step shows its route, its text and its payloads; tap a step to open them. Notes, dividers and branches are listed in order too.
• Read first. A shared diagram opens read-only so it fills the screen. Tap Edit to switch to the full editor.
• Step through walks through the diagram one message at a time. See Presenting.