Free Sankey Diagram Maker, Animated and Embeddable
- What this is
- A free, embeddable, animated Sankey flow diagram for any website.
- Who uses it
- Energy analysts, budget communicators, product managers (user-flow analysis), marketing attribution writers, and data journalists who need to show how quantities flow between categories.
- How to embed
- Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
- File size
- ~25 KB per diagram.
- License
- Free forever. Editorial explainer text included; updated centrally over time.
- URL
- scrollchart.com/sankey-diagram-maker
Two-stage Sankey diagram
Shows flow from sources (left) to destinations (right). Band width is proportional to quantity. Scroll to trigger the animation.
Three-stage Sankey diagram
Adds a middle column for flows that pass through an intermediate category (e.g., sources to channels to end uses). Scroll to trigger.
What is a Sankey diagram?
A Sankey diagram visualizes the flow of a quantity from one set of categories to another. The width of each connecting band is proportional to the amount flowing through it. Categories are arranged in columns; flows connect them as tapered bands. When flows merge, the combined band is as wide as the sum of the inputs. When flows split, the output bands sum to the width of the input band.
The name comes from Captain Matthew Henry Phineas Riall Sankey, an Irish mechanical engineer who used the format in 1898 to diagram steam engine efficiency. His original diagram showed how much coal energy was converted to useful work versus lost as heat at each stage of the process. The width of the "waste" bands immediately communicated where the largest inefficiencies lay.
How to read a Sankey diagram
The key principle: width equals quantity. A band that is twice as wide carries twice the flow. This makes it immediately apparent which paths carry the most volume and which paths are minor branches.
To read the diagram: start from the left column (sources or inputs) and trace each band to the right. If a band splits, each branch gets a portion of the total. If multiple bands merge, the combined band represents their sum. The right column shows where the flow ends up (sinks or outputs).
Common Sankey diagram use cases
- Energy flow: from fuel source to electricity generation to end use. Classic application; the diagram type was invented for this. Used by national energy agencies (IEA, EIA, BEIS) in annual energy balance reports.
- Budget allocation: from revenue sources (product sales, services, grants) to expense categories (payroll, R&D, marketing, infrastructure). Makes the relative scale of budget items immediately legible.
- Marketing funnel: from traffic sources (organic, paid, social, referral) to conversion outcomes (signup, purchase, churn). Each channel's contribution to the final conversion is visible at a glance.
- User flow: from landing pages to feature use to retention or churn. Product managers use this to identify where users drop off in an onboarding sequence.
- Material flow: in supply-chain and lifecycle analysis, from raw material inputs through processing stages to products and waste streams.
Sankey versus alluvial diagram
The two diagram types look similar but serve different analytical purposes. A Sankey diagram shows how a quantity (energy, money, users) moves from sources to sinks, with the total usually being conserved (inputs equal outputs). An alluvial diagram shows how a population distributes across categorical variables at multiple points in time or across multiple classification dimensions.
Example: showing how students from three school types distribute into five university programs is an alluvial diagram. Showing how total budget flows from five revenue sources through three business units to twelve expense categories is a Sankey diagram. Both use the band-width-proportional-to-quantity convention.
Choosing between two-stage and three-stage
Use a two-stage Sankey when you want to show a simple source-to-destination flow: where did this quantity come from, and where did it go? Use a three-stage Sankey when the flow passes through an intermediate category that is analytically meaningful: where did it come from, how was it processed, and where did it end up?
The three-stage variant in the Scrollchart catalog above adds a middle column. The animated build order (left to middle to right) reinforces the directionality of the flow, making it easier for readers to trace individual paths.
Free forever
The diagrams and explainer text are served from scrollchart.com so the content can be updated over time to reflect new examples and research or to link to relevant sources within the explainer. No subscription, no ads, no tracking pixels served to your readers.
Frequently asked
How do I make a Sankey diagram for free?
Scrollchart provides free animated Sankey diagrams you can embed in any website with one line of HTML. Two-stage and three-stage variants are available now. For more complex data-driven Sankey diagrams where you supply your own data, SankeyMATIC (sankeymatic.com) is a well-regarded free online tool that exports SVG or PNG.
What is a Sankey diagram used for?
Sankey diagrams are used to visualize how a quantity flows or is distributed across categories. The width of each band is proportional to the quantity it represents. Common uses include energy flow analysis (where electricity or fuel goes from source to end use), budget allocation (from revenue sources to expense categories), marketing funnel analysis (from traffic source to conversion), and user flow analysis (how users move through a website or app).
How do I embed a Sankey diagram in WordPress?
Copy the two-line HTML snippet from this page and paste it into a Custom HTML block in the WordPress Gutenberg editor. The Sankey diagram loads from scrollchart.com and animates when the reader scrolls to it. Alternatively, use the Scrollchart WordPress plugin (launching 2026) for a native Gutenberg block.
What is the difference between a Sankey diagram and an alluvial diagram?
Both show flow between categories using bands with width proportional to quantity. The distinction is primarily about what changes between stages. A Sankey diagram typically shows how a single quantity (energy, budget, traffic) flows from sources to sinks. An alluvial diagram typically shows how a population is distributed across categorical variables at multiple time points or across multiple classification dimensions.
How many stages can a Sankey diagram have?
There is no mathematical limit. In practice, Sankey diagrams become hard to read beyond four or five stages because the bands become too narrow and crossing flows create visual clutter. For complex multi-stage flows, an alluvial diagram or parallel-sets diagram may be more legible. The Scrollchart catalog includes two-stage and three-stage Sankey variants.
Who invented the Sankey diagram?
Captain Matthew Henry Phineas Riall Sankey, an Irish engineer, introduced the diagram in 1898 to visualize the energy efficiency of a steam engine. He showed how much of the input coal energy was converted to useful work versus lost as heat. The diagram type has been named after him ever since.
Can I make a Sankey diagram in another language?
Yes. The Scrollchart Sankey diagram maker, like the rest of the catalogue and the AI generator, supports every major language. Type your flow labels, node names, and headings in English, French, Spanish, German, Mandarin, Hindi, Arabic, Japanese, Portuguese, and more — the rendered SVG uses your prompt language unchanged.
Browse all flow diagrams
Sankey variants, alluvial flow, arc diagrams, chord diagrams, and more in the Scrollchart catalog.
Browse the free catalog →More than Sankey diagrams — explore the catalogue
Free AI chart generator
Paste your data, a finding, or a URL. The generator picks the right chart type and produces an animated, embeddable diagram in seconds.
Open the generator →100+ animated diagrams
Hand-built across 17 subjects: science, finance, fitness, law, engineering, and more. Filter by topic, copy one line of HTML, done.
Browse the catalogue →Now available in every major language: prompt in English, French, Spanish, German, Mandarin, Hindi, Arabic, Japanese, Portuguese, and more — the diagram labels render in the language you ask for.