Sankey diagram (v10.3.0+)

A sankey diagram is a visualization used to depict a flow from one set of values to another.

The things being connected are called nodes and the connections are called links.

Example

This example taken from observable. It may be rendered a little bit differently, though, in terms of size and colors.

Code:

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

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

Ctrl + Enter|

Syntax

The idea behind syntax is that a user types sankey keyword first, then pastes raw CSV below and get the result.

It implements CSV standard as described here with subtle differences:

• CSV must contain 3 columns only
• It is allowed to have empty lines without comma separators for visual purposes

Basic

It is implied that 3 columns inside CSV should represent source, target and value accordingly:

Code:

sankey

%% source,target,value
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14

Ctrl + Enter|

Empty Lines

CSV does not support empty lines without comma delimiters by default. But you can add them if needed:

Code:

sankey

Bio-conversion,Losses,26.862

Bio-conversion,Solid,280.322

Bio-conversion,Gas,81.144

Ctrl + Enter|

Commas

If you need to have a comma, wrap it in double quotes:

Code:

sankey

Pumped heat,"Heating and cooling, homes",193.026
Pumped heat,"Heating and cooling, commercial",70.672

Ctrl + Enter|

Double Quotes

If you need to have double quote, put a pair of them inside quoted string:

Code:

sankey

Pumped heat,"Heating and cooling, ""homes""",193.026
Pumped heat,"Heating and cooling, ""commercial""",70.672

Ctrl + Enter|

Configuration

You can customize link colors, node alignments and diagram dimensions.

<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    sankey: {
      width: 800,
      height: 400,
      linkColor: 'source',
      nodeAlignment: 'left',
    },
  };
  mermaid.initialize(config);
</script>

Links Coloring

You can adjust links' color by setting linkColor to one of those:

• source - link will be of a source node color
• target - link will be of a target node color
• gradient - link color will be smoothly transient between source and target node colors
• hex code of color, like #a1a1a1

Node Alignment

Graph layout can be changed by setting nodeAlignment to:

• justify
• center
• left
• right

Label Style (v11.15.0+)

You can change how node labels are rendered by setting labelStyle:

• legacy (default) - plain text labels, positioned based on node x-coordinate
• outlined - labels with a background stroke for improved readability, positioned based on node layer relative to the central node

Code:

---
config:
  sankey:
    showValues: false
    labelStyle: outlined
---
sankey

Electricity grid,Heating and cooling - homes,113.726
Electricity grid,Industry,342.165
Electricity grid,Losses,56.691

Ctrl + Enter|

Node Width and Padding (v11.15.0+)

You can customize the node dimensions:

• nodeWidth - width of the node rectangles in pixels (default: 10)
• nodePadding - vertical padding between nodes in pixels (default: 12)

Code:

---
config:
  sankey:
    showValues: false
    nodeWidth: 15
    nodePadding: 20
---
sankey

Electricity grid,Heating and cooling - homes,113.726
Electricity grid,Industry,342.165
Electricity grid,Losses,56.691

Ctrl + Enter|

Custom Node Colors (v11.15.0+)

You can assign specific colors to nodes using the nodeColors map. Nodes not listed will use the default color scheme. Values must be valid CSS colors (hex, rgb(), hsl(), or named colors).

Code:

---
config:
  sankey:
    showValues: false
    nodeColors:
      Electricity grid: "#4e79a7"
      Industry: "#e15759"
      Losses: "#bab0ab"
---
sankey

Electricity grid,Heating and cooling - homes,113.726
Electricity grid,Industry,342.165
Electricity grid,Losses,56.691

Ctrl + Enter|