Sankey Chart Generator: Make an Editable Sankey Diagram Online
Create a Sankey diagram from your own flows: type nodes and amounts in a table, or paste a source, target, value list, and edit the result on the canvas.
A Sankey chart shows how a quantity splits and combines as it moves through stages. In QueryChart you build one from a table of flows, then adjust names, amounts, units and colours on the canvas.
Each row of the table is a node, and each row can list the nodes it flows to with an amount. The width of every ribbon in the diagram is that amount, so the picture always agrees with the numbers you typed. Change a figure and the ribbons resize at once.
The example above follows one household's monthly income into the budget categories it pays for. It is a good test of a Sankey generator because it has real structure: two sources merge into one pool, the pool splits three ways, and each branch splits again.
How to read this diagram
- Ribbon width is the amount: the Salary ribbon is about five times as wide as Freelance work because 3,200 is about five times 600.
- Everything that enters a node leaves it again, so the node's height is its total. Take-home pay is 3,800 in and 3,800 out.
- Read left to right: where the money comes from, what it is called once pooled, which category claims it, and what it is finally spent on.
- The figures are an invented example, not a recommended budget.
The data behind it
Illustrative household figures in euros per month, chosen so that every node balances. Replace them with your own.
| From | To | Amount (€) |
|---|---|---|
| Salary | Take-home pay | 3200 |
| Freelance work | Take-home pay | 600 |
| Take-home pay | Needs | 2100 |
| Take-home pay | Savings | 800 |
| Take-home pay | Wants | 900 |
| Needs | Housing | 1300 |
| Needs | Food | 500 |
| Needs | Transport | 300 |
| Savings | Emergency fund | 300 |
| Savings | Pension | 500 |
| Wants | Subscriptions | 150 |
| Wants | Leisure | 450 |
| Wants | Travel | 300 |
The same data as CSV
source,target,value
Salary,Take-home pay,3200
Freelance work,Take-home pay,600
Take-home pay,Needs,2100
Take-home pay,Savings,800
Take-home pay,Wants,900
Needs,Housing,1300
Needs,Food,500
Needs,Transport,300
Savings,Emergency fund,300
Savings,Pension,500
Wants,Subscriptions,150
Wants,Leisure,450
Wants,Travel,300How it works
List your nodes
Add one row per node: each source, stage and destination. Give every node a short name, because names become the labels on the diagram.
Add the flows and amounts
In the Flows to column, name the nodes each row flows to, then enter the amount for each flow. Use one unit for the whole chart and set it once.
Check the balance and style it
QueryChart flags a node that sends out more than it receives. Then choose alignment, colours and labels, and download the diagram as an image or PDF.
Frequently asked questions
Do I need to write code or use a special file format?
No. You type nodes and amounts into a table, or paste a source, target, value list. There is nothing to install and no syntax to learn.
Can I edit the diagram after it is generated?
Yes. Names, amounts, the unit, colours and the order of the nodes are all editable, and the diagram redraws as you type.
What if a node sends out more than it receives?
QueryChart marks it with a warning on the Amount cell so you can find the typo. A node that receives more than it sends is allowed, and the Suggestions panel offers to add an Other node for the difference.
Create this Sankey chart
Open this example as your own chart. Change the amounts, rename the nodes or replace everything with your data.