Generate user flow diagrams.
The value is in the branches you had not thought about, which is exactly what drawing the flow forces you to name.
What a user flow shows
The path a person takes through a product, including the decisions they make and the ones the system makes for them. It differs from a wireframe in that it is about sequence and branching rather than about screens, and from a flowchart mainly in audience: a user flow is read by designers and product people as often as by engineers.
The unhappy paths are the point
Almost every user flow drawn by hand covers the successful path. What breaks products is the rest: what happens when the email never arrives, when the payment is declined, when someone abandons halfway and returns two days later. Drawing them forces each to be given an answer rather than being discovered in support tickets.
Laid out left to right
Flows read horizontally, and branches need to sit beside each other rather than stacked. Layout is computed, so a branch that rejoins several steps later routes cleanly instead of producing the long crossing line that hand-drawn flows always have.
From flow to implementation
Once the flow is agreed it becomes a specification for a coding turn, which is how a decision made in a design conversation reaches the code without being re-described in a ticket first.
Try it
Questions
User flow or flowchart?
Largely the same notation with a different audience and emphasis. A user flow centres on what the person experiences; a flowchart on what the system does. The distinction matters mostly for what you choose to include.
Can it include screens?
Yes, as wireframe cards at each step, which makes the flow concrete. It also makes it busier, so it is worth doing only once the flow itself is settled.
Can it identify missing branches?
It will propose ones you have not mentioned, which is genuinely useful as a prompt. Whether each matters is a product judgement rather than something a diagram can decide.
Related
- AI Short Video from Your DiagramsA narrow feature with a specific use: explaining a system to people who will not read a diagram.
- Local-First AI Coding AgentSame agent core in a native desktop app and a 6 MB Rust binary, running whichever model you choose, including one on your own laptop.
- Local LLM Coding AgentFor when the constraint is not cost but that the code cannot leave the building.
- Diagram-Driven DevelopmentThe diagram stops being documentation produced after the fact and becomes the instruction the code is written from.
Last updated