> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/mermaid-js/mermaid/llms.txt
> Use this file to discover all available pages before exploring further.

# Sankey diagrams

> Visualize flow and distribution between nodes with Sankey diagrams in Mermaid.

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.

<Note>
  Sankey diagrams are experimental. The syntax is very close to plain CSV and may be extended in the future.
</Note>

## Basic example

```mermaid theme={null}
---
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
```

## Syntax overview

The syntax is simple: type `sankey` keyword first, then paste CSV data below:

```
sankey

source,target,value
```

The CSV format follows [RFC 4180](https://www.ietf.org/rfc/rfc4180.txt) with two differences:

* CSV must contain exactly 3 columns
* Empty lines without comma separators are allowed

### Basic format

The three columns represent `source`, `target`, and `value`:

```mermaid theme={null}
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
```

### Empty lines

You can add empty lines for visual organization:

```mermaid theme={null}
sankey

Bio-conversion,Losses,26.862

Bio-conversion,Solid,280.322

Bio-conversion,Gas,81.144
```

### Commas in labels

Wrap labels containing commas in double quotes:

```mermaid theme={null}
sankey

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

### Double quotes in labels

Use two double quotes to include a double quote character:

```mermaid theme={null}
sankey

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

## Configuration

<Accordion title="Link colors">
  Customize link colors with the `linkColor` option:

  * `source` - Link uses source node color
  * `target` - Link uses target node color
  * `gradient` - Smooth transition between source and target colors
  * Hex code - Specific color like `#a1a1a1`

  ```html theme={null}
  <script>
    const config = {
      sankey: {
        linkColor: 'gradient',
      },
    };
    mermaid.initialize(config);
  </script>
  ```
</Accordion>

<Accordion title="Node alignment">
  Control graph layout with the `nodeAlignment` option:

  * `justify` (default)
  * `center`
  * `left`
  * `right`

  ```html theme={null}
  <script>
    const config = {
      sankey: {
        nodeAlignment: 'left',
      },
    };
    mermaid.initialize(config);
  </script>
  ```
</Accordion>

<Accordion title="Dimensions">
  Customize diagram size:

  ```html theme={null}
  <script>
    const config = {
      sankey: {
        width: 800,
        height: 400,
      },
    };
    mermaid.initialize(config);
  </script>
  ```
</Accordion>

## Complete example

This example shows energy flow in a system:

```mermaid theme={null}
---
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
```

<Tip>
  Sankey diagrams are excellent for visualizing material flows, energy transfers, cost distributions, and any process where you want to show proportional flows between categories.
</Tip>