Sankey 图：流与链接

简介 / Introduction

Sankey 图（桑基图）用带宽度感的流线展示从一个节点到另一个节点的流量大小，适合表示能源分配、网站访问路径、预算流向等场景。PlantUML 本身没有原生 Sankey 图类型；Mermaid v11 提供了 sankey-beta 语法。本文对比两者的实现方式。

PlantUML 版

PlantUML 没有内置 Sankey 图，但可以用类图 + skinparam模拟简单的流量关系，配合 left to right direction 排列节点。如下示例展示了一条生产线上的物料流转：

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 "原材料" {
  [钢材] as steel
  [铝材] as alum
}
package "加工" {
  [切割] as cut
  [焊接] as weld
}
package "成品" {
  [框架] as frame
  [外壳] as shell
}

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

PlantUML 的流使用普通箭头，无法直接表达”流量大小”的宽度差异。若需真实宽度感，可借助 skinparam arrowThickness 结合多线条或自行渲染 SVG 后处理。

Mermaid 版

Mermaid v11 的 sankey-beta 是专门为 Sankey 图设计的语法，节点写在 sankey-beta 图表内，流用 --> 表示，去程和回程分别独立声明：

1
2
3
4
5
6
7
8
9
10
11

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

提示：sankey-beta 为 beta 语法，Mermaid 默认 bundle 并非所有 CDN 都启用。请确认编辑器使用的是包含 sankey-beta 的最新版 mermaid.min.js。

对比 / Side-by-side

小结 / Wrap-up

如果你的重点是展示流量大小而非节点关系，Mermaid sankey-beta 是更合适的选择——它自动计算流宽，数据感强。若只需表达流程走向而不需要量级比较，PlantUML 的普通箭头足以应付，且可以保持与项目其他图例风格一致。