User flow diagram

Updated
View as text
Open in Confluence
Open in ChatGPT Open in Claude

A user flow shows the path someone takes through a product: which screen, which decision, and where they fall out. It sits naturally beside the spec, which is exactly why it belongs in Confluence rather than in a design tool nobody outside the team can open.

Keep it at the level of screens and decisions. Anything finer belongs in a wireframe.

#When to reach for one

  • Writing a spec, where the flow is the argument.

  • Reviewing an existing journey to find the steps people abandon.

  • Handing a design to engineering without a meeting.

#How to draw it in Capable

Route

Use when

Mermaid

Fast, diffable, and easy to keep current as the spec changes.

Excalidraw

Early exploration, where looking unfinished helps.

draw.io

When you want screen thumbnails in the flow itself.

#A worked example

A sign-up flow, including where people leave:

User flow diagram

The source, which you can paste into a new diagram and edit:

flowchart LR
  A([Landing page]) --> B[Sign up form]
  B --> C{Email valid?}
  C -- No --> B
  C -- Yes --> D[Verify email]
  D --> E{Verified within 24h?}
  E -- No --> F([Dropped: send reminder])
  E -- Yes --> G[Onboarding]
  G --> H([Active user])

#A few things that catch people out

  • Draw the dead ends. A flow with only the happy path tells you nothing you did not know.

  • One flow per goal. A diagram covering sign-up, purchase and support is three diagrams.

  • Pair it with a wireframe rather than embedding screen detail. See Diagram types.

Draw the unhappy path too.