Free User Flow Diagram Maker — Map Journeys

See it work

User flow diagram examples.

Same tool, four requests. Every drawing below is a real render.

What you type

Create a top-down mobile banking password-reset user journey: open the app, select Forgot password, enter a customer ID, and receive a one-time passcode. If the passcode is invalid, route to bank support and account recovery review. If valid, create a new password, optionally enroll Face ID or fingerprint, sign in, receive a security alert, and restore account access.

Then tryAdd a device-recognition check before sending the passcode.Change the failed-passcode path to lock the account after three attempts.

Flowchart: Mobile banking password reset

Flowchart · Sugiyama layered DAG + orthogonal routing · schematex-flowchart

Rather start from a finished drawing? Browse 1168 flowchart templates →

The drawing

What a user flow diagram is.

A user flow diagram shows the path a person takes to reach a goal in a product. It connects screens or actions with choices, errors, loops, and successful outcomes.

Design and product teams use a user flow to check that each path is understandable before they build it. The diagram makes dead ends, missing states, and unexpected branches easier to discuss.

Standard: Sugiyama layered DAG + orthogonal routing
Engine: schematex-flowchart
Editable: Double-click text, drag nodes
Export: SVG · PNG · PDF

Who uses it

Who uses user flow diagrams.

Product designers

Navigation paths and screen states before wireframes or prototypes are finalized.

UX researchers

Task paths to use when planning usability studies and noting where participants may get stuck.

Product managers

A shared view of checkout choices, errors, and outcomes when defining a feature.

How it works

How to make a user flow diagram in three steps.

Describe it

One paragraph is enough to start.

“Create a top-down mobile banking password-reset user journey: open the app, select Forgot password, enter a customer ID, and receive a one-time passcode. If the passcode is invalid, route to bank support and account recovery review. If valid, create a new password, optionally enroll Face ID or fingerprint, sign in, receive a security alert, and restore account access.”

See the drawing

Drawn by the right engine.

Say what changes

Every edit keeps a version.

Add a device-recognition check before sending the passcode.

V2 · DRAWN FROM V1, NOTHING RETYPED

FAQ

Common questions

What is a user flow diagram?

It is a diagram of the steps and decisions a person follows through a website or app to complete a task. It can include screens, actions, errors, and end states.

What should a user flow include?

Include the starting point, each important screen or action, decision points, alternative paths, errors, and the outcome the person is trying to reach.

How is a user flow different from a user journey map?

A user flow focuses on product navigation and decisions. A journey map is broader and often includes goals, feelings, and touchpoints outside the product.

When should I make a user flow?

Make one when designing a new task, changing a complex path, preparing usability research, or explaining navigation to engineering and stakeholders.

Related tools