Mermaid中文文档

Appearance

Sankey 图 (v10.3.0+) ​

Sankey 图是一种用于描绘从一组值到另一组值流动的可视化工具。

WARNING

这是一个实验性的图表。它的语法非常接近纯 CSV，但在不久的将来会得到扩展。

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

示例 ​

此示例取自 observable。不过，在大小和颜色方面，渲染效果可能略有不同。

Code:
mermaid

语法 ​

语法的核心思想是用户首先键入 sankey-beta 关键字，然后粘贴下面的原始 CSV 并获得结果。

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

  • CSV 必须 仅包含 3 列
  • 允许为视觉目的而包含没有逗号分隔符的 空行

基本 ​

隐含的是 CSV 内的 3 列应分别表示 source、target 和 value：

Code:
mermaid

空行 ​

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

Code:
mermaid

逗号 ​

如果需要逗号，请将其用双引号括起来：

Code:
mermaid

双引号 ​

如果需要双引号，请在带引号的字符串中放置一对双引号：

Code:
mermaid

配置 ​

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

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