Foblex/f-flow

解决的问题

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 混入进行主题化。