![\"\"](\"https://images.microcms-assets.io/assets/52137c02cafa4450bbdc092b64fbadac/041f075a25c4400192806e9b2a15c5a5/ReactFlow.png\")
React Flow は、React 上でノードとエッジから成るインタラクティブなグラフ UI（ワークフローエディタ、ダイアグラム、低コードツールの編集画面など）を構築するためのオープンソースライブラリです。v12 の安定版は 2024 年 7 月にリリースされ、これに伴って npm パッケージ名が reactflow から @xyflow/react へ変更されました。開発元の xyflow は、React 版（@xyflow/react）と Svelte 版（@xyflow/svelte）を同じブランドのもとで並行して提供しています。本記事では概要、仕組み、導入手順、注意点、関連技術を短時間で把握できるよう整理します。
React Flow は「ノードベース UI」を作るためのコンポーネントライブラリです。ドラッグ＆ドロップ、ズーム/パン、複数選択、ミニマップ、コントロール、背景グリッドといった基本機能を備えており、加えて <NodeResizer /> や <NodeToolbar /> などのリサイズ・ツールバー用コンポーネントも標準で提供されています。カスタムノードやカスタムエッジを自由に定義でき、ワークフロー／オートメーション、ETL やデータパイプライン、機械学習や LLM のフロー設計、チャットボットビルダー、ER 図・組織図などの可視化に広く使われています。
内部はモノレポ構成になっており、@xyflow/system（フレームワーク非依存の共通ロジック）を土台に、@xyflow/react と @xyflow/svelte が実装されています。ビューポートの操作には d3-zoom を利用し、変更があったノードのみを再レンダリングする設計のため、規模が大きくなっても比較的軽快に動きます。
v12 の大きな変更点として、ノードに width / height / handles を事前指定できるようになり、これによってサーバー側で計測できない情報を明示的に渡せるようになったため、SSR/SSG にも対応できるようになりました。状態管理は内部のストアで行われ、useReactFlow などのフックを通じて参照できます。v11 までの nodeInternals マップは v12 で再設計され、ノードの実体は nodes 配列に、参照用途は新設の nodeLookup マップに分離されました（nodeLookup は変更のたびに新しいオブジェクトを生成しないため、ルックアップに適した設計です）。
インストールは公式の Quick Start に従い、パッケージとスタイルを読み込みます。
npm install @xyflow/react最小構成のコード例は次のとおりです。v12 から ReactFlow は名前付きエクスポートになっている点、CSS の読み込みが必須である点に注意してください。
import { useCallback } from 'react';\nimport {\n ReactFlow,\n Background,\n Controls,\n MiniMap,\n useNodesState,\n useEdgesState,\n addEdge,\n} from '@xyflow/react';\nimport '@xyflow/react/dist/style.css';\n\nconst initialNodes = [\n { id: '1', position: { x: 0, y: 0 }, data: { label: 'Start' } },\n { id: '2', position: { x: 200, y: 80 }, data: { label: 'Next' } },\n];\nconst initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];\n\nexport default function Flow() {\n const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);\n const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);\n const onConnect = useCallback(\n (params) => setEdges((eds) => addEdge(params, eds)),\n [],\n );\n\n return (\n <div style={{ width: '100%', height: 480 }}>\n <ReactFlow\n nodes={nodes}\n edges={edges}\n onNodesChange={onNodesChange}\n onEdgesChange={onEdgesChange}\n onConnect={onConnect}\n fitView\n >\n <Background />\n <Controls />\n <MiniMap />\n </ReactFlow>\n </div>\n );\n}実行してアクセスすると、以下のような画面が表示されます。
公式が提供する useNodesState / useEdgesState フックを使うと、状態と変更ハンドラを一括で取得でき、useState と applyNodeChanges を自前で書くより簡潔になります。より細かい制御が必要な場合は、useState と applyNodeChanges / applyEdgeChanges を組み合わせる書き方も引き続き使えます。
親要素には必ず幅と高さを指定する必要があります。useReactFlow など一部のフックを使う場合は <ReactFlowProvider> で囲みます。
Tailwind CSS v4 と併用する場合は、CSS の読み込み順に注意が必要です。v4 ではユーティリティクラスとの優先順位の関係で、App.tsx などのコンポーネント側ではなく、グローバル CSS（global.css や index.css 等）に React Flow のスタイルをまとめてインポートすることが公式で推奨されています。具体的には次のように、tailwindcss を読み込んだ後で React Flow のスタイルをインポートします。
@import "tailwindcss";\n\n@layer base {\n @import "@xyflow/react/dist/style.css";\n}メリット（公式情報・一般論）としては、(1) ノード/エッジ/プラグインの拡張性が高く、独自 UI を段階的に組み込みやすいこと、(2) MIT ライセンスで商用利用も可能なこと、(3) v12 で SSR/SSG とダークモードに対応し、TSDoc による型情報も整備されたこと、が挙げられます。一方、注意点としては次のような点が考えられます（一般論・推測を含む）。
v11 以前の reactflow パッケージから移行する場合、import 文・型名・一部の API（nodeInternals の再設計、measured 系プロパティへの分離など）の書き換えが必要です（公式の移行ガイド参照）。
大量のノード（数千以上）を扱う場合は、カスタムノードの再レンダリング設計や仮想化、サーバー側計算など、個別の最適化が必要になりやすい点に留意してください（推測を含む）。
有償の Pro Examples / サポートプランが別途あり、業務利用ではライセンス条件もあわせて確認するのが安全です。
近い領域には、同じ xyflow が提供する Svelte Flow、汎用ダイアグラムの JointJS / GoJS、グラフ可視化寄りの Cytoscape.js、より低レベルの D3.js や Konva などがあります。比較観点としては、(a) 編集 UI 重視か可視化重視か、(b) React 等のフレームワーク統合のしやすさ、(c) カスタムノードの自由度と学習コスト、(d) ライセンス（OSS／商用）と長期的なメンテナンス体制、が実務上の判断材料になります。一般論として、React アプリ内で「ユーザーが編集できるノード UI」を作る用途では React Flow が第一候補になりやすい一方、純粋な大規模グラフ解析には Cytoscape.js などのほうが向きます。