Skip to content
Browse docs

Alternate paths

Use labelled edges for meaningful transitions outside a flow's canonical order.

On this page

The row is canonical, not exhaustive#

A flow row gives a reviewer one clear reading order. Products also have shortcuts and branches: a booking can begin from inventory without a proposal, or an error can return someone to an earlier step.

An edge records one of those meaningful alternate transitions without copying the entire row.

{
  id: "request-to-booked",
  screens: [brief, inventory, proposal, confirmation],
  edges: [
    {
      from: "inventory",
      to: "confirmation",
      label: "book without a proposal",
    },
  ],
}

Both from and to are screen step IDs in that flow. Every edge needs a label that explains why the alternate order exists. mockspace check reports an unknown endpoint or missing label instead of accepting an edge that points nowhere.

When to add an edge#

Add an edge when the alternate path changes how the flow is understood or reviewed. Good examples include a shortcut, a recovery loop, or a transition allowed only after a decision.

Do not use edges to document every hyperlink on a page. Ordinary navigation already visible in the product adds noise to the review. Do not use an edge for a different visual condition of one screen; that belongs in a state.

When to add another flow#

Create another flow when the journey has a different goal or needs to be reviewed independently. If most steps, intent, and acceptance questions change, a separate row is clearer. If the journey is the same and only one transition differs, keep one flow and add an edge.

Review edges with the frames#

An edge is context, not a substitute for evidence. Its endpoints still need truthful states and app-owned data. Review the frames at both ends and confirm that the labelled transition matches what the product can do.