Skip to content
MermaidViewer

Charts diagram

Mermaid Sankey Diagram

Show how quantities flow between categories with weighted links.

Basic sankey diagram example

Basic sankey diagram example diagram
mermaid
sankey

Revenue,Salaries,420
Revenue,Infrastructure,120
Revenue,Marketing,160
Revenue,Profit,300
Marketing,Ads,100
Marketing,Content,60
Infrastructure,Cloud,90
Infrastructure,Tools,30
Open in the live editor

Sankey 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

SyntaxWhat it does
sankeyStart a sankey diagram (older versions use sankey-beta).
source,target,valueOne flow per line, CSV style.
"Name, with comma",target,5Quote names that contain commas.
Empty linesAllowed to visually group lines.

Sankey Diagram examples

Signup funnel

Where visitors drop off on the way to becoming customers.

Signup funnel diagram
mermaid
sankey

Visitors,Signed up,3000
Visitors,Bounced,7000
Signed up,Activated,1800
Signed up,Inactive,1200
Activated,Paying,450
Activated,Free,1350
Open in the live editor

Tips 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.