サンキー図は、システム内の異なるノード間を流れる数量の方向性を描写するために使用される非常に効果的な可視化ツールです。接続リンクの物理的な幅を数値的な流れの量に比例してスケーリングすることで、エンジニア、アナリスト、運用チームが、エネルギー網、サプライチェーン、金融ポートフォリオなど複雑なネットワーク内の主要な貢献者、リソース配分、非効率性、漏洩などを即座に把握できます。
基本的な構文構造
サンキーのレイアウト定義は、最適化された3カラムのCSV（カンマ区切り値）構造形式に基づいています。すべてのファイルは、次のいずれかの “sankey または “sankey-beta というタイプ宣言ヘッダーで始まり、個々の流れラインが厳密な “Source,Target,Value というパターンを追跡します。
sankey
ソースノード,宛先ターゲット,150.50
宛先ターゲット,最終出力ノード,90.25
構文リファレンス
以下の表は、Mermaid.jsでサンキー図を正しく解析するために必要な主なデータルールとパラメータを説明しています。
| 構文要素 | タイプ要件 | 説明と使用ルール |
|---|---|---|
| 宣言 | キーワード識別子 | ストリームレンダリングレイアウトエンジンを初期化します。”sankey または後方互換性のある “sankey-beta という文字列を受け入れます。 |
| ソースノード | 文字列ラベル | リソースの流れが開始される元のカテゴリです。大文字小文字を区別する識別子です。 |
| ターゲットノード | 文字列ラベル | 特定のリンクボリュームが終了する受信ノード。 |
| 値 | 正の浮動小数点数 / 整数 | フローの数値的な重み。レンダリングされたパスの太さは、この値に対して直接計算される。 |
| コメント行 | 構文インジケーター | ダブルパーセント記号（”%%）で始まるすべてのテキストはコンパイラによって無視され、クリーンなデータ注釈が可能になる。 |
ノードラベル内の特殊文字の取り扱い
コンマと引用符はレイアウトエンジン内で構造的なシステム区切り文字として機能するため、特別な名前入力には、フロントエンドキャンバス上で正しく表示されるようにするための特定のエスケープ技術が必要となる。
1. 名前内のコンマ
特定のノードラベルに実際のコンマが必要な場合、ノード文字列全体を標準のダブルクォーテーションのペアで囲む：
2. 名前内の引用符
ラベル名内にダブルクォーテーションを明示的に表示するには、全体のパラメータを外側のクォーテーションで囲み、ターゲット値文字列内でダブルクォーテーションの重複ペア（”""）を使用する：
高度なテーマ設定（ディレクティブ）
ドキュメントスニペットの先頭にフロントマター設定ブロックを渡すことで、図の表示を微調整できます。これにより、リンクスタイル、レイアウトの余白、テキストスタイル、要素の配置を、そのままのテキストエディタから直接制御できます。
サンキー設定属性マトリクス
| プロパティ名 | 許容される値 | 視覚的結果 |
|---|---|---|
showValues |
true | false |
数値のフロー値テキストがノードのラベルボックス内に直接印刷されるかどうかを切り替えます。 |
linkColor |
'source' | 'target' | 'gradient' | '#hex' |
リンクパスの色マッピングを決定します。'gradient'接続されたエンティティの間で色を滑らかに混合します。 |
nodeAlignment |
'justify' | 'left' | 'right' | 'center' |
構造的な列をキャンバスのスペースグリッドに沿って整列します。 |
labelStyle |
'legacy' | 'outlined' |
'outlined'テキストの背景にストロークマスクを追加することで、複雑なレイアウト上でも高いスキャン可能性を保証します。 |
nodeWidth |
整数（ピクセル） | ノードの矩形の幅を設定します（デフォルト：10). |
nodePadding |
整数（ピクセル） | 積み重ねられた行間の垂直間隔パラメータを設定します（デフォルト：12). |
実世界のブループリント：クリーンエネルギー格子配布
この包括的なブループリントはインフラ構造の電力グリッド管理システムを追跡します。スムーズなリンク色グラデーションの設定、アウトラインタイプのスタイル、インラインメトリクスカウントの無効化といったフロントマター設定を、マルチティアレイアウト構造と組み合わせて示しています。
---
config:
sankey:
showValues: false
linkColor: 'gradient'
nodeAlignment: 'justify'
labelStyle: 'outlined'
nodeWidth: 15
nodePadding: 18
---
sankey
%% ソースデータ行
太陽光発電所,電力貯蔵グリッド,120.50
風力タービン,電力貯蔵グリッド,180.75
水力発電所,直接工業ライン,210.00
バイオ燃料輸入,熱バックアップステーション,45.25
%% 配布ノード
電力貯蔵グリッド,住宅用消費者ライン,145.00
電力貯蔵グリッド,直接工業ライン,110.25
電力貯蔵グリッド,システム損失および散逸,46.00
%% 最終配送終端ノード
直接工業ライン,重工業ハブ,295.00
直接工業ライン,商業小売セクター,25.25
熱バックアップステーション,商業小売セクター,45.25
一般的な構文の落とし穴とシステム制約
非常に密集したデータ配列をコンパイルする際、わずかな構成エラーがレイアウトのパース中断を引き起こすことがあります。以下のトラブルシューティングルールを頭に置いておいてください：
- 正確な列の検証：メインヘッダー宣言の後に続くすべてのアイテム行は、正確に3つのカンマ区切りパラメータを含む必要があります。4番目の列を追加するか、値の重みを欠くと、図のコンパイルが完全に停止します。
- 空行の許容：従来の厳格なデータパースルールとは異なり、Mermaidではコードブロック内に空行を追加して、モデルデータの異なる層や処理フェーズを論理的に分離することができます。
- 循環ループブロック：Sankey構造は厳密に有向非巡回グラフ（DAG）に基づいて設計されています。ノードAをノードBに接続した後、ノードBをノードAに戻す行パスを記述しようとすると、レイアウトエンジンの数学的処理がフィードバックブレイクを起こし、エラーになります。
- 値データの制約：値フィールドは正の数のみを解析できます。負の値やアルファベット文字は、幅パラメータにレンダリングできません。