Three-column flow with intermediate routing. Captures pipelines and processes.
A free, animated sankey (three stage) you can read here or embed on any website, from Scrollchart.
Sankey (Three Stage)
A three-stage Sankey adds an intermediate column of nodes between source and destination. Flows from the left column split or merge at the middle column before routing to the right. This lets the diagram trace a pipeline that transforms inputs rather than merely routing them.
As with all Sankey diagrams, the convention originates with Captain Matthew Henry Phineas Riall Sankey (1898): band width encodes volume, and the total width entering any node must equal the total width leaving it (conservation). Violations of this rule signal data errors.
Sankey's steam-engine efficiency diagram , Sankey, M. H. P. R. (1898) - Original publication establishing the width-proportional flow convention.
Energy flow: primary source (oil, gas, coal, renewables) to conversion technology (power plant, refinery) to end use (industry, transport, residential). Losses at each stage appear as bands that exit to a "waste heat" node, making inefficiency visible.
Recruiting funnel with intermediate routing: applicants split by department at stage 2, then further split between offers accepted and rejected at stage 3. Thin bands to accepted-offer nodes immediately flag bottleneck stages.
Supply-chain mapping: raw-material origins route through manufacturing facilities to product categories. Concentration risk is visible when many thin input bands feed one wide intermediate node.
Editorial pages where a quick visual replaces a wall of text
Content-marketing posts that need a clean, branded illustration
Source & accuracy
This sankey (three stage) is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.
Routing through an intermediate stage
A three-stage Sankey shows sources on the left, an intermediate stage in the middle, and destinations on the right. Flows originate from sources, split or merge at the intermediate stage, and terminate at destinations. The band width at each stage encodes volume. The three-stage structure is typical of manufacturing (raw material, factory, product), IT infrastructure (origin servers, edge caches, users), and logistics (suppliers, warehouses, retailers).
Reading the intermediate layer
The intermediate stage is often a process or bottleneck. If multiple sources route to one intermediate node, that node is a concentrator. If one intermediate node splits to many destinations, it is a distributor. The width of flows on each side of the intermediate layer shows whether sources are balanced (similar-width inflows) and whether the intermediate layer is overloaded (narrow outflows relative to inflows). This structure reveals where redistribution or rebalancing could improve system throughput.
Embed this diagram
Add this animated sankey (three stage) to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.
Reference
What this is
A free, embeddable, animated sankey (three stage) for any website.
Who uses it
Data journalists, Researchers & academics, Content marketers, News organizations.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.
Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback -
see the WordPress plugin page for details. Any format keeps
the same Core Web Vitals profile and the same explainer text.
By embedding, you acknowledge the diagram and explainer text are served from scrollchart.com and may be updated from time to time to reflect new research or to link to relevant sources within the explainer.
Frequently asked questions
Where can I get a free animated "Sankey (Three Stage)" for my website?
Scrollchart provides "Sankey (Three Stage)" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a sankey (three stage) in a blog post or article?
Paste the one-line HTML snippet from the Scrollchart diagram page into your post editor. It works in WordPress, Webflow, Ghost, and plain HTML with no plugin required. The animated diagram and its explainer text load from scrollchart.com and render directly in your page DOM.