桑基图 (v10.3.0+) ​

桑基图是一种用于描绘从一组值到另一组值的流动的可视化图表。

被连接的事物称为节点，连接称为链接。

示例 ​

此示例取自 observable。不过，在大小和颜色方面，它可能会略有不同。

语法 ​

语法的背后理念是用户首先输入sankey-beta关键字，然后在下面粘贴原始CSV并获取结果。

它实现了CSV标准，如此处所述，但有一些细微的差异：

• CSV 必须包含 仅3列
• 为了视觉上的目的，允许有空行而不使用逗号分隔符

基础 ​

这意味着CSV中的3列应分别代表source、target和value：

空行 ​

CSV 默认不支持没有逗号分隔符的空行。但如果你需要，可以添加它们：

逗号 ​

如果你需要包含逗号，请用双引号将其包裹起来：

双引号 ​

如果你需要使用双引号，请在引用的字符串内放置一对双引号：

配置 ​

您可以自定义链接颜色、节点对齐方式和图表尺寸。

<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    sankey: {
      width: 800,
      height: 400,
      linkColor: 'source',
      nodeAlignment: 'left',
    },
  };
  mermaid.initialize(config);
</script>

链接颜色 ​

您可以通过将linkColor设置为以下之一来调整链接的颜色：

• source - 链接将显示为源节点颜色
• target - 链接将显示为目标节点的颜色
• gradient - 链接颜色将在源节点和目标节点颜色之间平滑过渡
• 颜色的十六进制代码，例如 #a1a1a1

节点对齐 ​

图形布局可以通过设置nodeAlignment来更改：

• justify
• center
• left
• right