ノードベースの図解フレームワーク
React の既存アプリケーションに適した React コンポーネントモデルで、nodes と edges からインタラクティブな flowgraph を構築できます。
概要
React Flow は、React におけるノードベースの UI を構築するための MIT ライセンスのオープンソースライブラリです。ノードが edge で接続されたインタラクティブな flowgraph を対象としており、ブラウザ上で図を直接編集できるように設計されています。
このライブラリは、フローエディタや図解ビルダーに必要な中核機能を提供します。ドラッグ、ズーム、パン、複数選択などの組み込み操作に加え、カスタムノードやそれを支える UI のための React コンポーネントも公開しているため、チームはワークフロービルダー、ノーコードツール、ビジュアライザー、その他のインタラクティブな図解体験を組み立てられます。
主要機能
すぐ使えるインタラクティブ編集
ドラッグ、ズーム、パン、複数選択、追加・削除などの基本操作を、最初から組み込まれた機能だけで利用できます。
カスタムノードの構成
操作用コントロール、可視化、複数の接続ハンドルを含むカスタムノードを、通常の React コンポーネントとして作成できます。
柔軟な edge サポート
bezier、smoothstep、step、straight などの組み込み edge タイプを扱え、必要に応じてルーティングや外観をカスタマイズできます。
組み込み UI コンポーネント
Background、Controls、MiniMap、Panel、NodeToolbar、NodeResizer などのコンポーネントで図解用の補助 UI を追加できます。
複数のテーマ設定手段
デフォルト CSS、カスタム CSS、インラインスタイル、CSS variables、または Tailwind に対応したテーマ設定でフローの見た目を調整できます。
主なユースケース
ワークフロービルダー
ユーザーがステップを接続し、ノードを移動し、ブラウザ上でグラフを直接確認できる、社内向けまたは顧客向けのワークフローを作成します。
ノーコードアプリ
カスタムノードと組み込みの操作を基盤として使い、編集の基本要素を一からすべて実装せずにアプリケーション体験を構築します。
インタラクティブビジュアライザー
データ処理、プロセス文書化、アンケートロジックの可視化などのタスク向けに、グラフを表示・操作します。
カスタムドメインエディタ
チャットボットビルダー、機械学習ツール、音楽シンセサイザーなど、接続されたノードがシステムの設定可能な要素を表す専用エディタを構成します。
ブランドに合わせた図解 UI
テーマ設定と CSS フックを使って、図解を既存の製品 UI やデザインシステムに合わせます。
Pros and Cons
Pros
- オープンソースで MIT ライセンスです。
- ドラッグ、ズーム、パン、複数選択、要素の追加・削除などの中核的な操作が組み込まれています。
- カスタムノード、カスタムエッジ、そしてよりリッチなエディタ向けの複数の組み込み図解コンポーネントをサポートします。
- 通常の CSS と Tailwind に対応しており、さまざまなデザインシステムに適応しやすいです。
- すばやく始められるよう、クイックスタート、例、テンプレートが用意されています。
Cons
- ナビゲーションからリンクされている料金ページには価格詳細が掲載されておらず、収集した証拠ではそのページは 404 を返します。
- 高度なスタイル設定や動作は、多くの場合、カスタムノードやカスタムエッジの作成、またはドキュメントで説明されている低レベル API の利用に依存します。
FAQ
React Flow の始め方は？
React Flow は `@xyflow/react` パッケージとしてインストールし、既存の React プロジェクト内で使用します。クイックスタートでは、パッケージの import、`<ReactFlow />` コンポーネントのレンダリング、そして nodes、edges、変更ハンドラの提供方法が示されています。
テンプレートやオンライン例から始められますか？
ドキュメントでは、コアの `<ReactFlow />` コンポーネントと node および edge の state を使って作成した基本的な React Flow アプリが紹介されています。より素早く始めるために、サイトでは Vite テンプレートと CodeSandbox のスタータープロジェクトも案内されています。
React Flow をアプリのデザインシステムに合わせてスタイル設定できますか？
はい。テーマ設定のドキュメントでは、React Flow には最小限のデフォルトテーマが含まれており、CSS、インラインの style props、CSS variables、または Tailwind CSS を使って外観をカスタマイズできると説明されています。
どのような操作が組み込まれていますか？
React Flow には、ノードのドラッグ、ズーム、パン、複数ノードの選択、要素の追加や削除といった組み込みの操作パターンがあります。さらに、より高度な動作のためにカスタムノードとエッジもサポートしています。
React Flow はどのような構成要素を提供しますか？
ドキュメントでは、このライブラリが nodes、handles、edges、viewport、および Background、Controls、MiniMap、Panel、NodeToolbar、NodeResizer などの組み込みコンポーネントを中心に構成されていることが示されています。
Quick Facts
- カテゴリ
- Developer Tool
- 製品タイプ
- React library
- ライセンス
- MIT
- パッケージ
- @xyflow/react
- ソースドメイン
- reactflow.dev
- 提供元
- xyflow
React Flowの代替品
ChartAI
ChartAIは、チャート、図表、インフォグラフィックなどのビジュアルを素早く作成できるWebベースのAIツール。プレゼン、論文、プロジェクト向けに最適です。
Docuopia
Docuopia は、製品要件、ヘルプドキュメント、Wiki、図表の作成・編集を支援する AI ドキュメントアシスタントです。共同編集、版管理、無料版も利用可能。
Pixso
Pixso is a cloud-based product design collaboration tool with AI-assisted UI creation, whiteboarding, prototyping, and developer handoff. It supports teams that need to plan, design, and deliver product work in one shared environment.
Xmind
Xmind is a mind mapping and visual thinking tool for organizing ideas, planning projects, and building presentations on the web, desktop, and mobile. It adds AI-assisted editing, collaboration, and export workflows for individual and team use.
Stempad
Stempadは、メモ、文書、技術的なワークフロー向けのブラウザベースの科学ライティングエディタです。数式、グラフ、化学、コード、図をキーボード中心で扱え、エクスポート、共同編集、AI機能にも対応します。
BioRender
BioRenderは、研究者、学生、ライフサイエンスチーム向けのWebベースの科学図版・イラスト作成ツールです。出版向けの図、グラフ、スライド、フローチャート、プロトコル、タイムラインを作成できます。