# User flow diagram

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](https://help.gocapable.com/images/att1424392207.svg)

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](https://help.gocapable.com/diagrams/diagram-types.html).

---

## Related

[FlowchartThe everyday one: steps, decisions, arrows.](https://help.gocapable.com/diagrams/flowchart.html)

[Flowchart symbolsWhat each shape actually means.](https://help.gocapable.com/diagrams/flowchart-symbols.html)

[ExamplesWorking diagrams you can copy.](https://help.gocapable.com/diagrams/examples.html)

---

_Draw the unhappy path too._