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.