A user flow diagram shows the path a person takes through your product, from the moment they arrive to the moment they reach their goal. It turns vague assumptions about “how people use it” into something you can point at, question and fix. Here is how to build one.
Define the goal and the entry point
Every flow needs two anchors: where someone starts and what they are trying to achieve. Pick one clear goal, like “complete a purchase” or “reset a password”, and the realistic entry point, like an email link or the home screen. Mapping one goal at a time keeps the diagram readable; map a second goal as its own flow.
Lay out the steps in order
Open the diagram maker and add a box for each screen or step between the entry point and the goal. Keep each box to a single meaningful action: “view cart”, “enter address”, “confirm order”. Place them in sequence so the eye follows the journey naturally, left to right or top to bottom.
Add the decision points
Real journeys branch. Wherever a person makes a choice or the system checks something, drop in a decision and draw an arrow for each outcome. “Logged in? Yes or no.” “Payment accepted? Yes or no.” These branches are the most valuable part of the diagram, because they expose the paths that are easy to forget.
Map the dead ends and loops
Good flows account for what goes wrong, not just the happy path. Where can someone get stuck, hit an error, or loop back to try again? Draw those arrows too. A flow that only shows the perfect run hides exactly the moments where people give up.
Review it with someone
Walk a teammate through the finished flow and watch where they hesitate or ask “but what if”. Those questions usually point to a missing branch or an unclear step. Adjust the boxes and arrows until the path reads cleanly for someone who did not draw it.
When the flow holds up, export it to PNG or SVG to drop into a brief or a ticket. The whole diagram is built in your browser and never uploaded, so early product thinking stays private until you share it.
