Mermaid sankey diagram syntax: flows, nodes and values with examples
Mermaid sankey-beta syntax with rendered examples: CSV source,target,value rows, multi-stage flows, quoted node names and weighted ribbons.
A Sankey diagram shows quantities moving between stages: a budget splitting into departments, traffic flowing through a funnel, energy losses through a system. Ribbon width is the value, so the picture is a proportion chart with a direction.
Everything on this page is rendered by makesPDF's own Mermaid renderer, so a ```mermaid block produces exactly this in the PDF.
Rows are CSV
After the sankey-beta header, every line is one link — source,target,value, no spaces around the commas required and no node declarations anywhere:
sankey-beta
Revenue,Salaries,480
Revenue,Infrastructure,220
Revenue,Marketing,140
Revenue,Operations,95Nodes appear in the column their links put them in, and within a column the renderer orders them to keep the ribbons from crossing. The layout is computed from the values, so there is nothing else to configure.
Multiple stages
Chaining rows through an intermediate node gives the diagram depth: the second stage's nodes are placed in a further column and their ribbons fan out from the first:
sankey-beta
Revenue,Salaries,480
Revenue,Infrastructure,220
Revenue,Marketing,140
Salaries,Engineering,260
Salaries,Sales,120
Salaries,Management,100
Infrastructure,Cloud,150
Infrastructure,Office,70
Marketing,Ads,90
Marketing,Events,50Quoted names
A name containing a comma or a space has to be double-quoted. A literal quote inside a quoted name is written twice (""):
sankey-beta
"Annual Budget",Salaries,480
"Annual Budget","Research & Development",95
"Annual Budget","Office, facilities",60
Salaries,"Sales & Support",120Unquoted single-word names work too — quoting is only required when the comma would otherwise split the field.
Repeated pairs
Two rows between the same pair of nodes are summed into one ribbon, which is how a diagram built from per-month rows behaves:
sankey-beta
Signups,Activated,120
Signups,Activated,80
Signups,Churned,40
Activated,Paying,150
Activated,Dormant,50Signups → Activated draws as 200, the sum of the two rows. Values must be zero or positive numbers; a row with a negative or non-numeric value, or any other row that cannot be parsed, is skipped rather than failing the diagram.
Not supported in makesPDF yet: a link that would create a cycle is dropped (and reported as a layout warning) so the layout cannot loop — restructure the data so flow only moves forward. Node and link styling is not applied, and node labels are drawn beside their column rather than inside the ribbon.