Mermaid 中文网

主题

桑基图 (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.

html
<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

标签样式 (v<MERMAID_RELEASE_VERSION>+) ​

🌐 Label Style (v<MERMAID_RELEASE_VERSION>+)

你可以通过设置 labelStyle 来改变节点标签的渲染方式：

🌐 You can change how node labels are rendered by setting labelStyle:

  • legacy（default）- 纯文本标签，根据节点的 x 坐标定位
  • outlined - 带有背景描边以提高可读性的标签，根据节点相对于中央节点的层级进行定位

节点宽度和内边距 (v<MERMAID_RELEASE_VERSION>+) ​

🌐 Node Width and Padding (v<MERMAID_RELEASE_VERSION>+)

你可以自定义节点尺寸：

🌐 You can customize the node dimensions:

  • nodeWidth - 节点矩形的宽度（以像素为单位，默认值：10）
  • nodePadding - 节点之间的垂直间距（像素，默认：12）

自定义节点颜色（v<MERMAID_RELEASE_VERSION>及以上） ​

🌐 Custom Node Colors (v<MERMAID_RELEASE_VERSION>+)

你可以使用 nodeColors 映射为节点分配特定颜色。未列出的节点将使用默认配色方案。值必须是有效的 CSS 颜色（十六进制、rgb()、hsl() 或命名颜色）。

🌐 You can assign specific colors to nodes using the nodeColors map. Nodes not listed will use the default color scheme. Values must be valid CSS colors (hex, rgb(), hsl(), or named colors).

Opens in mermaid.ai