Skip to main content

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.

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.
Sankey diagrams are experimental. The syntax is very close to plain CSV and may be extended in the future.

​
Basic example

​
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 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:

​
Empty lines

You can add empty lines for visual organization:

​
Commas in labels

Wrap labels containing commas in double quotes:

​
Double quotes in labels

Use two double quotes to include a double quote character:

​
Configuration

Control graph layout with the nodeAlignment option:
  • justify (default)
  • center
  • left
  • right
<script>
  const config = {
    sankey: {
      nodeAlignment: 'left',
    },
  };
  mermaid.initialize(config);
</script>
Customize diagram size:
<script>
  const config = {
    sankey: {
      width: 800,
      height: 400,
    },
  };
  mermaid.initialize(config);
</script>

​
Complete example

This example shows energy flow in a system:
Sankey diagrams are excellent for visualizing material flows, energy transfers, cost distributions, and any process where you want to show proportional flows between categories.

Build docs developers (and LLMs) love

Get started for freeTalk to us