React Flow は、React 上でノードとエッジから成るインタラクティブなグラフ UI（ワークフローエディタ、ダイアグラム、低コードツールの編集画面など）を構築するためのオープンソースライブラリです。v12 の安定版は 2024 年 7 月にリリースされ、これに伴って npm パッケージ名が reactflow から @xyflow/react へ変更されました。開発元の xyflow は、React 版（@xyflow/react）と Svelte 版（@xyflow/svelte）を同じブランドのもとで並行して提供しています。本記事では概要、仕組み、導入手順、注意点、関連技術を短時間で把握できるよう整理します。
React Flow とは何か / 何ができるか
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';
import {
ReactFlow,
Background,
Controls,
MiniMap,
useNodesState,
useEdgesState,
addEdge,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
const initialNodes = [
{ id: '1', position: { x: 0, y: 0 }, data: { label: 'Start' } },
{ id: '2', position: { x: 200, y: 80 }, data: { label: 'Next' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
export default function Flow() {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback(
(params) => setEdges((eds) => addEdge(params, eds)),
[],
);
return (
<div style={{ width: '100%', height: 480 }}>
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
fitView
>
<Background />
<Controls />
<MiniMap />
</ReactFlow>
</div>
);
}実行してアクセスすると、以下のような画面が表示されます。
公式が提供する 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";
@layer base {
@import "@xyflow/react/dist/style.css";
}メリットと制約・注意点
メリット（公式情報・一般論）としては、(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 などのほうが向きます。