無程式碼也能輕鬆打造專業LINE官方帳號！一鍵導入模板，讓AI助你行銷加分！
建立互動式基於節點的介面──無論是用於工作流程編輯器、視覺化程式工具，還是資料管線設計器──都是前端開發中最具挑戰性的任務之一。您需要處理縮放和平移、節點拖曳和定位、邊線路由和渲染，以及圖形互動的所有複雜性。Vue Flow 將 React Flow 互動模型的力量帶到了 Vue 3 生態系統中，提供一個精緻、高效能且深度可自訂的流程圖元件。
由 bcakmakoglu 建立，Vue Flow 專為 Vue 3 的 Composition API 量身打造，利用 Vue 的反應系統實現響應式節點更新和無縫狀態管理。該函式庫在 Vue 生態系統中獲得了顯著的關注，開發者用它來建立從 AI 工作流程編輯器到低程式碼平台再到網路拓撲視覺化器的各種應用。
Vue Flow 與眾不同之處在於它結合了開箱即用的功能性和深度自訂能力。您無需編寫任何互動程式碼即可獲得縮放、平移、小地圖、選取、拖放和鍵盤快捷鍵。但每個視覺元素──從節點渲染到邊線樣式再到控制項元件──都可以替換為您自己的自訂 Vue 元件。
Vue Flow 的架構如何運作？
Vue Flow 建立在一個分層架構之上，將圖形狀態管理、渲染和互動處理分離開來。
graph TD
A[Vue Flow 元件] --> B[圖形狀態管理]
A --> C[視口控制器]
A --> D[互動層]
B --> E[節點儲存庫]
B --> F[邊線儲存庫]
C --> G[縮放與平移]
C --> H[小地圖]
D --> I[選取]
D --> J[拖放]
D --> K[鍵盤]
E --> L[節點渲染器]
F --> M[邊線渲染器]
L --> N[自訂 Vue 元件]
M --> N
狀態管理層維護節點和邊線的反應式儲存庫，視口控制器處理攝影機變換，互動層將使用者輸入轉換為狀態變更。這種分離確保自訂元件只需關心渲染，無需處理互動邏輯。
Vue Flow 支援哪些節點和邊線類型？
Vue Flow 內建一組節點和邊線類型，同時讓建立自訂類型變得非常簡單。
| 類型 | 類別 | 選項 | 自訂能力 |
|---|---|---|---|
| 預設節點 | 內建 | 標籤、圖示、連接點 | 樣式屬性、CSS 變數 |
| 輸入節點 | 內建 | 單一目標連接點 | 樣式、大小、顏色 |
| 輸出節點 | 內建 | 單一來源連接點 | 樣式、大小、顏色 |
| 自訂節點 | 使用者定義 | 任何 Vue 3 元件 | 完全控制渲染 |
| 貝茲邊線 | 內建 | 動畫、標籤、標記 | 路徑、顏色、寬度 |
| 階梯邊線 | 內建 | 直角路徑 | 樣式、動畫 |
| 平滑階梯 | 內建 | 圓角直角路徑 | 樣式、動畫 |
| 直線邊線 | 內建 | 直線 | 樣式、動畫 |
自訂節點是標準的 Vue 3 元件，接收節點資料作為 props，可以包含任何 HTML、子元件或互動式元素。自訂邊線遵循相同的模式，可以存取來源和目標節點的位置。
Vue Flow 公開哪些互動事件？
該函式庫提供了一個全面的事件系統，涵蓋每個使用者互動和狀態變更。
| 事件 | 觸發時機 | 承載資料 |
|---|---|---|
nodeClick | 使用者點擊節點 | 節點 ID、事件、位置 |
nodeDrag | 使用者拖曳節點 | 節點 ID、位置增量 |
edgeClick | 使用者點擊邊線 | 邊線 ID、事件 |
connect | 使用者建立邊線 | 來源節點、目標節點 |
selectionChange | 選取的節點/邊線變更 | 選取 ID 陣列 |
viewportChange | 縮放或平移變更 | 縮放層級、中心位置 |
nodeDoubleClick | 使用者雙擊節點 | 節點 ID、事件 |
nodesChange | 任何節點變更 | 變更類型和資料 |
edgesChange | 任何邊線變更 | 變更類型和資料 |
事件遵循 Vue 3 的 emit 模式，可以在範本中使用標準的 @event 語法處理。事件承載資料以 TypeScript 型別化，使與型別安全程式碼庫的整合變得簡單直接。
如何在 Vue Flow 中建立自訂節點？
建立自訂節點是 Vue Flow 應用程式中最常見的擴充點，而該函式庫使其非常簡單。
| 自訂面向 | Vue Flow 方法 | 範例 |
|---|---|---|
| 節點渲染 | 自訂 Vue 3 元件 | 包含任何 HTML 的 <template> |
| 節點資料 | 型別化 props 介面 | defineProps<NodeProps>() |
| 節點連接點 | <Handle /> 元件 | 位置、類型、樣式 |
| 節點連接 | 可配置的連接點類型 | 來源/目標、多個連接點 |
| 節點調整大小 | 調整大小指令 | 拖曳調整節點大小 |
| 節點右鍵選單 | 自訂實作 | 右鍵元件 |
| 節點分組 | 巢狀節點支援 | 父-子節點 |
| 節點驗證 | 連接前回呼 | 拒絕無效連接 |
自訂節點本質上是一個標準的 Vue 3 元件，接收節點特定的 props，並可以使用 Handle 元件來定義連接點。這個熟悉的模式意味著任何 Vue 開發者都可以建立複雜的自訂節點，而無需學習新的範式。
FAQ
什麼是 Vue Flow？ Vue Flow 是一個為 Vue 3 設計的高度可自訂流程圖元件庫，靈感來自 React Flow。它提供縮放、平移、小地圖、自訂節點和邊線，以及完整的 TypeScript 支援，用於建立互動式基於節點的應用程式。
Vue Flow 與 React Flow 相比如何？ Vue Flow 的靈感來自 React Flow，但它是為 Vue 3 的 Composition API 完全重新實作的。它提供類似的功能——自訂節點、邊線、小地圖、控制項——並針對 Vue 的反應系統進行了效能最佳化。
Vue Flow 支援哪些類型的節點和邊線？ Vue Flow 支援內建節點類型，包括輸入、輸出和預設節點。自訂節點可以建立為 Vue 3 元件。邊線類型包括貝茲曲線、階梯、平滑階梯和直線，全部支援自訂樣式和標記。
Vue Flow 支援觸控裝置和行動裝置嗎？ 是的，Vue Flow 包含行動裝置的觸控事件處理。使用者可以在平板和手機上使用觸控手勢拖曳節點、平移視口和縮放。
可以使用 Vue Flow 建立哪些類型的應用程式？ Vue Flow 用於視覺化程式編輯器、工作流程自動化工具、聊天機器人建置器、資料管線設計器、心智圖應用程式、網路拓撲編輯器，以及任何需要互動式基於節點介面的應用程式。
延伸閱讀
- Vue Flow GitHub 倉庫 – 原始碼、範例和社群問題
- Vue Flow 文件 – 附指南和 API 參考的官方文件
- React Flow – Vue Flow 的靈感來源（React 版本）
- Vue 3 Composition API 文件 – Vue Flow 所基於的 Vue 3 API
- TypeScript 文件 – 用於型別安全 Vue Flow 使用的 TypeScript 語言參考
