Basic sankey diagram example
sankey
Revenue,Salaries,420
Revenue,Infrastructure,120
Revenue,Marketing,160
Revenue,Profit,300
Marketing,Ads,100
Marketing,Content,60
Infrastructure,Cloud,90
Infrastructure,Tools,30Sankey diagrams visualise flows: how much of something moves from one category to another. Link width is proportional to the value, so the biggest flows are obvious at a glance.
Mermaid uses a CSV-like format — source, target, value — which makes it easy to paste data from a spreadsheet or SQL query.
When to use a sankey diagram
- Budget and cash-flow breakdowns
- Marketing and signup funnels
- Energy and material flows
- User navigation paths
Sankey Diagram syntax reference
| Syntax | What it does |
|---|---|
sankey | Start a sankey diagram (older versions use sankey-beta). |
source,target,value | One flow per line, CSV style. |
"Name, with comma",target,5 | Quote names that contain commas. |
Empty lines | Allowed to visually group lines. |
Sankey Diagram examples
Signup funnel
Where visitors drop off on the way to becoming customers.
sankey
Visitors,Signed up,3000
Visitors,Bounced,7000
Signed up,Activated,1800
Signed up,Inactive,1200
Activated,Paying,450
Activated,Free,1350Tips and best practices
- Make sure flows balance where it makes sense (inputs equal outputs) or the diagram will look lopsided.
- Keep node names identical across lines — Revenue and revenue are different nodes.
- Use quotes for any label containing a comma.
Generate a sankey diagram with AI
Not sure where to start? Describe what you need and the AI sankey diagram generator writes the Mermaid code for you. Try prompts like:
- “Household income to expenses flow”
- “Website traffic from channels to conversions”
- “Electricity generation by source to usage”
Sankey Diagram templates
Sankey Diagram FAQ
What format does a Mermaid sankey diagram use?
A CSV-like list with three columns: source, target and value. Each row creates a link whose width is proportional to the value.
Is it sankey or sankey-beta?
Recent Mermaid versions accept sankey; older versions required sankey-beta. MermaidViewer runs the latest Mermaid, so both work.