Skip to content
Mernyx
Open menu

Mermaid Sankey Diagram Cheat Sheet

A flow, written as three fields per line.

Every picture on this page was drawn byMernyx, the native Mermaid editor for macOS. Not by a browser running Mermaid.js — the same renderer the app uses for its canvas.

The basic form

One link per line: where it comes from, where it goes, and how much. Three fields, commas between them.

sankey
  A, B, 10
  A, C, 5
  B, D, 3
A sankey diagram with four nodes, A, B, C and D, and three bands joining them.Expand diagram

Names with spaces

A name may have spaces in it. The commas are what separate the three fields, not the words.

sankey
  Coal, Power, 30
  Power, Homes, 20
  Power, Industry, 10
A sankey diagram with three nodes, Coal, Power and Homes, and two bands between them.Expand diagram

The value is the width

The same three fields with different numbers are a different picture — the band is as wide as the value.

sankey
  Solar, Grid, 60
  Wind, Grid, 25
  Grid, Homes, 70
  Grid, Industry, 15
A sankey diagram with Solar and Wind feeding a Grid node, and the Grid feeding Homes and Industry, the band to Homes noticeably wider.Expand diagram

Draw it in Mernyx.

Open a .mmd file, move a node on the canvas, and the source comes with it. Native on macOS, no browser involved.

Diagram preview