Sankey diagrams as code

Weighted flow: one line per flow, and the number sets the ribbon's thickness. The weights are the whole point of a sankey, so the value is part of the grammar rather than an optional attribute.

sankey
title: Where the energy goes

Coal -> Electricity : 40
Gas -> Electricity : 25
Solar -> Electricity : 15
Electricity -> Homes : 45
Electricity -> Industry : 25
Electricity -> Losses : 10

The flow line#

From -> To : value. Mermaid's CSV form (From, To, 40) is accepted too, so a pasted sankey-beta block works as-is.

• Nodes are implied by the flows — there is nothing to declare, and a node cannot exist without a flow to justify it.
• Columns are derived: a node sits one step right of its furthest upstream source.
• A node's height is its throughput, the larger of what enters and what leaves.
• Values must be positive. A zero, a negative, or a self-flow is dropped, because none of them has a ribbon to draw.

sankey
title: Signup funnel

Visitors -> Signed up : 2400
Visitors -> Bounced : 7600
Signed up -> Activated : 1500
Signed up -> Dormant : 900
Activated -> Paid : 380
Activated -> Free : 1120

Ribbons are filled bands rather than thick lines, which is what lets them taper between two different weights and sit flush against the node bars. They are drawn geometry, so moving a single node by hand does not reshape its bands — edit the values and redraw instead.

Importing from Mermaid#

sankey-beta converts directly: each CSV row becomes a flow, keeping its weight. A row with no usable number is dropped rather than drawn as a weightless line. See importing from Mermaid.