はい、承知いたしました。React Flowを使ったインタラクティブなフロー図作成について、初心者向けの詳細な解説記事を作成します。約5000語を目指し、セットアップから基本機能、インタラクション、カスタマイズまでを網羅的に説明します。

【初心者向け】React Flowでインタラクティブなフロー図を作成

はじめに：なぜReact Flowなのか？

Webアプリケーションでフロー図やノードベースのエディタを作成したいと思ったことはありませんか？ プロセスを視覚化したり、データフローを設計したり、複雑なシステムの関係性を示したりする場合、インタラクティブなフロー図は非常に強力なツールとなります。

しかし、このような図をゼロから実装するのは非常に骨労がかかります。ノードの配置、エッジの描画、ドラッグ操作、ズーム、ミニマップ、さらにはコネクションの管理… これらすべてを自分で実装しようとすると、膨大な時間と複雑なコードが必要になります。

そこで登場するのが React Flow です。

React Flowは、Reactアプリケーション内で高品質でインタラクティブなノードベースのダイアグラム（フロー図、ノードエディタ、グラフなど）を簡単に構築するためのライブラリです。以下の特徴を持っています。

• Reactフレンドリー: Reactのコンポーネントモデルに自然に統合されます。
• 高性能: 大量のノードやエッジを扱ってもスムーズな操作を提供します。
• カスタマイズ可能: ノード、エッジ、ハンドルなどを自由にカスタマイズできます。
• インタラクティブ: ドラッグ、ズーム、パン（移動）、選択、接続などの操作がデフォルトで組み込まれています。
• 機能豊富: ミニマップ、コントロールパネル、背景パターンなどの便利機能も提供します。

この記事では、React Flowを使って基本的なフロー図を作成し、それをインタラクティブにする方法を、プログラミング初心者の方にも分かりやすくステップバイステップで解説します。Reactの基本的な知識（コンポーネント、State, Props, Hooksなど）があることを前提としますが、React Flowについてはゼロから学べます。

この記事を読み終える頃には、あなたも自分だけのインタラクティブなフロー図をReactで作成できるようになっているでしょう。

さあ、React Flowの世界へ飛び込みましょう！

準備：プロジェクトのセットアップ

React Flowを使うためには、まずReactプロジェクトが必要です。ここでは、現代的なReact開発の標準となっているViteを使ったプロジェクト作成方法と、より伝統的なcreate-react-appを使った方法の両方を紹介します。どちらかお好きな方を選んでください。

Node.jsのインストール

Reactプロジェクトを開発するためには、Node.jsが必要です。まだインストールしていない場合は、以下の公式サイトからダウンロードしてインストールしてください。

https://nodejs.org/

インストールが完了したら、ターミナルやコマンドプロンプトで以下のコマンドを実行し、バージョンが表示されることを確認してください。

bash
node -v
npm -v

プロジェクトの作成（Viteの場合）

Viteは、高速な開発サーバーとビルドツールを提供するモダンなフロントエンドビルドツールです。現在、Reactプロジェクトの作成によく使われています。

ターミナルで、プロジェクトを作成したいディレクトリに移動し、以下のコマンドを実行します。

bash
npm create vite@latest my-react-flow-app --template react

• my-react-flow-app はあなたのプロジェクト名です。好きな名前に変更してください。
• --template react はReactテンプレートを使用することを指定しています。

コマンドを実行すると、いくつかの質問が表示される場合があります。通常はデフォルトのオプション（JavaScript + SWC など）を選択すれば問題ありません。

プロジェクトが作成されたら、そのディレクトリに移動し、必要なパッケージをインストールします。

bash
cd my-react-flow-app
npm install

プロジェクトの作成（create-react-appの場合）

create-react-appは、React公式が提供していたプロジェクト作成ツールです。現在ではメンテナンスモードに入っていますが、多くの既存プロジェクトで使われています。

ターミナルで、プロジェクトを作成したいディレクトリに移動し、以下のコマンドを実行します。

bash
npx create-react-app my-react-flow-app

• my-react-flow-app はあなたのプロジェクト名です。好きな名前に変更してください。

プロジェクトが作成されたら、そのディレクトリに移動します。

bash
cd my-react-flow-app

React Flowのインストール

プロジェクトディレクトリに移動したら、React Flowライブラリをインストールします。

“`bash

Viteまたはcreate-react-appのプロジェクトディレクトリ内で実行

npm install reactflow
“`

これで、React Flowを使用するための準備が整いました。

最初のReact Flowを描画してみよう！

準備ができたので、React Flowのコンポーネントを使って簡単なフロー図を表示させてみましょう。まずはノードとエッジをいくつか定義し、それらを表示するところから始めます。

React Flowのコアとなるコンポーネントは <ReactFlow> です。このコンポーネントの中に、フロー図を描画します。

React Flowは、ノード（Nodes） と エッジ（Edges） という2つの主要なデータの配列を受け取って描画を行います。

• ノード: フロー図の各要素（箱や図形）です。一意のID、位置、表示するデータ（ラベルなど）を持ちます。
• エッジ: ノード間を結ぶ線です。一意のID、接続元のノードID (source)、接続先のノードID (target) を持ちます。

早速コードを見ていきましょう。プロジェクトの src ディレクトリにある App.js (または App.jsx) ファイルを編集します。既存のコードは削除して、以下のコードに置き換えてみてください。

“`jsx
// src/App.jsx または src/App.js
import React from ‘react’;
import ReactFlow, { Controls, MiniMap, Background, ReactFlowProvider } from ‘reactflow’;

// React Flowのデフォルトスタイルをインポート
// node_modules/reactflow/dist/style.css のパスは環境によって異なる可能性があります
// もしエラーが出る場合は、node_modules/reactflow/dist/ に style.css があるか確認し、
// なければ style.min.css を試すか、reactflowのドキュメントで正しいパスを確認してください。
// 多くの場合、以下で動作します。
import ‘reactflow/dist/style.css’;

// 最初のノードとエッジを定義します
// ノードはオブジェクトの配列です。
const initialNodes = [
{
id: ‘1’, // 一意のID
type: ‘input’, // 特殊なタイプのノード (入力ノード)
data: { label: ‘Node 1’ }, // ノードに表示するデータ
position: { x: 250, y: 5 }, // ノードの表示位置
},
{
id: ‘2’,
data: { label: ‘Node 2’ },
position: { x: 100, y: 100 },
},
{
id: ‘3’,
type: ‘output’, // 特殊なタイプのノード (出力ノード)
data: { label: ‘Node 3’ },
position: { x: 400, y: 100 },
},
{
id: ‘4’,
data: { label: ‘Node 4’ },
position: { x: 400, y: 200 },
},
];

// エッジはオブジェクトの配列です。
const initialEdges = [
{ id: ‘e1-2’, source: ‘1’, target: ‘2’, animated: true }, // sourceノードのIDからtargetノードのIDへエッジを引く
{ id: ‘e1-3’, source: ‘1’, target: ‘3’ },
{ id: ‘e3-4’, source: ‘3’, target: ‘4’, label: ‘エッジラベル’ }, // エッジにラベルを表示することも可能
];

function App() {
// 実際のアプリケーションでは、これらのノードとエッジはStateとして管理し、
// ユーザー操作（ドラッグ、接続など）に応じて更新される必要があります。
// 今はまだ静的なデータとして描画します。
const nodes = initialNodes;
const edges = initialEdges;

return (
// ReactFlowProviderでReactFlowコンポーネントをラップします。
// これは、React Flowの内部状態管理のために必要です。

);
}

export default App;
“`

スタイルの設定

上記のコードでは、React FlowのCSSをインポートしています。また、<ReactFlow> コンポーネントを表示するために、親要素（ここでは div）に高さが必要です。上記の例では height: '90vh' としていますが、実際のアプリケーションでは親コンテナのサイズに合わせて調整してください。

実行してみよう

コードを保存したら、ターミナルでプロジェクトのルートディレクトリから開発サーバーを起動します。

“`bash

Viteの場合

npm run dev

create-react-appの場合

npm start
“`

ブラウザが開き、定義したノードとエッジが表示されたフロー図が見えるはずです！

コードの解説

• import ReactFlow, { ... } from 'reactflow';: React Flowのメインコンポーネントと便利機能をインポートしています。
• import 'reactflow/dist/style.css';: React Flowの基本的なスタイルを読み込んでいます。これがないと、ノードやエッジの見た目が崩れます。
• initialNodes と initialEdges: 表示したいノードとエッジのデータを配列として定義しています。各オブジェクトの構造はコード内のコメントを参照してください。type: 'input' や type: 'output' は、React Flowにデフォルトで用意されている特別なノードタイプです。
• <ReactFlowProvider>: React Flowの内部でContext APIを使って状態を共有するために必要です。<ReactFlow> コンポーネネントは必ずこのプロバイダーの中で使用する必要があります。通常、アプリのルートに近い場所で一度だけ使用します。
• <div style={{ width: '100%', height: '90vh' }}>: <ReactFlow> は親要素のサイズに合わせて表示されます。必ず親要素にサイズ（widthとheight）を指定してください。
• <ReactFlow nodes={nodes} edges={edges} fitView>: これがReact Flowのメインコンポーネントです。
  • nodes: 表示するノードデータの配列を渡します。
  • edges: 表示するエッジデータの配列を渡します。
  • fitView: このプロパティを渡すと、初回レンダリング時に全てのノードとエッジがビューポート内に収まるように自動的にズームとパンが調整されます。
• <Controls />: フロー図の右上に表示されるコントロールパネルです。ズームイン/アウト、フィットビュー、ロックなどのボタンがあります。
• <MiniMap />: フロー図の右下に表示されるミニマップです。全体の構造を把握し、簡単に移動できます。
• <Background variant="dots" gap={12} size={1} />: フロー図の背景にパターンを表示します。variant で種類（dots, lines, cross）、gap でパターンの間隔、size でパターンのサイズを指定できます。

これで、React Flowを使った基本的なフロー図の表示ができました。まだインタラクティブではありませんが、次はこれを操作できるようにしていきます。

フロー図をインタラクティブにする：State管理とイベントハンドリング

フロー図をインタラクティブにするためには、ユーザー操作（ノードのドラッグ、エッジの接続、クリックなど）に応じてノードやエッジの状態を更新する必要があります。

React Flowでは、ノードとエッジのデータはReactのStateとして管理するのが一般的です。ユーザーが何か操作を行うと、React Flowからイベントが発火され、そのイベントハンドラ内でStateを更新することで、描画されているフロー図が変化します。

React Flow v10以降では、ノードとエッジのState管理を簡単にするために useNodesState および useEdgesState というカスタムフックが提供されています。これらを使うと、ドラッグやズームといったReact Flowが内部で行う変更を自動的にStateに反映させることができます。

App.js (または App.jsx) を以下のように修正してみましょう。

“`jsx
// src/App.jsx または src/App.js
import React, { useCallback } from ‘react’;
import ReactFlow, {
Controls,
MiniMap,
Background,
ReactFlowProvider,
useNodesState, // <– useNodesStateをインポート
useEdgesState, // <– useEdgesStateをインポート
addEdge, // <– エッジを追加する際に便利なユーティリティ関数
} from ‘reactflow’;

import ‘reactflow/dist/style.css’;

const initialNodes = [
{ id: ‘1’, type: ‘input’, data: { label: ‘ドラッグしてみてください’ }, position: { x: 250, y: 5 } },
{ id: ‘2’, data: { label: ‘ここに接続できます’ }, position: { x: 100, y: 100 } },
{ id: ‘3’, type: ‘output’, data: { label: ‘ここからも接続できます’ }, position: { x: 400, y: 100 } },
{ id: ‘4’, data: { label: ‘Node 4’ }, position: { x: 400, y: 200 } },
];

const initialEdges = [
{ id: ‘e1-2’, source: ‘1’, target: ‘2’, animated: true },
{ id: ‘e1-3’, source: ‘1’, target: ‘3’ },
{ id: ‘e3-4’, source: ‘3’, target: ‘4’, label: ‘エッジラベル’ },
];

function App() {
// useNodesStateとuseEdgesStateを使ってノードとエッジをStateとして管理
// これらは [state, setState, onChanges] のタプルを返します
// state: 現在のノード/エッジの配列
// setState: ノード/エッジの状態を更新する関数 (useNodesState/useEdgesStateに最適化されている)
// onChanges: React Flowが検出した変更を適用するためのハンドラ関数
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

// ノード間が接続されたときに呼ばれるコールバック関数
// connectionオブジェクトには、接続元のノードID (source) と接続先のノードID (target) が含まれます
const onConnect = useCallback((connection) => {
// addEdgeユーティリティを使って新しいエッジオブジェクトを作成し、既存のエッジ配列に追加
setEdges((eds) => addEdge(connection, eds));
}, [setEdges]); // setEdgesが変更されないことを保証するために依存配列に含める

return (

);
}

export default App;
“`

コードの解説

• import { ..., useNodesState, useEdgesState, addEdge } from 'reactflow';: useNodesState, useEdgesState, addEdge を新たにインポートしました。
• const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);: useNodesState フックは、初期ノード配列 initialNodes を受け取り、以下の3つを返します。
  • nodes: 現在のノード配列（ReactのState）。
  • setNodes: ノード配列を更新するための関数。
  • onNodesChange: React Flowがノードの変更（ドラッグによる位置変更、選択状態の変更など）を検出したときに呼び出すべきハンドラ関数。
• const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);: useEdgesState も同様に、エッジ配列のState管理を行います。
• onNodesChange={onNodesChange} および onEdgesChange={onEdgesChange}: これらのプロパティに useNodesState と useEdgesState から返されたハンドラ関数を渡すことで、React Flowが自動的にStateを更新してくれるようになります。例えば、ユーザーがノードをドラッグすると、React Flowは新しい位置を計算し、onNodesChange を呼び出し、useNodesState がその変更を受け取って nodes Stateを更新し、再レンダリングが行われます。
• onConnect = useCallback((connection) => { ... }, [setEdges]);: これは、ユーザーがノード間でエッジを接続（ドラッグ＆ドロップ）したときにReact Flowが呼び出す関数です。
  • connection オブジェクトには、接続元のノードID (source)、接続先のノードID (target)、および使用されたハンドルの情報などが含まれています。
  • addEdge(connection, eds) は、新しい connection オブジェクトからエッジオブジェクトを作成し、既存のエッジ配列 eds に追加して新しい配列を返すユーティリティ関数です。
  • setEdges(...) を使ってStateを更新することで、新しいエッジがフロー図に描画されます。
  • useCallback は、この関数が不要に再作成されるのを防ぐためのReactフックです。パフォーマンスのためにイベントハンドラによく使われます。

実行してみよう

開発サーバーが起動していれば、ブラウザで確認してみましょう。

1. ノードのドラッグ: ノードをクリックしてドラッグしてみてください。ノードがスムーズに移動し、ドラッグを終えると新しい位置に固定されるはずです。
2. エッジの接続:
   • ノードの端にある小さい丸（これが「ハンドル」です）にマウスカーソルを合わせると、カーソルが変化します。
   • そのハンドルをクリックし、ドラッグして他のノードのハンドルまで持っていき、ドロップしてみてください。
   • 新しいエッジが自動的に描画されるはずです！

これで、基本的なインタラクション機能を備えたフロー図が完成しました。

その他のインタラクションイベント

React Flowは、様々なユーザー操作に対してイベントハンドラを提供しています。主なものを紹介します。

• onNodeClick: ノードがクリックされたときに呼ばれます。クリックされたノードのオブジェクトを受け取ります。
• onEdgeClick: エッジがクリックされたときに呼ばれます。クリックされたエッジのオブジェクトを受け取ります。
• onNodeDoubleClick, onEdgeDoubleClick: それぞれノード、エッジがダブルクリックされたときに呼ばれます。
• onPaneClick: フロー図の背景部分（ノードやエッジがない場所）がクリックされたときに呼ばれます。
• onPaneReady: React Flowが初期化されて描画準備ができたときに呼ばれます。
• onMoveStart, onMove, onMoveEnd: ユーザーがパン操作（背景のドラッグ）を開始/実行中/終了したときに呼ばれます。
• onNodeDragStart, onNodeDrag, onNodeDragStop: ユーザーがノードのドラッグを開始/実行中/終了したときに呼ばれます。

これらのイベントハンドラを <ReactFlow> コンポーネントのプロパティとして渡すことで、様々なカスタムアクションを実行できます。

例えば、ノードをクリックしたときにそのノードの情報をコンソールに表示するには、以下のようにします。

``jsx
// App.jsx の ReactFlow コンポーネント内に追加
<ReactFlow
// ... 他のprops ...
onNodeClick={(event, node) => {
// event: 元のクリックイベント
// node: クリックされたノードオブジェクト
console.log('ノードがクリックされました:', node);
alert(クリックされたノード: ${node.data.label} (ID: ${node.id})`);
}}

{/ … Controls, MiniMap, Background … /}

“`

onNodeClick のハンドラ関数は、第一引数にイベントオブジェクト、第二引数にクリックされたノードオブジェクトを受け取ります。onEdgeClick も同様に、第一引数にイベントオブジェクト、第二引数にクリックされたエッジオブジェクトを受け取ります。

これらのイベントを活用することで、ノードのプロパティ編集画面を表示したり、ノードの削除機能を実装したり、様々なインタラクティブな機能を追加できます。

ノードとエッジの追加/削除

インタラクティブなフロー図では、既存の要素を操作するだけでなく、新しい要素を追加したり、不要な要素を削除したりできると便利です。

これは、ノードとエッジのState (nodes および edges) を操作することで実現できます。

ノードの追加

例えば、ボタンをクリックしたら新しいノードを追加する機能を考えます。

App.jsx にボタンと、ノード追加のロジックを追加します。新しいノードのIDはユニークである必要があります。簡単な例では、タイムスタンプやカウンタを使うことができます。

“`jsx
// App.jsx の ReactFlowProvider の中にボタンを追加

“`

これで、「ノードを追加」ボタンをクリックするたびに、ランダムな位置に新しいノードが表示されるようになります。IDの生成方法は、実際のアプリケーションの要件に合わせて適切に設計してください（例: UUIDライブラリを使うなど）。

ノードの削除

ノードを削除するには、State (nodes) からそのノードを除外した新しい配列を作成し、setNodes で更新します。例えば、ノードをクリックしたときに確認ダイアログを表示し、OKなら削除する、といった実装が考えられます。

先ほど追加した onNodeClick ハンドラを修正してみましょう。

``jsx
// App.jsx の ReactFlow コンポーネント内
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
// onNodeClick ハンドラを修正
onNodeClick={(event, node) => {
// Ctrl (Cmd) キーを押しながらクリックした場合に削除
if (event.ctrlKey || event.metaKey) {
const confirmDelete = window.confirm(${node.data.label} を削除しますか？`);
if (confirmDelete) {
// 削除するノードのID以外のノードで新しい配列を作成
setNodes((nds) => nds.filter((n) => n.id !== node.id));
// そのノードに関連するエッジも削除する必要がある場合
// 削除するノードを source または target に持つエッジを除外
setEdges((eds) => eds.filter((e) => e.source !== node.id && e.target !== node.id));
}
} else {
// 通常クリック時の処理 (例: 情報表示)
console.log(‘ノードがクリックされました:’, node);
}
}}
fitView

{/ … Controls, MiniMap, Background … /}

“`

これで、Ctrl (または Cmd) キーを押しながらノードをクリックすると、削除の確認が表示され、OKを選択するとノードとそのノードに接続されていたエッジが削除されます。

エッジの削除

エッジも同様に、State (edges) から対象のエッジを除外することで削除できます。例えば、エッジをクリックしたときに削除する機能を考えます。

onEdgeClick ハンドラを追加します。

``jsx
// App.jsx の ReactFlow コンポーネント内に追加
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
onNodeClick={(event, node) => { /* ... ノード削除ロジック ... */ }}
// onEdgeClick ハンドラを追加
onEdgeClick={(event, edge) => {
// Alt (Option) キーを押しながらクリックした場合に削除
if (event.altKey) {
const confirmDelete = window.confirm(エッジ (ID: ${edge.id}) を削除しますか？`);
if (confirmDelete) {
// 削除するエッジのID以外のエッジで新しい配列を作成
setEdges((eds) => eds.filter((e) => e.id !== edge.id));
}
} else {
// 通常クリック時の処理
console.log(‘エッジがクリックされました:’, edge);
}
}}
fitView

{/ … Controls, MiniMap, Background … /}

“`

これで、Alt (または Option) キーを押しながらエッジをクリックすると、削除の確認が表示され、OKを選択するとエッジが削除されます。

重要なのは、ノードやエッジの状態変更は、直接DOMを操作するのではなく、ReactのState (nodes, edges) を更新することで行う という点です。React FlowはStateの変更を検知して、適切にUIを再レンダリングしてくれます。setNodes や setEdges を使う際は、元の配列を直接変更するのではなく、concat や filter のように新しい配列を返すメソッドを使うか、スプレッド構文 ([...]) を使って配列のコピーを作成するように注意してください（Stateの不変性）。

ノードをカスタマイズする

React Flowのデフォルトノードはシンプルですが、実際のアプリケーションでは独自の見た目やインタラクションを持つノードが必要になることがほとんどです。React Flowでは、カスタムReactコンポーネントを使ってノードの外観と動作を完全にカスタマイズできます。

カスタムノードを作成する手順は以下の通りです。

1. カスタムノードコンポーネントを作成: Reactの関数コンポーネントとして、ノードの見た目を定義します。このコンポーネントはReact Flowからいくつかのプロパティを受け取ります。
2. <Handle> コンポーネントを配置: エッジを接続するための「ハンドル」をカスタムノード内に配置します。
3. React Flowにカスタムノードを登録: <ReactFlow> コンポーネントの nodeTypes プロパティを使って、作成したカスタムノードコンポーネントを登録します。
4. ノードデータでカスタムタイプを指定: 表示したいノードデータで、登録したカスタムノードのタイプを指定します。

早速例を見てみましょう。簡単なメッセージを表示するカスタムノードを作成します。

まず、新しいファイル CustomNode.jsx (または CustomNode.js) を作成します。

“`jsx
// src/CustomNode.jsx
import React, { memo } from ‘react’;
import { Handle, Position } from ‘reactflow’;

// React Flowはカスタムノードコンポーネントにいくつかのpropsを渡します
// data: ノードデータ (initialNodes配列で定義したdataオブジェクト)
// isConnectable: このノードが現在接続可能かどうかのフラグ
// その他のpropsも渡されますが、多くの場合dataとisConnectableがあれば十分です
const CustomNode = ({ data, isConnectable }) => {
return (

  {/* エッジの接続ハンドル */}
  {/* type: 'source' はこのハンドルからエッジが出ることを示す */}
  {/* position: 'bottom' はノードの下辺にハンドルを配置することを示す */}
  {/* id: 複数のソースハンドルがある場合に必要 */}
  {/* isConnectable: このハンドルが現在接続可能かどうかのフラグ (親ノードのpropsと同じ) */}
  <Handle
    type="source"
    position={Position.Bottom}
    id="a" // 複数のソースハンドルがある場合、IDが必要
    isConnectable={isConnectable}
    style={{ background: '#555' }}
  />
  {/* type: 'target' はこのハンドルにエッジが来ることを示す */}
  {/* position: 'top' はノードの上辺にハンドルを配置することを示す */}
  <Handle
    type="target"
    position={Position.Top}
    id="b" // 複数のターゲットハンドルがある場合、IDが必要
    isConnectable={isConnectable}
    style={{ background: '#555' }}
  />
  {/* 例: 左側に別のターゲットハンドル */}
   <Handle
    type="target"
    position={Position.Left}
    id="c"
    isConnectable={isConnectable}
    style={{ background: '#555' }}
  />
</div>

    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      nodeTypes={nodeTypes}
      edgeTypes={edgeTypes} // <-- ここでカスタムエッジタイプを登録
      onNodeClick={(event, node) => { /* ... ノード削除ロジック ... */ }}
      onEdgeClick={(event, edge) => { /* ... エッジ削除ロジック ... */ }}
      fitView
    >
      <Controls />
      <MiniMap />
      <Background variant="dots" gap={12} size={1} />
    </ReactFlow>
  </div>
</ReactFlowProvider>

  // setViewportを使ってアニメーションしながら移動
  setViewport({ x: x - window.innerWidth / 2, y: y - window.innerHeight / 2, zoom }, { duration });
}

    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      nodeTypes={nodeTypes}
      edgeTypes={edgeTypes}
      onNodeClick={(event, node) => { /* ... 削除ロジックなど ... */ }}
      onEdgeClick={(event, edge) => { /* ... 削除ロジックなど ... */ }}
      fitView // 初回ロード時や変更時に全体表示
      // fitViewOptions={{ padding: 0.2 }} // fitViewのオプション
    >
      <Controls />
      <MiniMap />
      <Background variant="dots" gap={12} size={1} />
    </ReactFlow>
  </div>
</ReactFlowProvider>