Mermaid

外観

Mermaidの開発者によるMermaidホワイトボードを試す

サンキーダイアグラム (v10.3.0+) ​

サンキーダイアグラムは、ある値の集合から別の値の集合への流れを表すために使用される視覚化です。

警告

これは実験的なダイアグラムです。その構文はプレーンなCSVに非常に近いですが、近い将来拡張される予定です。

接続されているものはノードと呼ばれ、接続はリンクと呼ばれます。

例 ​

この例はobservableから取得したものです。ただし、サイズと色の点で少し異なるレンダリングになる場合があります。

構文 ​

構文の基本的な考え方は、ユーザーが最初に`sankey-beta`キーワードを入力し、その下に生のCSVを貼り付けると、結果が得られるというものです。

これは、ここに記載されているCSV標準を、微妙な**違い**を伴って実装しています。

  • CSVは**3列のみ**を含める必要があります。
  • 視覚的な目的のために、コンマ区切り記号のない**空行**を含めることは**許可**されています。

基本 ​

CSV内の3列は、それぞれ`source`、`target`、`value`を表すことが暗黙的に想定されています。

空行 ​

CSVはデフォルトではコンマ区切り記号のない空行をサポートしていません。しかし、必要に応じて追加できます。

コンマ ​

コンマを含める必要がある場合は、二重引用符で囲みます。

二重引用符 ​

二重引用符を含める必要がある場合は、引用符で囲まれた文字列の中に2つペアで入れます。

設定 ​

リンクの色、ノードの配置、ダイアグラムの寸法をカスタマイズできます。

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`のようなカラーの16進コード。

ノードの配置 ​

`nodeAlignment`を以下に設定することで、グラフのレイアウトを変更できます。

  • justify
  • center
  • left
  • right