Sankey Diagram

A Sankey diagram shows flows between categories, where the width of each band is proportional to the quantity flowing through it. Thicker bands represent larger flows; thinner bands represent smaller ones. Nodes on the left are sources; nodes on the right are destinations.

Sankey diagrams are excellent for visualising budgets, energy use, time allocation, or any situation where you want to show how a total quantity is distributed across multiple categories and sub-categories.

This diagram type is experimental and requires Mermaid v10.3 or later.

sankey-beta

Income,Housing,950
Income,Food,380
Income,Transport,220
Income,Entertainment,150
Income,Savings,300

Housing,Rent,750
Housing,Utilities,200

Food,Groceries,280
Food,Eating out,100

Transport,Public transport,120
Transport,Car costs,100

The source file is plain CSV: each line has a source node, a destination node, and a numeric value. The diagram draws itself from those three columns — no layout instructions needed.

Syntax

MARKDOWN

```mermaid
sankey-beta

Income,Housing,950
Income,Food,380
Income,Transport,220
Income,Entertainment,150
Income,Savings,300

Housing,Rent,750
Housing,Utilities,200

Food,Groceries,280
Food,Eating out,100

Transport,Public transport,120
Transport,Car costs,100
```

For more Sankey diagram syntax see the Sankey diagram documentation at mermaid.js.org