Sankey Diagrams for User Flows: How to Read Where People Go — and Where They Leave
What the nodes, bands, and percentages mean — and how to read a flow diagram to find where users go and where they drop off
August 21, 2026
Jump to section
TL;DR
- Nodes are screens, bands are transitions. A band from one screen to another shows people moving between them; its thickness is how many sessions made that move.
- The percentage is a share of the source screen. Each band leaving a screen is labeled with the portion of that screen's sessions which took it.
- Drop-off is the gap. When the bands leaving a screen add up to less than 100%, the missing slice is the people who left. You read exits without a separate “exit” node.
- It answers a question a funnel can't: not “did this fixed sequence convert” but “where do people actually go from here.”
A list of screen counts tells you where people are. It can't tell you how they got there or where they went next — and that movement is where most product questions actually live. A Sankey diagram is built for exactly this: it draws the flow of people between screens as a set of bands, sized by volume, so the routes users really take rise to the top and the shape of your app's navigation becomes something you can read in a few seconds.
What a Sankey diagram actually is
A Sankey diagram shows flow. It has nodes — in a user flow, each node is a screen — and bands (sometimes called links or ribbons) that connect them. A band from Home → Search means people moved from Home to Search, and the band's thickness is proportional to how many sessions made that move. The heaviest paths are literally the widest ribbons, so you compare volume by looking, not by reading numbers row by row.
The name comes from Captain Matthew Sankey, who in 1898 drew the energy losses of a steam engine as a flow where the width of each stream was its share of the total. The idea is the same a century later: the eye is very good at comparing thicknesses, so encoding a quantity as width lets a lot of data land at once. Swap “energy” for “sessions” and “pipes” for “screens” and you have a user flow.
Why a Sankey beats a funnel for navigation
A funnel is a good tool for a question you already have: does this fixed sequence — home, to cart, to purchase — convert, and where does it leak? What a funnel can't show you is the sequence you didn't think to draw. It only ever measures the path you defined in advance.
A Sankey starts from the other end. It's built from the routes people actually take, so it surfaces paths you'd never have charted: the users who reach checkout from a deep-linked product screen instead of the cart, the onboarding step that quietly loops back to sign-up, the “dead-end” screen that turns out to feed a third of your search traffic. You read the real map first, and that is how you learn which paths are worth turning into funnels.
How to read one: thickness, then percentages
Start with thickness — it's the fastest signal. The fattest band on screen is your busiest transition; a screen with several thick bands leaving it is a genuine hub. Then read the percentage on each band. In Vexo, that percentage is the share of the source screen's sessions — so if Home → Search is labeled 42%, that means 42% of everyone who was on Home went to Search next.
Anchoring the percentage on the source screen (rather than on the total, or on the destination) is what makes the numbers add up to something meaningful: every band leaving a screen is a slice of that one screen's traffic, so they can be compared directly and summed.
Drop-off is the gap, not a box. Add up the percentages of the bands leaving a screen. If they come to less than 100%, the remainder is the people who left — the session ended there and went nowhere after. You don't need a separate red “exit” node cluttering the diagram; the drop-off is simply the part of the screen that doesn't flow onward. A screen whose outgoing bands sum to 55% is a screen where nearly half of visitors stop — worth opening a few session replays on.
The patterns worth looking for
- Hub screens. A node with many thick bands in and out is load-bearing — a home or tab-bar screen most journeys route through. Changes here ripple everywhere, so it's where design attention pays off most.
- Narrowing. Follow a path and watch the bands get thinner step by step. Each narrowing is attrition; a band that narrows sharply between two screens is a specific, fixable leak, not a vague “the funnel is bad.”
- Back-loops. A band that points back to a screen users already saw usually means friction — they didn't find what they needed and returned to try again. Real navigation is cyclic, and a flow view shows the loops a linear funnel erases.
- Early drop-off. A big gap right after entry — the first screen's outgoing bands summing well under 100% — is the most expensive kind, because it's people leaving before they ever engaged.
How Vexo builds it — with nothing to instrument
Vexo already records which screen each user is on as they move through your app, so the flow is built from data you already have — no events to define, no code to add. Open the mobile dashboard and the User Flow view renders the top screen-to-screen transitions as a Sankey, each band sized by session volume and labeled with its share of the source screen.
From there it's interactive: hover a band for the exact session count, click a screen to re-anchor the whole flow on it and see what leads in and where people go next, and zoom to work through a busy graph. For the full walkthrough of the feature, see See How Users Move Through Your App.
The point of the diagram isn't the diagram — it's that movement is where the answers are, and a Sankey is the shortest path between raw navigation data and a decision about what to build next.
