桑基图 (v10.3.0+)

🌐 Sankey diagram (v10.3.0+)

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

警告

这是一个实验性图表。它的语法与普通 CSV 非常接近，但将在不久的将来进行扩展。

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

🌐 The things being connected are called nodes and the connections are called links.

示例

🌐 Example

这个例子来源于 observable。不过，它的尺寸和颜色可能会有所不同。

🌐 This example taken from observable. It may be rendered a little bit differently, though, in terms of size and colors.

语法

🌐 Syntax

语法的概念是用户首先输入 sankey 关键词，然后在下面粘贴原始 CSV，就能得到结果。

🌐 The idea behind syntax is that a user types sankey keyword first, then pastes raw CSV below and get the result.

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

🌐 It implements CSV standard as described here with subtle differences:

• CSV 必须只包含 3 列
• 为了视觉效果，可以允许存在没有逗号分隔的空行

基础

🌐 Basic

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

🌐 It is implied that 3 columns inside CSV should represent source, target and value accordingly:

空行

🌐 Empty Lines

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

🌐 CSV does not support empty lines without comma delimiters by default. But you can add them if needed:

逗号

🌐 Commas

如果需要使用逗号，请将其放在双引号中：

🌐 If you need to have a comma, wrap it in double quotes:

双引号

🌐 Double Quotes

如果你需要使用双引号，可以在引号内放一对它们：

🌐 If you need to have double quote, put a pair of them inside quoted string:

配置

🌐 Configuration

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

🌐 You can customize link colors, node alignments and diagram dimensions.

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

链接着色

🌐 Links Coloring

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

🌐 You can adjust links' color by setting linkColor to one of those:

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

节点对齐

🌐 Node Alignment

可以通过将 nodeAlignment 设置为以下值来更改图布局：

🌐 Graph layout can be changed by setting nodeAlignment to:

• justify
• center
• left
• right