以節點為基礎的圖表框架
以節點與邊線連接來建立互動式流程圖，並採用適合既有 React 應用的 React 元件模型。
總覽
React Flow 是一個 MIT 授權的開源函式庫，用於在 React 中建立以節點為基礎的 UI。它專為互動式流程圖而設計，節點之間以邊線連接，且可直接在瀏覽器中編輯圖表。
此函式庫提供流程編輯器與圖表建構器所需的核心元件，包括拖曳、縮放、平移與多選等內建互動。它也提供可用於自訂節點與支援 UI 的 React 元件，讓團隊能組合工作流程建構器、無程式碼工具、視覺化工具，以及其他互動式圖表體驗。
核心功能
開箱即用的互動式編輯
使用內建的拖曳、縮放、平移、多選，以及新增／移除行為，無需自行串接基本功能。
自訂節點組合
將自訂節點作為一般 React 元件來建立，包含互動控制項、視覺化內容與多個連接把手。
彈性的邊線支援
使用內建邊線類型，例如 bezier、smoothstep、step 與 straight，並可依需求自訂路由與外觀。
內建 UI 元件
透過 Background、Controls、MiniMap、Panel、NodeToolbar 與 NodeResizer 等元件加入圖表輔助功能。
多種主題設定方式
可使用預設 CSS、自訂 CSS、inline styles、CSS 變數，或相容 Tailwind 的主題設定來為流程樣式化。
常見使用情境
工作流程建構器
建立內部或面向客戶的工作流程，讓使用者可連接步驟、移動節點，並直接在瀏覽器中檢視圖表。
無程式碼應用程式
以自訂節點與內建互動作為基礎層，打造不必從零撰寫每個編輯器原語的應用體驗。
互動式視覺化工具
用於資料處理、流程文件或問卷邏輯視覺化等任務，顯示並操作圖表。
自訂領域編輯器
組合聊天機器人建構器、機器學習工具或音樂合成器等專門編輯器，讓連接的節點代表系統中可設定的部分。
品牌化圖表 UI
運用主題設定與 CSS 鉤子，將圖表融入既有產品 UI 或設計系統。
Pros and Cons
Pros
- 開源且採用 MIT 授權。
- 拖曳、縮放、平移、多選，以及元素新增／移除等核心互動均已內建。
- 支援自訂節點、自訂邊線，以及多種內建圖表元件，能打造更豐富的編輯器。
- 可搭配純 CSS 與 Tailwind 使用，因此能適應不同的設計系統。
- 提供快速入門、範例與範本，協助更快開始使用。
Cons
- 網站在導覽列所連結的定價頁面上未提供價格詳情；根據收集到的證據，該頁面回傳 404。
- 進階樣式與行為通常取決於建立自訂節點、自訂邊線，或使用文件中描述的較低層級 API。
FAQ
如何開始使用 React Flow？
React Flow 以 `@xyflow/react` 套件安裝，並在既有的 React 專案中使用。快速入門會示範匯入套件、渲染 `<ReactFlow />` 元件，以及提供節點、邊線與變更處理器。
我可以從範本或線上範例開始嗎？
文件展示了使用核心 `<ReactFlow />` 元件搭配節點與邊線狀態建立的基本 React Flow 應用。若想更快上手，網站也提供 Vite 範本與 CodeSandbox 起始專案。
React Flow 可以調整樣式以符合應用程式的設計系統嗎？
可以。主題設定文件說明 React Flow 內建極簡的預設主題，且可透過 CSS、inline style props、CSS 變數，或使用 Tailwind CSS 來自訂外觀。
有哪些內建互動功能？
React Flow 內建拖曳節點、縮放、平移、選取多個節點，以及新增或移除元素等互動模式，也支援自訂節點與邊線，以實現更進階的行為。
React Flow 提供哪些構建區塊？
文件顯示，這個函式庫以節點、連接點、邊線、視埠，以及 Background、Controls、MiniMap、Panel、NodeToolbar 與 NodeResizer 等內建元件為基礎。
Quick Facts
- 分類
- 開發者工具
- 產品類型
- React 函式庫
- 授權
- MIT
- 套件
- @xyflow/react
- 來源網域
- reactflow.dev
- 維護者
- xyflow
React Flow 替代品
ChartAI
ChartAI 是一款網頁式 AI 工具，可快速製作圖表、流程圖、資訊圖表與其他視覺內容，適合簡報、論文與專案使用。
Docuopia
Docuopia 是一款 AI 文件助理，可用於撰寫與編輯產品需求、說明文件、wiki 頁面與圖表，並支援協作編輯、版本歷史與免費版體驗工作流程。
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 是專為研究人員、學生與生命科學團隊打造的網頁版科學圖表與插圖平台，可製作出版級圖、圖表、簡報、流程圖、實驗流程與時間軸，付費方案支援發表與協作。