Design

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.

Download for macOS
v0.1.33 · .dmg · Apple Silicon & Intel
Signed & notarized by Apple · opens without a Gatekeeper warning
sha256 698955a0187bc039f4c74f5d05a9f10fbb27376a45788a0a241d1326b73873c7
Download for Windows instead
$curl -fsSL https://lucidtrain.com/install.sh | sh

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

shell
$ Draw the user flow for checkout, including guest checkout, a declined payment, an abandoned cart, and returning to a saved cart later.
FAQ

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