簡介

React Flow 是一個用於建構基於節點應用程式的函式庫。這些應用程式可以從簡單的靜態圖表到資料視覺化，再到複雜的視覺化編輯器。您可以實作自訂的節點類型和邊緣，並且它開箱即用地提供了諸如迷你地圖和視窗控制之類的組件。

如果您想快速入門，請查看快速入門指南，否則，讓我們來看看 React Flow 的主要功能。

主要特色

👌 易於使用：React Flow 已經開箱即用地提供了許多您想要的功能。拖曳節點、縮放和平移、選擇多個節點和邊緣，以及新增/移除邊緣都是內建的功能。

🎨 可客製化：React Flow 支援自訂節點類型和邊緣類型。由於自訂節點只是 React 組件，您可以實作任何您需要的東西：您不會被鎖定在內建的節點類型中。自訂邊緣讓您可以將標籤、控制項和客製化的邏輯加入到節點邊緣。

⚡️ 快速渲染：React Flow 只會渲染已變更的節點，並確保只會顯示在視窗內的節點。

🧩 內建外掛：我們開箱即用地提供了 React Flow 的幾個外掛

• <Background /> 外掛實作了一些基本的可客製化背景樣式。
• <MiniMap /> 外掛會在螢幕角落顯示圖表的縮小版本。
• <Controls /> 外掛會新增縮放、置中和鎖定視窗的控制項。
• <Panel /> 外掛讓您可以輕鬆地將內容放置在視窗的頂部。
• <NodeToolbar /> 外掛讓您可以渲染附加到節點的工具列。
• <NodeResizer /> 外掛讓您可以輕鬆地為節點新增調整大小的功能。

💪 可靠：React Flow 完全使用 TypeScript 編寫，以便及早發現錯誤並輕鬆進行修正。對於其他所有事情，我們有一個強大的 cypress 測試套件，因此您可以放心地依賴 React Flow。

下一步

現在您已經對 React Flow 有了更好的了解，下一頁將說明您在整份文件中會重複看到的一些常見術語：節點、邊緣和控制點。