User flow diagram

A user flow diagram (also called an app flow diagram) shows the path a new user takes through a product, from the landing page to the first moment the product is useful to them. This one covers starting a trial, creating an account, verifying an email address, a short onboarding step, an optional invitation to teammates, an empty workspace with a sample project, and the first key action. It also shows where people drop off and how the product tries to bring them back.

Product designers and product managers draw this to plan onboarding, to find the steps where new users stall, and to agree which action counts as “first value” so it can be measured. Each decision point is a place where some users leave, so the drop-off branches matter as much as the main path. An empty screen is a common place to lose people, which is why this flow starts the user with a sample project and sends a reminder if they do not come back.

Open in editor

Mermaid source

---
title: User flow diagram
---
flowchart LR
  land([Lands on the home page]) --> cta{Starts a free trial?}
  cta -->|No| leave([Leaves the site])
  cta -->|Yes| create[Create account]
  create --> verified{Email verified?}
  verified -->|Not yet| remind[Send a reminder email]
  remind --> verified
  verified -->|Yes| welcome[Welcome screen]
  welcome --> role[Choose role and goal]
  role --> invite{Invite teammates now?}
  invite -->|Yes| send[Send invitations]
  invite -->|Skip| empty
  send --> empty[Empty workspace with a sample project]
  empty --> first{Creates a first project?}
  first -->|Yes| action[Completes the first key action]
  action --> value([First value reached])
  first -->|No| nudge[Checklist email the next day]
  nudge --> back{Comes back?}
  back -->|Yes| empty
  back -->|No| churn([Drops off])

Stock Mermaid vs Line9 on this user flow diagram

Run the same source through the stock Mermaid engine and it often will not look as good. In some cases, Mermaid is able to deliver a usable graph, but not always. On this one:

The same user flow through stock Mermaid — a strip about eight times wider than it is tall, with small labels and oversized decision diamonds — Stock Mermaid · same source View full size ↗

Stock Mermaid draws this flow as a single strip about eight times wider than it is tall, so to fit into a page or screen it has to be scaled down and the labels become very small. Its decision diamonds also grow to fit their text, so they end up much larger than the steps around them and dominate the diagram. Line9 keeps every decision the same size and lays out the same source in a more compact shape, so it can be shown at a size where every label is readable.

For a fuller product comparison — layout, export, CLI, and pricing — see Line9 vs mermaid.live.

Render your own

Paste any Mermaid flowchart into the free online editor — no account needed. Prefer the terminal? Install the line9 CLI (free for personal use).

More scenarios on the Mermaid examples hub.

Mermaid source

Stock Mermaid vs Line9 on this user flow diagram

Render your own

Related diagrams