` に高さを指定しないと高さ0で何も見えない点に注意してください。
```
import { useState, useCallback } from 'react';
import {
ReactFlow,
Background,
Controls,
MiniMap,
addEdge,
applyNodeChanges,
applyEdgeChanges,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
const initialNodes = [
{ id: '1', type: 'input', position: { x: 0, y: 0 }, data: { label: '申請' } },
{ id: '2', position: { x: 0, y: 120 }, data: { label: '承認' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2', animated: true }];
export default function FlowChart() {
const [nodes, setNodes] = useState(initialNodes);
const [edges, setEdges] = useState(initialEdges);
const onNodesChange = useCallback(
(changes) => setNodes((ns) => applyNodeChanges(changes, ns)),
[],
);
const onEdgesChange = useCallback(
(changes) => setEdges((es) => applyEdgeChanges(changes, es)),
[],
);
const onConnect = useCallback(
(params) => setEdges((es) => addEdge(params, es)),
[],
);
return (
);
}
```
`fitView` は初期表示で全ノードを画面に収めるプロパティです。ノードのドラッグと、ハンドルからハンドルへのドラッグによる接続は、3つのハンドラを渡した時点で有効になります。`useState` と `applyNodeChanges` の組み合わせは、`useNodesState`／`useEdgesState` というフックで短く書くこともできます。
### ReactFlowProviderが必要になる場面
`
` を1つ置くだけなら `ReactFlowProvider` は要りません。必要になるのは、`useReactFlow` などのフックを `` の外側（ツールバーや保存ボタンなど）で使うときです。その場合は両方を `ReactFlowProvider` で包みます。
```
import { ReactFlow, ReactFlowProvider, useReactFlow } from '@xyflow/react';
function Toolbar() {
// Provider の外で呼ぶとエラーになる
const { fitView, zoomIn } = useReactFlow();
return (
);
}
export default function App() {
return (
);
}
```
## TypeScriptによるカスタムノードの型付け
見た目の作り込みは、自分のReactコンポーネントをノードとして登録して行います。接続点は `Handle`、その位置は `Position` で指定し、作ったコンポーネントを `nodeTypes` に登録してノードの `type` にその名前を書きます。TypeScriptでは `Node<データの型, 種別名>` でノードの型を作り、`NodeProps` に渡すと `data` の中身まで型が付きます。
```
import { memo } from 'react';
import { ReactFlow, Handle, Position, type Node, type NodeProps } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
// data の型とノード種別名をセットで定義する
type TaskNode = Node<{ label: string; owner: string }, 'task'>;
const TaskNodeView = memo(({ data }: NodeProps) => (
{data.label}
担当：{data.owner}
));
// 再生成を避けるためコンポーネントの外で定義する
const nodeTypes = { task: TaskNodeView };
const nodes: TaskNode[] = [
{ id: '1', type: 'task', position: { x: 0, y: 0 }, data: { label: '上長承認', owner: '課長' } },
];
export default function App() {
return (
);
}
```
このコードは `tsc --strict` で型エラーが出ないことを確認しています。`nodeTypes` をコンポーネント内で毎回作ると、描画のたびにノードが作り直されて開発時に警告が出ます。コンポーネントの外に置くか、`useMemo` で固定してください。
見た目を一から作りたくない場合は、公式の[React Flow UI](https://reactflow.dev/ui)が使えます。shadcn/uiとTailwind CSSで作られた部品集で、2025年7月にReact Flow Componentsから改称されました。shadcn/uiとTailwind CSSを設定したうえで、たとえば `npx shadcn@latest add https://ui.reactflow.dev/base-node` を実行すると部品のソースが自分のプロジェクトへコピーされる方式なので、取り込んだ後は自由に書き換えられます。
## toObjectによるフローのJSON保存・復元
作った図を保存して開き直すには、インスタンスの `toObject()` を使います。戻り値はノード・エッジ・ビューポート（表示位置とズーム倍率）をまとめたオブジェクトなので、ノードやエッジのデータをJSONで表現できる値にそろえておけば、`JSON.stringify` してサーバーやlocalStorageに保存できます。関数やReact要素などは保存対象のデータから分離します。次のツールバーは、対象のフローと同じ `ReactFlowProvider` の内側に置きます。制御モードでは、フロー側に `onNodesChange` と `onEdgesChange` を渡して親の状態を更新する必要があります。
```
import { useCallback } from 'react';
import { useReactFlow } from '@xyflow/react';
// ReactFlowProvider の内側に置くツールバー
export function SaveRestore() {
const { toObject, setNodes, setEdges, setViewport } = useReactFlow();
const onSave = useCallback(() => {
const flow = toObject(); // { nodes, edges, viewport }
localStorage.setItem('flow', JSON.stringify(flow));
}, [toObject]);
const onRestore = useCallback(() => {
const raw = localStorage.getItem('flow');
if (!raw) return;
const flow = JSON.parse(raw);
setNodes(flow.nodes ?? []);
setEdges(flow.edges ?? []);
const { x = 0, y = 0, zoom = 1 } = flow.viewport ?? {};
setViewport({ x, y, zoom });
}, [setNodes, setEdges, setViewport]);
return (
);
}
```
実際に保存したJSONを見ると、各ノードには `id`・`type`・`position`・`data` に加えて、描画後に測った寸法の `measured`（担当者名を2行で表示するカスタムノードでは `{"width":86,"height":70}`）が入っていました。復元時にこの値が残っていても問題なく描画されます。ノード全体を消したあとに復元ボタンを押し、4ノード・3エッジが戻ることも確認しています。親で `useNodesState` を使う制御モードでも、`useReactFlow` の `setNodes` で復元できます。
## 大きなフローで詰まる点：自動レイアウトとSSR
ノード数や接続関係が頻繁に変わるフローでは、座標の手動調整が増えるため、自動レイアウトを検討します。またNext.jsなどでサーバー側描画をすると、ノードは出るのに線が出ない、という問題に当たります。自動レイアウトでは座標計算を外部ライブラリに任せ、SSRでは描画に必要なノード寸法とハンドル位置を事前に渡します。
### dagreによるノードの自動配置
先に `npm install @dagrejs/dagre@3.1.1` で、以下の例に必要な依存パッケージを追加します。React Flow自体はレイアウト計算を持たないので、外部ライブラリで座標を求めて `position` に入れます。公式の[レイアウトのガイド](https://reactflow.dev/learn/layouting/layouting)は、木構造に並べるなら「we highly recommend dagre」としています。d3-hierarchyは根が1つのグラフ専用、elkjsは設定項目が多く複雑なのであまり勧めない、という位置づけです。なおelkjsのライセンスはEPL-2.0またはGPL-3.0で、MITのReact Flowと揃えたい場合にも検討が要ります。
```
import dagre from '@dagrejs/dagre';
const NODE_W = 172;
const NODE_H = 60;
// nodes と edges を受け取り、上から下へ並べた位置を返す
export function layout(nodes, edges, rankdir = 'TB') {
const g = new dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
g.setGraph({ rankdir, nodesep: 40, ranksep: 60 });
nodes.forEach((n) => g.setNode(n.id, { width: NODE_W, height: NODE_H }));
edges.forEach((e) => g.setEdge(e.source, e.target));
dagre.layout(g);
// dagre は中心座標、React Flow は左上座標なので半分ずらす
return nodes.map((n) => {
const p = g.node(n.id);
return { ...n, position: { x: p.x - NODE_W / 2, y: p.y - NODE_H / 2 } };
});
}
```
`@dagrejs/dagre` 3.1.1で、4ノード（a→b、a→c、c→d）を上から下へ並べることを確認しました。注意点は、dagreに渡す幅と高さが仮の値だということです。実際の寸法は描画後に `node.measured` に入るので、ノードの大きさがまちまちなら、初回描画の後に `measured` の幅・高さを各ノードのレイアウト入力に使い、中心座標から左上座標へ変換する際も各ノードの寸法の半分を引きます。サブフローを含む場合などは、配置結果の重なりを別途確認してください。
### SSRでエッジまで描画する条件
サーバー側描画はv12から対応しています（[SSR/SSGの設定ガイド](https://reactflow.dev/learn/advanced-use/ssr-ssg-configuration)）。ブラウザと違ってサーバーではDOMを測れないため、ノードの `width`／`height` と、エッジをつなぐハンドルの位置 `handles` を自分で渡します。
```
import { ReactFlow, Position } from '@xyflow/react';
// サーバー側では DOM を測れないので、寸法とハンドル位置を自分で渡す
const nodes = [
{
id: '1', position: { x: 0, y: 0 }, data: { label: 'A' }, width: 150, height: 40,
handles: [{ type: 'source', position: Position.Bottom, x: 75, y: 40 }],
},
{
id: '2', position: { x: 0, y: 120 }, data: { label: 'B' }, width: 150, height: 40,
handles: [{ type: 'target', position: Position.Top, x: 75, y: 0 }],
},
];
const edges = [{ id: 'e1-2', source: '1', target: '2' }];
export default function StaticFlow() {
return ;
}
```
同じ2ノード1エッジを `renderToStaticMarkup` で文字列にして比べると、寸法とハンドルを渡した版はノード2つとエッジの線1本が出力されました。渡さない版はノードが `visibility:hidden` になり、エッジの線は1本も出ませんでした。ログイン不要の公開ページで図をHTMLに含めたい場合は、この2つを必ず指定します。
## 旧バージョンからの移行とv13の変化
ネット上のReact Flow解説には `react-flow-renderer` 時代のものが多く、そのまま写すとv12では動きません。公式の[v10移行ガイド](https://reactflow.dev/learn/troubleshooting/migrate-to-v10)と[v12移行ガイド](https://reactflow.dev/learn/troubleshooting/migrate-to-v12)に沿って、つまずきやすい変更を表にしました。
### v9以前・v10・v11からv12への移行箇所
| 旧（v9以前・v10・v11） | 移行先 |
| ----------------------------------- | ------------------------------------------- |
| `import ReactFlow from 'reactflow'` | `import { ReactFlow } from '@xyflow/react'` |
| elements（v9以前の単一配列） | nodes と edges の別配列（v10以降） |
| removeElements（v9以前） | applyNodeChanges／applyEdgeChanges（v10以降） |
| onLoad（v9以前） | onInit（v10以降） |
| onEdgeUpdate | onReconnect（v12） |
| node.parentNode | node.parentId（v12） |
| node.width／height（測定値） | node.measured.width／height（v12） |
v9以前から移行する場合は、v10で廃止された `elements` をノードとエッジの別配列に変更するのが最大の作業です。ノードとエッジを1つの配列に混ぜて `removeElements` で消していた書き方を、2つの配列と changes 方式のハンドラに書き換えます。v11からなら、importの変更と `measured`・`parentId`・`onReconnect` への置き換えが中心です。v12では `node.width` が「測った値」ではなく「指定する寸法」に意味が変わったため、寸法を読み取るコードは `measured` に直さないと値がずれます。
### 13.0.0-next.0で変わる前提
2026年10月11日に `@xyflow/react@13.0.0-next.0` がnpmに `next` タグで公開されました。変更履歴はまだ公開されていませんが、12.12.0と package.json を比べると前提の変化が読み取れます。
| 項目 | 12.12.0 | 13.0.0-next.0 |
| ---------------------- | ----------------- | ------------- |
| 対応React（peer） | 17以上 | 18以上 |
| 配布形式 | ESM＋UMD（require可） | ESMのみ |
| Node.js（engines） | 指定なし | 20以上 |
| zustand | 4系 | 5系 |
| react-compiler-runtime | なし | 依存に追加 |
React 17のまま運用している案件は、v13の正式版で最低要件を満たさなくなります。CommonJSの `require` で読み込んでいる環境（古いJestの設定など）は、Node.jsやテストランナーのESM対応によって読み込めるかどうかが変わるため、事前の確認が必要です。プレリリースなので今は本番に入れず、React 18以上への更新とESM化を先に済ませておくのが安全です。
## React Flowが向く場面と他ライブラリとの選び分け
判断の軸は「利用者が図を編集するか、図を見せるだけか」です。Reactで作るワークフロービルダーやノードエディタで、ノードの追加・接続・移動が必要なら、React Flowを第一候補にします。承認ルートを画面で組み立てる業務アプリのように、[ワークフローシステム開発](/service/business%5Fsystem/workflow/)の中で分岐の編集画面が要る場面は典型的な用途です。
テキストで定義した静的な図を表示する用途なら、まずMermaidを選びます（[VSCodeでMermaidを使う方法](/tech/details/6583/)）。表示専用でも、独自のReactコンポーネントをノードに埋め込む必要がある場合はReact Flowが候補になります。手書き風のホワイトボードが欲しいならExcalidraw、図ではなく箱のドラッグとリサイズだけが要るなら [react-rndでのドラッグ＆リサイズ](/tech/details/3532/) で足ります。
| ライブラリ | 対応フレームワーク | ライセンス | 向く用途 |
| ------------- | ------------------ | ----- | ---------- |
| React Flow | React | MIT | 編集できるノードUI |
| Svelte Flow | Svelte | MIT | 同上（Svelte） |
| Vue Flow | Vue 3 | MIT | 同上（Vue） |
| Rete.js 2.0.6 | React・Vue・Angular等 | MIT | データ処理エディタ |
| Mermaid | 不問（テキスト記法） | MIT | 表示専用の図 |
Rete.jsは複数フレームワークに対応する代わりに、Reactで描画するには `rete-react-plugin` などのプラグインを組み合わせ、そのプラグインがstyled-componentsを必要とします。Tailwind CSSで統一しているReactプロジェクトなら、前述のCyberAgentの事例のようにReact Flowのほうが依存を減らせます。フロントがReactでない場合は、ページの一部だけReactにする [AstroでReactを使う方法](/tech/details/2697/) のような構成でReact Flowを載せる手もあります。
## よくある質問
### React Flowは商用利用できますか？
できます。MITライセンスなので、有料の製品やSaaSに組み込んでも費用はかかりません。右下の帰属表示を消す場合だけ、公式はPro（月額169ドルから）への加入を求めています。
### reactflow と @xyflow/react は何が違いますか？
同じライブラリの旧名と現行名です。`reactflow` はv11（最終11.11.4）、`@xyflow/react` はv12以降です。v12ではimportが名前付きになり、測定した寸法が `node.measured` に移るなど、APIも一部変わっています。
### React FlowはPythonで使えますか？
Python単体では使えません。画面はReactで作り、DjangoやFastAPIはノードとエッジのJSONを保存・配信するバックエンドとして組み合わせます。
### TypeScriptで使えますか？
使えます。パッケージに型定義が含まれており、`Node<データの型, 種別名>` と `NodeProps` を使うと、カスタムノードの `data` まで型が付きます。
### React 17や18でも動きますか？
12.12.0は peerDependencies が `react >=17` なので、17・18・19で使えます。13.0.0-next.0では18以上に引き上げられているため、17の案件はv12にとどまるかReactの更新が必要です。
### 右クリックメニューは付けられますか？
付けられます。`onNodeContextMenu`（ノード上）や `onPaneContextMenu`（背景）でイベントを受け取り、メニューの表示位置と中身は自分で実装します。既製のメニュー部品はありません。
## 関連記事
- [React 19.3の新機能｜ViewTransition・Fragment ref・browser()の実装と19.2からの更新手順](/tech/details/18249/)
- [react-rndでドラッグ＆リサイズ｜React 19対応と実装方法](/tech/details/3532/)
- [AstroとReactの違いと使い分け｜AstroでReactを使う方法【Astro 7対応】](/tech/details/2697/)
- [VSCodeでMermaidを使う方法｜標準プレビュー・拡張機能の選び方・PNG/SVG出力【2026年10月】](/tech/details/6583/)
- [Excalidrawの使い方とDockerセルフホスト手順｜Reactへの埋め込みまで](/tech/details/17487/)
---
出典: [React Flowとは？@xyflow/react 12.12の使い方・ライセンス・JSON保存を実例で解説]()（株式会社一創）