Foblex/f-flow
Angular-native node editor library for production workflow builders, AI pipelines, and interactive diagram editors. MIT licensed.
解決的問題
Foblex Flow 是一個為 Angular 設計的節點編輯器函式庫，用於處理建立生產級工作流程建構器、AI 流程與互動式圖表時所面臨的複雜 UI/UX 挑戰。它取代了從零開始建構自訂拖曳邏輯、連接路徑與畫布導航的需要。
工作原理
此函式庫提供 f-flow、f-canvas 與 f-connection 等 Angular 原生的建構模組。開發者可選擇兩種狀態管理模式：
- 經典模式：應用程式擁有圖形記錄，並透過互動事件處理驗證與更新。
- 管理模式：使用
withFlowState()提供具內建快照、取消/重做與自動手勢應用功能的類型安全記錄。
它包含可選的縮放工具，如節點虛擬化與渲染快取，適用於大型場景，並與 Dagre 與 ELK 等佈局引擎整合。
適用對象
建構低代碼 AI 工具、通話流程編輯器、UML 圖表及其他基於節點的內部或客戶端介面的 Angular 開發者與團隊。
主要特色
- 以 Angular 為優先的 API：專為 Angular 設計，而非包裝其他框架的狀態模型。
- 生產就緒功能：內建縮放、平移、迷你地圖、吸附、對齊引導線與多選功能。
- AI 代理優化：附帶
AI.md與llms.txt，協助 AI 編碼代理準確使用該函式庫的特定 API 產生程式碼。 - 可存取性：內建 ARIA 語意，並提供可選的鍵盤層，支援空間導航與連接建立。
- 高度可客製化：節點與連接完全支援模板化，可透過 CSS 令牌與 SCSS 混入進行主題化。
相關
- 專案
- 專案
- 專案
- 專案
- 專案