桑基图 (v10.3.0+)

¥Sankey diagram (v10.3.0+)

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

¥A sankey diagram is a visualization used to depict a flow from one set of values to another.

WARNING

This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future.

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

¥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-beta 关键字，然后将原始 CSV 粘贴到下面并获取结果。

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

它实现 CSV 标准为 此处描述，但有细微的差别：

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

• CSV 必须仅包含 3 列

  ¥CSV must contain 3 columns only

• 为了视觉目的，允许有没有逗号分隔符的空行

  ¥It is allowed to have empty lines without comma separators for visual purposes

基本的

¥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 - 链接将具有源节点颜色

  ¥source - link will be of a source node color

• target - 链接将具有目标节点颜色

  ¥target - link will be of a target node color

• gradient - 链接颜色将在源节点颜色和目标节点颜色之间平滑过渡

  ¥gradient - link color will be smoothly transient between source and target node colors

• 颜色的十六进制代码，如 #a1a1a1

  ¥hex code of color, like #a1a1a1

节点对齐

¥Node Alignment

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

¥Graph layout can be changed by setting nodeAlignment to:

• justify

• center

• left

• right