Free diagram maker
User flow diagram tool
A user flow is the route somebody takes through a product to get one thing done. Screens are boxes, decisions are diamonds, and the arrows are what the person does next.
Free, no account, and nothing you draw is uploaded.
Published . By the DiagramDesk team.
Drawing it before you design screens tends to reveal two or three states nobody had thought about, which is much cheaper to find now than in a build.
What a user flow is for
- Designing sign-up, checkout or onboarding before anyone opens a design tool
- Finding the error and empty states that get forgotten
- Showing a developer every path, not just the happy one
- Comparing the flow you have with the flow you want
User flow or sitemap?
A sitemap shows every page and how they are organised; a user flow shows the path one person takes through some of them to get one thing done. The sitemap answers where things live, the user flow answers how someone gets from wanting something to having it.
That makes the user flow the place to find friction. Each screen on the path is a chance to give up, so a flow that needs seven screens for a task that could take three says more about the design than any sitemap can. Draw one flow per task, starting from where the person actually arrives, which is often not the home page.
What a good user flow includes
- Entry points
- People arrive from a search result, an email or a shared link, not only from your home page.
- The unhappy path
- Most of the work in a real build is here. A flow that only shows success under-describes the job by half.
- Where the person leaves
- Mark the points where somebody might abandon. Those are the screens worth measuring.
- One flow per goal
- Sign-up and checkout are two diagrams. Putting them together makes both unreadable.
Drawing the flow
- Open the template, which has a landing page, a sign-in branch and a dashboard.
- Name each box after the screen, not the action, so it matches what gets built.
- Add a diamond wherever the product asks a question or checks a condition.
- Draw the unhappy paths too: wrong password, payment declined, nothing found.
- Mark the entry point and the point you consider success.
- Export a PNG for the ticket, or an SVG for the design file.
Ready to draw yours?
The example above opens in the editor, so you can edit rather than start cold.
User flow questions
Is this the same as a wireflow?
A wireflow puts small wireframes in place of boxes. You can do that here by inserting images of your screens, or by using the wireframe template as a starting point.
Can I link it to a prototype?
No. The diagram is a picture, not an interactive prototype.
Should screens or actions go in the boxes?
Screens in boxes, actions on the connectors. That way the diagram matches what a developer has to build.
How do I show a loop back to the start?
Draw the connector back. The router will take it round the outside rather than through your other shapes.