How to create a user flow diagram

Name the entry point and the end state first

Before any frame exists, write down two things: the screen the user lands on, and the screen that means the job is done. Onboarding, Sign in and Home are entry points. Order confirmed, Password changed and Task archived are end states. Everything else is a step between them.

Writing the ends first prevents the classic mistake, a flow that starts halfway through and never says what the user came for. A flow whose entry point is not obvious is usually one drawn from the point where the drawing started, not where the user starts. The mockup tutorial covers building the screens first; the flow connects them.

Write the end state in terms of what the user has, not what they have done. Not Completed, but Order confirmed. Not Logged in, but Welcome back, Sam. A screen named after the result makes it obvious when you have arrived, and a missing end state obvious too.

• Entry point: the very first screen the user sees
• End state: the screen that means the task is finished
• Name end states after the result, not the action
• Two names are enough to start

Note: If the flow has more than one end state, that is a branch, and branches belong in the third step of this process rather than in the first.

Split the flow into screens, decisions and branches

Now break the journey into three kinds of thing. Screens are states the user can be in. Decisions are moments where the user chooses, such as accept or decline, and each choice leads to a different screen. Branches are whole alternative paths, such as signing in with a code instead of a password.

A screen with a decision inside it is still one screen, and the decision is a component, not a frame. A decision inside a screen is usually a Button or a Radio group, and the two outcomes of that choice are two separate frames that the screen links to.

The test for whether something is a screen or a branch is whether the user can go back. If the user reaches a different state and returns, it is a branch inside the flow. If they arrive somewhere new and stay, it is a new screen. Deciding this early keeps the frame list short enough to read.

• Screen: a state the user can be in and stay in
• Decision: a choice, drawn as a control inside a screen
• Branch: an alternative path with its own screens
• Every screen belongs to one path

Note: Keep the branch count low. A flow with eight paths is usually a flow where two decisions were made at once, and a reviewer will lose the thread in the first minute.

Lay the frames out in reading order

Place the frames on the canvas in the order a person reads them: left to right, top to bottom, with the entry point top left. Give each frame the same size so the eye treats them as equals, and leave a clear gap between columns so nobody mistakes two frames for one wide screen.

The layout is not decoration. It is how a reviewer understands the flow without clicking anything, and how you spot the frame that is out of place. A frame in a strange spot usually means the flow has a jump in it, and moving it makes the jump obvious before you draw an arrow.

Name each frame after what happens on it, using the Name field in the frame inspector. Sign in, Code sent, Profile, Notifications. Names are what the On tap go to dropdown shows, so a good name makes the link list readable later.

1. Add the frames. Use Add mobile frame or Add web frame for each screen, keeping the same preset for every frame in the flow.
2. Name each frame. Set the Name field to the moment the user is in, such as Sign in or Order confirmed.
3. Space them evenly. Lay the frames out in a grid so the reading order matches the order of the steps.

Note: App Builder starts new frames at 390×844 for mobile and 1280×800 for web, so frames of the same kind already line up on the canvas.

Connect the frames with On tap go to

Now the links. Select a frame, open the inspector, and set On tap go to to the frame that comes next. The link belongs to the frame, not to a button inside it, so the whole screen is the target.

Turn on Show prototype links in the toolbar and the connections are drawn as arrows between the frames, so you can see the shape of the flow on the canvas. That overlay is the closest thing to a diagram you will get, and it is the fastest way to spot a wrong turn.

Present mode is where the flow is walked. Open Present screens and the walkthrough follows the On tap go to link when one is set, and otherwise advances in frame order. ArrowRight or Space moves forward, ArrowLeft goes back, and Esc leaves the presentation. Backward is always linear, so the walk is a path forwards and a queue backwards. The prototype guide covers the limits of a frame-level link, including what it cannot do.

• Select the frame, then set On tap go to in the frame inspector
• Show prototype links draws the connections as arrows
• Present mode follows the link when one is set
• A frame with no link advances in frame order

Note: There are no tappable hotspots inside a screen and no pointer navigation in Present mode. A reviewer follows the path with the keyboard, and a specific button cannot be pressed.

Mark the decision points so reviewers see the choices

A decision that is invisible is a decision that gets argued about later. Make the choice visible on the screen itself, and a reviewer can answer the question while the flow is on screen instead of afterwards.

The palette has the pieces for this. A Chip or a Badge labels an option, a Radio group shows a choice with more than two answers, a Toggle shows a state that is on or off, and a Divider separates one group of options from the next.

Name the decision in the frame as well. A frame called Accept or decline carries the question inside the flow, and the arrows around it make the two paths obvious. The multi screen flow guide covers narrating these moments in a review.

• Chip or Badge to label each option
• Radio group when there are more than two choices
• Label for a short qualifier next to the choice
• Frame name that asks the question

Note: Mark decisions on the screen, not with a separate diagram. A second artifact describing the same flow goes stale the moment anyone changes a screen.

Check that no screen is a dead end

The most common flaw in a flow is a frame that goes nowhere. Somebody built a screen, forgot to set its On tap go to, and the walkthrough stops there while a reviewer wonders whether the product is broken. The check takes five minutes and is the whole point of drawing the flow.

Work through it in two passes. First, with Show prototype links on, look for any frame with no arrow leaving it. That is your list of dead ends. Second, open Present mode and walk the flow with ArrowRight from the entry point, watching for a frame that appears twice or a step that gets skipped.

Then check the branches. Every branch should rejoin the main flow or end at its own end state, and a branch that rejoins should rejoin somewhere sensible. A branch that comes back to the frame before it means that frame is missing a decision, which is cheaper to fix now than after a demo.

• Every frame has an outgoing link, except the end state
• Present mode reaches the end state from the entry point
• Each branch rejoins the main flow or has its own end
• No frame appears twice in the same path

Note: App Builder keeps 20 versions of history, so if a link change breaks the walkthrough, Ctrl/Cmd+Z takes you back.

A checklist you can reuse

• The entry point and the end state are written down
• Every frame is named after the moment the user is in
• Decisions are components, branches are separate frames
• Frames are laid out in reading order with even spacing
• On tap go to is set on every frame except the end state
• Show prototype links is on for the review of the arrows
• Present mode was walked from the entry point to the end

Common mistakes to avoid

• Starting the flow mid-journey. A flow that opens on a screen the user never sees first leaves the entry point undefined. Name the landing screen before anything else.
• Linking components instead of frames. Prototype links in App Builder are set on the frame, so a link that belongs to one button still moves the whole screen. Model the choice as a decision between two frames.
• Forgetting a link. A frame with no On tap go to stops the walkthrough dead. Check for arrowless frames with Show prototype links before the review.
• Too many branches. Eight paths in a flow means two decisions were taken at once. Split the decision or accept that the flow is too complicated to review.
• Keeping a separate flow diagram. A diagram that describes the flow beside the flow itself goes stale immediately. Draw the arrows on the frames you already built.

Frequently asked questions

How do I start a user flow diagram if I have no screens yet?

Borrow a structure. The template gallery holds 54 app templates across 8 categories, including auth, social, commerce, productivity, utility, content, education and web, and it is searchable and filterable by mobile or web. Start from a template that already has an account flow, then replace its frames with the ones you need.

Can reviewers follow the flow themselves?

They can follow it in Present mode, which opens from the Present screens button in the toolbar. The walkthrough is keyboard driven: ArrowRight or Space goes forward along the On tap go to link when one is set, ArrowLeft goes back, and Esc exits. There are no clickable hotspots inside a frame, so nobody can press a specific button.

What happens if a frame has no On tap go to?

In Present mode, the walkthrough advances in frame order instead of following a link. That is useful for a linear sequence such as three onboarding screens, and it is worth choosing deliberately rather than leaving it as an accident. Frames with links take priority over frame order when the walkthrough moves forward.

How many frames should a user flow have?

Enough to cover the journey and no more. Four to eight frames is a comfortable number to review in one sitting. A flow that needs more usually mixes two journeys, and splitting it into two flows makes each easier to check.

This guide is part of the app builder guides collection. For the wider product tour, read the complete Canvasola guide, and keep the keyboard shortcut cheat sheet open while you work.