Mermaid Sankey Diagrams

Sankey diagrams show flow between nodes, with link width proportional to flow quantity. Perfect for visualizing energy flows, data transfers, and resource movements.

Use Case

Use Sankey diagrams when you need to:

• Visualize flow quantities
• Show energy or resource flows
• Display data transfers
• Map process flows
• Visualize conversions

Code

1```mermaid
2sankey-beta
3    Source A,Target A,100
4    Source A,Target B,50
5    Source B,Target A,30
6    Source B,Target B,70
7```

Result:

sankey-beta
    Source A,Target A,100
    Source A,Target B,50
    Source B,Target A,30
    Source B,Target B,70

Examples

Example 1: Energy Flow

1```mermaid
2sankey-beta
3    Solar,Grid,80
4    Solar,Battery,20
5    Wind,Grid,60
6    Wind,Battery,40
7    Grid,Home,100
8    Battery,Home,30
9```

Result:

sankey-beta
    Solar,Grid,80
    Wind,Grid,60
    Grid,Home,100
    Battery,Home,30

Example 2: Data Pipeline

1```mermaid
2sankey-beta
3    Source A,Processing,1000
4    Source B,Processing,500
5    Processing,Database,1200
6    Processing,Analytics,300
7    Database,Archive,800
8    Analytics,Reports,300
9```

Result:

sankey-beta
    Source A,Processing,1000
    Source B,Processing,500
    Processing,Database,1200
    Processing,Analytics,300
    Database,Archive,800
    Analytics,Reports,300

Example 3: Large Energy System Sankey with Config

You can also provide a diagram-specific config in the frontmatter to control Sankey behaviour, for example to hide numeric values on the links:

 1```mermaid
 2---
 3config:
 4  sankey:
 5    showValues: false
 6---
 7sankey-beta
 8
 9Agricultural 'waste',Bio-conversion,124.729
10Bio-conversion,Liquid,0.597
11Bio-conversion,Losses,26.862
12Bio-conversion,Solid,280.322
13Bio-conversion,Gas,81.144
14Biofuel imports,Liquid,35
15Biomass imports,Solid,35
16Coal imports,Coal,11.606
17Coal reserves,Coal,63.965
18Coal,Solid,75.571
19District heating,Industry,10.639
20District heating,Heating and cooling - commercial,22.505
21District heating,Heating and cooling - homes,46.184
22Electricity grid,Over generation / exports,104.453
23Electricity grid,Heating and cooling - homes,113.726
24Electricity grid,H2 conversion,27.14
25Electricity grid,Industry,342.165
26Electricity grid,Road transport,37.797
27Electricity grid,Agriculture,4.412
28Electricity grid,Heating and cooling - commercial,40.858
29Electricity grid,Losses,56.691
30Electricity grid,Rail transport,7.863
31Electricity grid,Lighting & appliances - commercial,90.008
32Electricity grid,Lighting & appliances - homes,93.494
33Gas imports,NGas,40.719
34Gas reserves,NGas,82.233
35Gas,Heating and cooling - commercial,0.129
36Gas,Losses,1.401
37Gas,Thermal generation,151.891
38Gas,Agriculture,2.096
39Gas,Industry,48.58
40Geothermal,Electricity grid,7.013
41H2 conversion,H2,20.897
42H2 conversion,Losses,6.242
43H2,Road transport,20.897
44Hydro,Electricity grid,6.995
45Liquid,Industry,121.066
46Liquid,International shipping,128.69
47Liquid,Road transport,135.835
48Liquid,Domestic aviation,14.458
49Liquid,International aviation,206.267
50Liquid,Agriculture,3.64
51Liquid,National navigation,33.218
52Liquid,Rail transport,4.413
53Marine algae,Bio-conversion,4.375
54NGas,Gas,122.952
55Nuclear,Thermal generation,839.978
56Oil imports,Oil,504.287
57Oil reserves,Oil,107.703
58Oil,Liquid,611.99
59Other waste,Solid,56.587
60Other waste,Bio-conversion,77.81
61Pumped heat,Heating and cooling - homes,193.026
62Pumped heat,Heating and cooling - commercial,70.672
63Solar PV,Electricity grid,59.901
64Solar Thermal,Heating and cooling - homes,19.263
65Solar,Solar Thermal,19.263
66Solar,Solar PV,59.901
67Solid,Agriculture,0.882
68Solid,Thermal generation,400.12
69Solid,Industry,46.477
70Thermal generation,Electricity grid,525.531
71Thermal generation,Losses,787.129
72Thermal generation,District heating,79.329
73Tidal,Electricity grid,9.452
74UK land based bioenergy,Bio-conversion,182.01
75Wave,Electricity grid,19.013
76Wind,Electricity grid,289.366
77```

Result:

---
config:
  sankey:
    showValues: false
---
sankey-beta

Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
Bio-conversion,Losses,26.862
Bio-conversion,Solid,280.322
Bio-conversion,Gas,81.144
Biofuel imports,Liquid,35
Biomass imports,Solid,35
Coal imports,Coal,11.606
Coal reserves,Coal,63.965
Coal,Solid,75.571
District heating,Industry,10.639
District heating,Heating and cooling - commercial,22.505
District heating,Heating and cooling - homes,46.184
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14
Electricity grid,Industry,342.165
Electricity grid,Road transport,37.797
Electricity grid,Agriculture,4.412
Electricity grid,Heating and cooling - commercial,40.858
Electricity grid,Losses,56.691
Electricity grid,Rail transport,7.863
Electricity grid,Lighting & appliances - commercial,90.008
Electricity grid,Lighting & appliances - homes,93.494
Gas imports,NGas,40.719
Gas reserves,NGas,82.233
Gas,Heating and cooling - commercial,0.129
Gas,Losses,1.401
Gas,Thermal generation,151.891
Gas,Agriculture,2.096
Gas,Industry,48.58
Geothermal,Electricity grid,7.013
H2 conversion,H2,20.897
H2 conversion,Losses,6.242
H2,Road transport,20.897
Hydro,Electricity grid,6.995
Liquid,Industry,121.066
Liquid,International shipping,128.69
Liquid,Road transport,135.835
Liquid,Domestic aviation,14.458
Liquid,International aviation,206.267
Liquid,Agriculture,3.64
Liquid,National navigation,33.218
Liquid,Rail transport,4.413
Marine algae,Bio-conversion,4.375
NGas,Gas,122.952
Nuclear,Thermal generation,839.978
Oil imports,Oil,504.287
Oil reserves,Oil,107.703
Oil,Liquid,611.99
Other waste,Solid,56.587
Other waste,Bio-conversion,77.81
Pumped heat,Heating and cooling - homes,193.026
Pumped heat,Heating and cooling - commercial,70.672
Solar PV,Electricity grid,59.901
Solar Thermal,Heating and cooling - homes,19.263
Solar,Solar Thermal,19.263
Solar,Solar PV,59.901
Solid,Agriculture,0.882
Solid,Thermal generation,400.12
Solid,Industry,46.477
Thermal generation,Electricity grid,525.531
Thermal generation,Losses,787.129
Thermal generation,District heating,79.329
Tidal,Electricity grid,9.452
UK land based bioenergy,Bio-conversion,182.01
Wave,Electricity grid,19.013
Wind,Electricity grid,289.366

Notes

• Format: Source,Target,Value
• Link width proportional to value
• Nodes auto-created from connections
• Values should be positive numbers
• You can control Sankey behaviour via config.sankey frontmatter (for example, showValues: false to hide numeric labels)

Gotchas/Warnings

• ⚠️ Syntax: Use sankey-beta (experimental)
• ⚠️ Format: Must be Source,Target,Value (comma-separated)
• ⚠️ Values: Should be positive numbers
• ⚠️ Config: Frontmatter config support depends on your Mermaid integration
• ⚠️ Beta: Feature is in beta - syntax may change

Related Snippets

• Architecture Diagrams (C4 Model)
  Create system architecture diagrams using C4 model with Mermaid
• Chart.js Bar Chart
  Create bar charts for data visualization
• Graphviz DOT Diagrams
  Create complex graph layouts with Graphviz DOT language
• KaTeX Math Examples and Tips
  Comprehensive guide to KaTeX math notation with examples and tips
• Mermaid Arbitrary Graphs
  Create arbitrary graphs and networks with Mermaid
• Mermaid Block Diagrams
  Create block diagrams for system architecture with Mermaid
• Mermaid Charts (Pie, Bar, Line)
  Create pie charts, bar charts, and line charts with Mermaid
• Mermaid Class Diagrams (UML)
  Create UML class diagrams with Mermaid
• Mermaid Entity Relationship Diagrams
  Create Entity Relationship Diagrams (ERD) with Mermaid
• Mermaid Flowchart
  Create flowcharts and decision trees with Mermaid
• Mermaid Gantt Chart
  Create Gantt charts for project timelines and scheduling
• Mermaid Git Diagrams
  Create Git branch and commit diagrams with Mermaid
• Mermaid Kanban Boards
  Create Kanban boards for project management with Mermaid
• Mermaid Mindmaps
  Create mindmaps for brainstorming and organizing ideas with Mermaid
• Mermaid Packet Diagrams
  Create packet diagrams for network protocols with Mermaid
• Mermaid Quadrant Charts
  Create quadrant charts for prioritization with Mermaid
• Mermaid Radar Charts
  Create radar charts for multi-dimensional comparisons with Mermaid
• Mermaid Requirement Diagrams
  Create requirement diagrams for system requirements with Mermaid
• Mermaid Sequence Diagram
  Create sequence diagrams for interactions and API flows
• Mermaid State Diagrams
  Create state diagrams and state machines with Mermaid
• Mermaid Timeline Diagrams
  Create timeline diagrams for chronological events with Mermaid
• Mermaid Treemap Diagrams
  Create treemap diagrams for hierarchical data visualization with Mermaid
• Mermaid User Journey Diagrams
  Create user journey maps with Mermaid
• Mermaid ZenUML Diagrams
  Create ZenUML sequence diagrams with Mermaid
• P5.js Interactive Visualizations
  Create interactive visualizations and animations with P5.js