Mermaid Sankey Diagrams

calendarDec 12, 2024 · 2 min read · mermaid sankey flow data-visualization diagram diagrams  ·
Share on: linkedincopy

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:

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:

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:

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:

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