Sankey Diagrams: What They Are, When to Use Them, and How to Animate Them
A Sankey diagram is a flow diagram where the width of each arrow or band is proportional to the quantity it represents.
That one property — width encodes magnitude — makes Sankey diagrams uniquely effective for a specific class of problem: showing how a total breaks down, flows, and redistributes across a system.
A budget allocation. A user journey through a product. Energy consumption across a factory. Revenue split between channels. These are all Sankey problems.
Anatomy of a Sankey Diagram
Every Sankey diagram has three components:
Nodes represent states, categories, or stages. A node might be "Website Traffic," "Organic Search," or "Converted to Trial." Nodes appear as vertical bars or rectangles.
Flows represent the movement from one node to another. The width of each flow is proportional to its value — a flow carrying twice as much data, energy, or money is drawn twice as wide.
Labels indicate the quantity associated with each node or flow. Some Sankey diagrams display exact numbers; others show percentages of the total.
The visual result makes distribution immediately legible. You can see at a glance which paths carry the most volume, where the system loses the most, and how the total allocates across outputs.
When to Use a Sankey Diagram
Sankey diagrams work when your data has three characteristics:
- A total that flows through multiple stages or splits across categories
- The relative size of each portion matters
- You want to show both the breakdown and the path simultaneously
Budget and Resource Allocation
Sankey diagrams make financial flows legible in ways that pie charts cannot. A pie chart shows where the budget ends up. A Sankey shows where it came from, how it moved, and what it became.
Present a $10M budget allocation as a Sankey and your finance audience immediately sees which departments consume the most, how headcount costs compare to infrastructure, and where discretionary spend concentrates.
Conversion Funnels
The classic marketing funnel (Impressions → Clicks → Trials → Conversions → Retained) is a natural Sankey. Each stage has a volume, and the drop-off between stages is the story. A Sankey diagram makes that story visual without requiring explanation — the narrowing bands show the leakage.
Energy and Material Flows
Engineers use Sankey diagrams to show where energy is consumed or lost in a system. A manufacturing process diagram can show raw material inputs, production steps, waste outputs, and finished goods simultaneously.
User Journey Mapping
Product teams use Sankey diagrams to show how users move through an application: which paths are most common, where users exit, and which flows lead to activation. This is more informative than a standard funnel because it shows branching, not just linear drop-off.
The Problem with Static Sankey Diagrams
A static Sankey diagram in a presentation creates a reading problem.
When you project a full Sankey diagram, your audience tries to read the entire thing simultaneously. They trace flows in the wrong order. They focus on the widest band before you have explained the context. They ask questions about the part you were about to explain.
The diagram contains the right information, but it front-loads everything. The visual sequence does not match the narrative sequence.
This is the same problem that affects all complex static diagrams in presentations — and it has the same solution.
Why Animated Sankey Diagrams Work Better
An animated Sankey diagram builds in front of the audience, revealing nodes and flows in the order you want them to process the information.
Start with the total. Then reveal the first split. Then the second. Then trace the path to the outcome you want to discuss. At each step, the audience is looking at exactly what you are talking about.
The information is identical. The experience is completely different.
For presentations where the Sankey is making a point — this is where we lose users, this is how the budget concentrates, this is where energy is wasted — animation is the difference between the audience grasping the insight during the slide and asking you to explain it afterward.
Sankey Diagram Best Practices
Keep node count manageable. Sankey diagrams with more than 8-10 nodes become hard to read at presentation scale. If your system is more complex, consider presenting two Sankeys in sequence: one for the high level, one zoomed into a specific segment.
Label the most important flows explicitly. Do not make your audience calculate percentages from visual widths alone. Label the flows that make your point directly.
Use consistent color for related nodes. If organic search flows into website traffic which flows into leads, using the same color family for that path makes the connection easier to follow.
Start with the total. The most effective animated Sankey builds left to right, starting with the source node (the full 100%) and revealing splits in order. Do not start in the middle of the flow.
Match the animation to your talk track. Before you set the animation order, write out what you want to say at each reveal. The diagram should build in exactly the order you speak.
Generate Your Sankey Diagram
FluxDiagram generates animated Sankey diagrams from plain text descriptions. Free tier includes five animated visuals per month.
Describe your Sankey diagram and generate it free.
FluxDiagram generates animated diagrams — including Sankey, flowchart, architecture, and org chart — for embedding in Google Slides, PowerPoint, and Keynote.