mcpField
R
reagraph

reagraph

github.com/reaviz開発450 回インストール20 週間前に更新
リポジトリ

reagraph について

Reagraph は、Three.js、React Three Fiber、D3、Graphology を基盤とする React 向けの WebGL グラフ可視化ライブラリです。力学的・階層的レイアウトを備えた、操作可能な 2D・3D ノードリンク図を描画できます。

主な機能

  1. 01操作可能な 2D・3D グラフ
  2. 02力学的・階層的レイアウト
  3. 03ノードとエッジのスタイル設定
  4. 04中心性などの属性に基づくノードサイズ
  5. 05選択、投げ縄、折りたたみ操作
  6. 06キャンバスの中央配置、フィット、出力

活用シーン

  1. 01React 画面での関係ネットワーク表示
  2. 02異なるレイアウトによるグラフ構造の確認
  3. 03グラフ属性に応じたノードサイズ調整
  4. 04グラフ画面への選択・折りたたみ操作の追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/reaviz/skills --skill reagraph

インストール後、Claude Code で/reagraphを入力して読み込まれたか確認します。

詳細

Reagraph

Reagraph は、Three.js、React Three Fiber、D3、Graphology を基盤とする、WebGL 対応の React 用グラフ可視化ライブラリです。力学ベースおよび階層型のレイアウトを使用して、2D と 3D のインタラクティブなノードリンク図を描画します。

インストール

npm install reagraph

基本的なセットアップ

import { GraphCanvas } from 'reagraph';

const nodes = [
  { id: 'n-1', label: 'Node 1' },
  { id: 'n-2', label: 'Node 2' },
  { id: 'n-3', label: 'Node 3' },
];

const edges = [
  { id: 'e-1', source: 'n-1', target: 'n-2', label: 'Edge 1' },
  { id: 'e-2', source: 'n-1', target: 'n-3', label: 'Edge 2' },
];

function App() {
  return (
    <GraphCanvas nodes={nodes} edges={edges} />
  );
}

データの形式

GraphNode
interface GraphNode {
  id: string;           // Unique ID (required)
  label?: string;       // Display label
  subLabel?: string;    // Secondary label
  size?: number;        // Node size
  fill?: string;        // Override fill color
  icon?: string;        // Icon URL
  cluster?: string;     // Cluster group ID
  parents?: string[];   // Parent node IDs (for hierarchy)
  data?: any;           // Custom metadata
  labelVisible?: boolean; // Force label visibility
  fx?: number;          // Fixed X position
  fy?: number;          // Fixed Y position
  fz?: number;          // Fixed Z position
}
GraphEdge
interface GraphEdge {
  id: string;           // Unique ID (required)
  source: string;       // Source node ID (required)
  target: string;       // Target node ID (required)
  label?: string;       // Display label
  subLabel?: string;    // Secondary label
  size?: number;        // Edge thickness
  fill?: string;        // Override fill color
  dashed?: boolean;     // Dashed line style
  dashArray?: [number, number]; // [dashSize, gapSize]
  labelVisible?: boolean; // Force label visibility
  interpolation?: 'linear' | 'curved'; // Edge shape
  arrowPlacement?: 'none' | 'mid' | 'end'; // Arrow position
  subLabelPlacement?: 'below' | 'above'; // SubLabel position
}

よく使われるパターン

  • バレルからのインポート：常に import { Component } from 'reagraph' を使用します
  • Ref によるアクセス：GraphCanvas の ref を使用して、命令的メソッド（centerGraph、fitNodesInView、exportCanvas）にアクセスします
  • ノードごとのスタイル設定：GraphNode オブジェクトに fill、size、icon を直接設定すると、テーマのデフォルト設定を上書きできます
  • エッジごとのスタイル設定：GraphEdge オブジェクトに fill、dashed、interpolation を直接設定します
  • 3D レイアウト：レイアウト名に 3d のサフィックスを追加します（例：forceDirected3d、treeTd3d）
  • サイズ設定方法：sizingType prop を使用して、pagerank、centrality、またはカスタム属性に基づいてノードのサイズを自動設定します

コンポーネント一覧

グラフ

GraphCanvas、GraphScene

ノード

Sphere、SphereWithIcon、SphereWithSvg、Svg、Badge、カスタム NodeRenderer

エッジ

Edge、Arrow、自己ループ、破線、曲線、エッジの集約

レイアウト

16 種類のレイアウトアルゴリズム：forceDirected、circular、concentric、tree、radial、hierarchical、nooverlap、forceatlas2、custom

インタラクション

useSelection、Lasso、CameraControls、useCenterGraph、RadialMenu、useCollapse

スタイル設定

Theme（ライト／ダーク）、SizingType（pagerank、centrality、attribute）

コメント

Markdown 対応