サンキーダイアグラムライブラリ比較

3つのアプローチでフローや流れ・変遷を可視化し、実装方法とスタイルを比較

rechartsv3.7.0 @nivo/corev0.99.0 d3-sankeyv0.12.3

📊 使用しているサンプルデータ

ECサイトのユーザー流入経路から購入完了までのフローデータです。ノードとリンクの2つの配列で構成されます。

{
  "nodes": [
    {
      "id": "検索流入"
    },
    {
      "id": "SNS流入"
    },
    {
      "id": "直接流入"
    },
    {
      "id": "広告流入"
    },
    {
      "id": "トップページ"
    },
    {
      "id": "商品一覧"
    },
    {
      "id": "商品詳細"
    },
    {
      "id": "カート"
    },
    {
      "id": "購入完了"
    },
    {
      "id": "離脱"
    }
  ],
  "links": [
    {
      "source": "検索流入",
      "target": "トップページ",
      "value": 4000
    },
    {
      "source": "SNS流入",
      "target": "トップページ",
      "value": 2000
    },
    {
      "source": "直接流入",
      "target": "トップページ",
      "value": 1500
    },
    {
      "source": "広告流入",
      "target": "商品詳細",
      "value": 2500
    },
    {
      "source": "トップページ",
      "target": "商品一覧",
      "value": 5200
    },
    {
      "source": "トップページ",
      "target": "離脱",
      "value": 2300
    },
    {
      "source": "商品一覧",
      "target": "商品詳細",
      "value": 3800
    },
    {
      "source": "商品一覧",
      "target": "離脱",
      "value": 1400
    },
    {
      "source": "商品詳細",
      "target": "カート",
      "value": 3200
    },
    {
      "source": "商品詳細",
      "target": "離脱",
      "value": 3100
    },
    {
      "source": "カート",
      "target": "購入完了",
      "value": 2100
    },
    {
      "source": "カート",
      "target": "離脱",
      "value": 1100
    }
  ]
}

1. Recharts（実験的サポート）

RechartsはSankeyコンポーネントを実験的機能として提供。node・linkのデータをそのまま渡すだけで基本的なサンキーダイアグラムを描画できる。ただし実験的機能のためAPIが変更される可能性があり、本番利用には注意が必要。

✓ 実験的機能✓ 宣言的API✓ Reactネイティブ

特徴: Reactコンポーネントとして宣言的に実装可能。ただしAPIは実験的段階のため変更される可能性があります。

tsx

'use client';
import { Sankey, Tooltip, ResponsiveContainer } from 'recharts';

const data = {
  nodes: [
    { name: '訪問者' }, { name: '検索流入' }, { name: 'SNS流入' },
    { name: '購入' }, { name: '登録' }, { name: '離脱' },
  ],
  links: [
    { source: 0, target: 1, value: 5000 },
    { source: 0, target: 2, value: 3000 },
    { source: 1, target: 3, value: 1200 },
    { source: 1, target: 4, value: 800 },
    { source: 1, target: 5, value: 3000 },
    { source: 2, target: 3, value: 600 },
    { source: 2, target: 4, value: 400 },
    { source: 2, target: 5, value: 2000 },
  ],
};

export function RechartsSankeyDiagram() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <Sankey data={data} nodePadding={16} link={{ stroke: '#aaa', strokeOpacity: 0.3 }}>
        <Tooltip />
      </Sankey>
    </ResponsiveContainer>
  );
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、Recharts（実験的サポート）を使ったサンキーダイアグラムを実装してください。

- 使用ライブラリ: recharts の Sankey・Tooltip コンポーネント（実験的機能）
- サンプルデータ: ECサイトのユーザー流入経路から購入完了までのフロー（10ノード・12リンク）を用意すること。links の source・target はノードの数値インデックスで指定すること
- インタラクティブ: Tooltip コンポーネントを追加してホバー時にノード・リンクの値を表示すること
- フロー表示: リンクの幅でフロー量を視覚的に表現すること（自動計算）
- 設定: nodePadding・nodeWidth・margin を指定して基本的なレイアウトを調整すること
- 注意: 実験的機能のためAPIが変更される可能性があること、本番利用には注意が必要であることをコメントに記載すること

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

2. Nivo（@nivo/sankey）

@nivo/sankeyパッケージでサンキーダイアグラムをネイティブサポート。ノードの色・幅・余白、リンクの透明度・カーブなど豊富なカスタマイズが可能。ホバー時のハイライトやツールチップも標準搭載で、視覚的に洗練されたフロー図を簡単に実装できる。

✓ 専用パッケージ✓ 美しいデザイン✓ インタラクティブ

特徴: 豊富なカスタマイズオプションとインタラクション機能を標準搭載。本番利用に最もおすすめ。

tsx

'use client';
import { ResponsiveSankey } from '@nivo/sankey';

const data = {
  nodes: [
    { id: '訪問者' }, { id: '検索流入' }, { id: 'SNS流入' },
    { id: '購入' }, { id: '登録' }, { id: '離脱' },
  ],
  links: [
    { source: '訪問者', target: '検索流入', value: 5000 },
    { source: '訪問者', target: 'SNS流入', value: 3000 },
    { source: '検索流入', target: '購入', value: 1200 },
    { source: '検索流入', target: '登録', value: 800 },
    { source: '検索流入', target: '離脱', value: 3000 },
    { source: 'SNS流入', target: '購入', value: 600 },
    { source: 'SNS流入', target: '登録', value: 400 },
    { source: 'SNS流入', target: '離脱', value: 2000 },
  ],
};

export function NivoSankeyDiagram() {
  return (
    <div style={{ height: 400 }}>
      <ResponsiveSankey
        data={data}
        margin={{ top: 40, right: 180, bottom: 40, left: 50 }}
        align="justify"
        colors={{ scheme: 'category10' }}
        nodeThickness={18}
        nodeSpacing={24}
        linkOpacity={0.3}
        enableLinkGradient={true}
        labelPosition="outside"
        labelPadding={16}
      />
    </div>
  );
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、Nivo（@nivo/sankey）を使ったサンキーダイアグラムを実装してください。

- 使用ライブラリ: @nivo/sankey の ResponsiveSankey コンポーネント
- サンプルデータ: ECサイトのユーザー流入経路から購入完了までのフロー（10ノード・12リンク）を { nodes: [{ id }], links: [{ source, target, value }] } 形式で用意すること
- インタラクティブ: ホバー時にノードとリンクのハイライト・ツールチップを表示すること（標準搭載）
- フロー表示: enableLinkGradient={true} でリンクをグラデーション表現し、linkOpacity・linkContract でスタイルを調整すること
- レスポンシブ: ResponsiveSankey を使って親要素の幅に応じてサイズが変わるよう対応すること
- スタイリング: colors・nodeThickness・nodeSpacing・labelPosition・labelOrientation を設定して洗練されたデザインにすること

3. D3.js（カスタム実装）

d3-sankeyプラグインを使用したカスタム実装。レイアウト計算をD3に任せつつ、SVG描画をReactで制御するアプローチ。実装コストは高いが、ノードの配置・リンクのカーブ・アニメーションまで完全にコントロールできる。大規模・複雑なフロー図に最適。

✓ 完全カスタマイズ✓ d3-sankey✓ 高い表現力

特徴: d3-sankeyでレイアウトを計算し、ReactでSVG描画。実装コストが高い分、完全なカスタマイズが可能。

tsx

'use client';
import { useEffect, useRef } from 'react';
import * as d3 from 'd3';
import { sankey, sankeyLinkHorizontal } from 'd3-sankey';

const rawData = {
  nodes: ['訪問者', '検索流入', 'SNS流入', '購入', '登録', '離脱'].map(name => ({ name })),
  links: [
    { source: 0, target: 1, value: 5000 },
    { source: 0, target: 2, value: 3000 },
    { source: 1, target: 3, value: 1200 },
    { source: 1, target: 4, value: 800 },
    { source: 1, target: 5, value: 3000 },
  ],
};

export function D3SankeyDiagram() {
  const svgRef = useRef<SVGSVGElement>(null);

  useEffect(() => {
    const svg = d3.select(svgRef.current);
    const { width, height } = svgRef.current!.getBoundingClientRect();
    const layout = sankey().nodeWidth(15).nodePadding(10).size([width, height]);
    const { nodes, links } = layout(rawData as any);

    svg.selectAll('rect').data(nodes).enter().append('rect')
      .attr('x', (d: any) => d.x0).attr('y', (d: any) => d.y0)
      .attr('width', (d: any) => d.x1 - d.x0).attr('height', (d: any) => d.y1 - d.y0)
      .attr('fill', '#3b82f6');

    svg.selectAll('path').data(links).enter().append('path')
      .attr('d', sankeyLinkHorizontal() as any)
      .attr('fill', 'none').attr('stroke', '#aaa').attr('stroke-opacity', 0.3)
      .attr('stroke-width', (d: any) => Math.max(1, d.width));
  }, []);

  return <svg ref={svgRef} style={{ width: '100%', height: 300 }} />;
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、D3.js（カスタム実装）を使ったサンキーダイアグラムを実装してください。

- 使用ライブラリ: d3-sankey の sankey（createSankeyLayout）・sankeyLinkHorizontal でレイアウトを計算し、SVG描画をReactで制御するカスタム実装
- サンプルデータ: ECサイトのユーザー流入経路から購入完了までのフロー（10ノード・12リンク）を用意すること
- インタラクティブ: なし（表示専用。高度なインタラクションは別途 useStateで実装すること）
- フロー表示: sankeyLinkHorizontal() でリンクのSVGパスを生成し、strokeWidth に link.width を設定してフロー量を表現すること
- レイアウト: nodeWidth・nodePadding・extent を設定してノードの配置を調整すること
- スタイリング: ノードは fill・fillOpacity で色分けし、リンクは stroke・strokeOpacity で半透明のフロー表現にすること

ライブラリ比較

アプローチ	レンダリング	サンキー対応	インタラクション	おすすめ用途
Recharts	SVG	△ 実験的	◯	プロトタイプ・検証用途
Nivo	SVG	◎ 専用パッケージ	◎	デザイン重視のダッシュボード
D3.js カスタム	SVG	◎ d3-sankey	◎	複雑・大規模なフロー図

選択のポイント

•Recharts: 手軽に試したい場合や社内ツールなどで実験的機能でも問題ない用途に。APIの安定性に注意が必要。
•Nivo: @nivo/sankeyが最もバランスが良く、導入コストを抑えつつ高品質なサンキーダイアグラムを実現できる。本番環境への導入に最もおすすめ。
•D3.js: ノードの手動配置や独自アニメーションなど、高度なカスタマイズが必要な場合に選択。実装コストは最も高い。