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 - リンクの色はソースとターゲットノードの色の間で滑らかに変化します
  • 色の16進数コード（例：#a1a1a1）

ノードの配置 ​

グラフのレイアウトは、nodeAlignmentを次のように設定することで変更できます：

  • justify
  • center
  • left
  • right