Sankey Diagram Maker

How the Sankey Diagram Maker works

How the Sankey diagram maker works

Most charts answer "how much?". A Sankey diagram answers "how much went where?", which is the question behind budgets, energy balances, supply chains and conversion funnels. Because every band is drawn at a width proportional to its value, the biggest flows are impossible to miss and the small leaks are visible without reading a single number. A table of forty transfers hides the story; a Sankey diagram shows it at a glance.

Where Sankey diagrams are used

The form is named after Captain Matthew Sankey, who in 1898 drew the energy flow of a steam engine to show how little of the coal's heat became useful work. Charles Minard's 1869 map of Napoleon's march on Moscow uses the same idea, with a band that shrinks from 422,000 men to 10,000. Today the best known examples are national energy flow charts, such as the Lawrence Livermore chart of US energy, which shows that roughly two thirds of primary energy ends up as rejected heat. Finance teams use them to show income splitting into tax, costs and profit; public bodies use them to show where tax revenue is spent; product teams use them to show how visitors move from landing page to signup to purchase; and job seekers post them to show how many applications became interviews and offers.

Writing the flows

One flow per line: a source, an arrow, a target, a comma and a value, for example "Salary -> Income, 4200". The arrow can be "->", "=>", ">" or a tab, whichever your spreadsheet or notes produce. A line without a value counts as 1, which is enough for diagrams that only show connections. Lines starting with "#" are ignored, so you can leave notes in the text. Names are matched exactly, so "Income" and "income" are two different nodes.

How the layout works

Every node is placed in a stage according to the longest chain of flows that reaches it, so a node that receives from stage two always sits in stage three or later. Justify pushes nodes with no outgoing flow to the right edge, the usual look for a budget or energy balance. Left keeps each node as far left as its inputs allow, which suits process diagrams where the stages mean something. Within a stage the nodes are sorted by the average position of their neighbours and nudged apart, repeated a few times, which removes most crossings for a diagram of slide size. The diagram grows taller with the number of flows so the bands stay readable.

Expert tips and pitfalls

Flows should balance. What enters a node should equal what leaves it, unless the node is a start or an end. If "Income" receives 4,200 but sends out 3,900, the missing 300 is a real finding (unallocated money, unmeasured loss) and deserves its own named band such as "Unaccounted". Readers assume a Sankey diagram conserves quantity; a diagram that quietly does not will mislead them.

Use one unit throughout. Mixing kilowatt-hours with litres, or monthly with annual figures, makes band widths meaningless. Convert first, then chart.

Keep it to about 30 nodes. Beyond that the bands turn into spaghetti. Group the long tail into an "Other" node, or split the story into two diagrams, one for sources and one for uses.

Loops are not allowed. A Sankey diagram is a directed flow and cannot contain a cycle. If a chain leads back to an earlier node, the page reports which node the loop passes through. The usual fix is to split the node in time, for example "Savings" and "Savings (next year)".

Colour with a purpose. Band colour follows the source by default, so you can trace each stream all the way across. Target colours bands by where they end, which is better when the question is "what makes up each output". Grey leaves the node colours to carry all the meaning, useful when one highlighted node matters most. Pick number formats to match the data: currency for budgets, percentages for funnels.

Nodes need room. Node width sets the thickness of the bars and node gap the space between bars in a stage. A larger gap makes long labels easier to read but shrinks every band, so small flows can fall below one pixel.

For diagrams where the flows run both ways between the same groups, such as migration between regions, a chord diagram is the better form; the chord diagram maker in the related tools uses the same text format.

How to read the result

Start with the widest band: that is the dominant flow, and usually the headline. Then look for the thinnest bands leaving a node, which are the leaks and exceptions a table would bury. Node height is the total through that node, so two nodes of equal height carry equal amounts whatever their position. Hover a band to see its exact value in the chosen format. Download SVG for a vector file that stays sharp and can be edited in Inkscape, Illustrator or Figma, with names and values kept as text; Download PNG renders at one, two or three times the preview width for chat, email and slides. Everything is drawn in your browser and the text never leaves your machine.

Related tools