Sankey diagrams: flows and links

简介 / Introduction

A Sankey diagram uses width-encoded flow lines to show how quantities move between nodes, making it ideal for energy distribution, website visitor paths, or budget flows. PlantUML has no native Sankey type; Mermaid v11 provides sankey-beta syntax. This post compares both approaches.

PlantUML 版

PlantUML has no built-in Sankey diagram, but you can approximate simple flow relationships using a class diagram + skinparam, with left to right direction for layout. The example below models material flow on a production line:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

@startuml
skinparam backgroundColor #F9F9F9
skinparam defaultFontSize 12
left to right direction

package "Raw Materials" {
  [Steel] as steel
  [Aluminum] as alum
}
package "Processing" {
  [Cut] as cut
  [Weld] as weld
}
package "Finished Goods" {
  [Frame] as frame
  [Housing] as shell
}

steel  --> cut  : 100kg
alum   --> cut  : 50kg
cut    --> weld  : 150kg
weld   --> frame : 120kg
weld   --> shell : 30kg
@enduml

PlantUML flows are plain arrows — they cannot directly express magnitude differences. You can simulate width variation with multiple arrows or post-process the rendered SVG, but there’s no native Sankey layout.

Mermaid 版

Mermaid v11’s sankey-beta is purpose-built for Sankey diagrams. Nodes are listed inside the chart, and flows are declared with --> where the number encodes the quantity:

1
2
3
4
5
6
7
8
9
10
11

sankey-beta
  原材料
  切割
  焊接
  成品
  钢材 --> 切割 : 100
  铝材 --> 切割 : 50
  切割 --> 焊接 : 150
  焊接 --> 成品 : 120
  成品 --> 钢材 : 20
  成品 --> 铝材 : 10

Note: sankey-beta is a beta syntax. Not all CDN-hosted mermaid bundles include it — confirm the editor is serving a mermaid.min.js that has the sankey-beta parser registered.

对比 / Side-by-side

小结 / Wrap-up

If your goal is to show flow magnitude, Mermaid sankey-beta is the better fit — it auto-calculates flow widths and produces a data-rich visualization. If you only need to convey directional relationships without quantity encoding, PlantUML arrows work fine and keep your diagrams consistent with the rest of the project’s PlantUML set.