User Flow Diagram Tool

Map a user flow before wireframing

A user flow diagram shows the steps and decisions a person takes to complete a task in an app or website. Begin with one outcome, such as accepting an invitation and reaching a project. Mark the entry point, actions, decision branches and successful end state. Give each branch a clear destination so the diagram works as a practical UX flowchart, not just a set of arrows.

Once the main path is clear, add recovery paths for common problems: an expired link, the wrong signed-in account or missing access. Turn each flow node into a screen-state inventory. Some nodes may become separate pages; others may be a message or state inside an existing screen. Then create low-fidelity wireframes for the screens that need layout decisions.

Keeping a user flow and wireframe in one product design workspace makes it easier to trace a screen back to the journey it supports. Teams can review the flow with product managers, test wireframe hierarchy on mobile and carry decisions into interface design and developer handoff. See the onboarding guide for a worked user-flow-to-wireframe example.