# @foblex/flow 中文文档

规范地址：https://npmcn.com/package/%40foblex/flow/

版本：19\.4\.0
npm 元数据更新时间：2026-10-25T09:41:19.849Z
中文译文更新时间：2026-11-15T03:43:21.039Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40foblex/flow
原文对照：https://npmcn.com/package/%40foblex/flow/?lang=original
项目主页：https://flow.foblex.com/
源码仓库：https://github.com/Foblex/f-flow

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：4 MB，44 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/core \>=17\.3\.0，@angular/common \>=17\.3\.0
- 首次发布：2023-09-16T17:25:29.317Z
- 最新版本发布：2026-10-25T09:41:19.488Z
- 近 30 天下载量：379273（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：170（近 12 个月 25 个）

## 中文简介

Angular 最被采纳的节点编辑器库. Angular-native,用于生产工作流程构建者,AI管道和交互式图表编辑器.

## 安装

```sh
npm install @foblex/flow
```

也可以使用：`pnpm add @foblex/flow`、`yarn add @foblex/flow`、`bun add @foblex/flow`

## README

[![Foblex Flow Logo](https://github.com/user-attachments/assets/ee1d39f6-0a89-4cb9-8dee-1652aba82e69)](https://flow.foblex.com/)

 [![NPM Release](https://img.shields.io/npm/v/@foblex/flow.svg?logo=npm&logoColor=fff&label=Release&color=limegreen)](https://www.npmjs.com/package/@foblex/flow)[![Build Status](https://github.com/Foblex/f-flow/actions/workflows/tests-ci.yml/badge.svg) ](https://github.com/Foblex/f-flow/actions/workflows/tests-ci.yml)[![NPM Weekly Downloads](https://img.shields.io/npm/dw/@foblex/flow.svg?label=Downloads&color=blue) ](https://www.npmjs.com/package/@foblex/flow)[![GitHub Stars](https://img.shields.io/github/stars/Foblex/f-flow.svg?label=Stars&color=gold) ](https://github.com/Foblex/f-flow/stargazers)[![MIT License](https://img.shields.io/npm/l/@foblex/flow.svg?label=License&color=green)](https://github.com/Foblex/f-flow/blob/main/LICENSE)

# Foblex 流动

**Angular最被采纳的节点编辑器库——用于制作工作流程构建者,AI管道和交互式图编辑器.**

发泡花 流体将生产节点编辑器的硬部分——拖动逻辑,命中测试,SVG连接路径,再分配,选择,缩放,并取消/重置——作为角-内建构件. 开始 `f-flow`, (中文(简体) ), `f-canvas`,节点和连接,然后只当您的产品需要时,添加更丰富的编辑器特性. 它授权生产产品,例如: [吕瓦雷·尼姆布斯](https://luware.com/products/nimbus), (中文(简体) ), [进程MIX](https://processmix.com/), (中文(简体) ), [百花齐放](https://xpertai.cn/en/),以及 [EpicStaff (美国)](https://www.epicstaff.ai/)。 。 。 .

利用它来创建工作流程构建器,AI低码工具,调用流程编辑器,UML图,内部后台工具等以节点为基础的接口. 从应用程序自有的图表记录开始, 或选择使用管理的记录并撤销/重做 `withFlowState()`; 验证, 持久性, 权限, 和域逻辑在两种模式中仍然是应用程序关切.

[![Foblex Flow — Angular node editor with draggable nodes and connections](https://flow.foblex.com/previews/examples/reflow-on-resize.light.png)](https://flow.foblex.com/examples/overview)

当前 `19.x` 释放目标角 `17.3+`如果你的应用在角12 -17.2上,请检查 [角版本兼容性](https://flow.foblex.com/docs/angular-version-compatibility) 在安装前先给相匹配的 Foblex 流线绑定 .

## 用于 AI 编码代理

Foblex Flow将AI编码代理视为一等用户: 包装一个版本匹配的指南 at `node_modules/@foblex/flow/AI.md`, (中文(简体) ), `ng add` 写工作空间代理规则,稳定 `FFxxxx` 诊断给毒剂一个混凝土通过/失效信号. 在生成代码之前,对照该指南或链接的官方引用来验证Foblex特定选择器和API;不要从其他节点编辑库中推断出API.

故意选择集成: 经典模式保留应用程序中的图表记录, 而可选 `provideFFlow(withFlowState())` 为支持的操作提供已输入管理的记录并撤销/重做。 使用 API 验证生成的流量 `FFxxxx` 运输指南中描述的诊断.

[AI 设置指南](https://flow.foblex.com/docs/ai) • 妇女 [完整的 LLM 可读参考文献](https://flow.foblex.com/llms-full.txt)

## 为什么Foblex流

-   最被采纳的为Angular所建的节点编辑器库,由npm每周下载——自2022年起保持了全职,并用于生产商业产品.
-   简单启动路径: 大多数编辑器开始于 `f-flow`, (中文(简体) ), `f-canvas`、节点、连接器和连接器.
-   Angular-First API适合Angular Apps,而非包接回式状态模型.
-   用于真实编辑器交互的构建:拖动来连接,拖动来重新指定,选择,缩放,迷你映射,抓取,对齐的帮助,以及出行点.
-   高级模块是可选的:缓存和虚拟化是缩放工具,而不是一日要求.
-   自定义特定域图 UI的节点,连接器,和连接.
-   选择适合您的编辑器的状态边界:默认情况下的应用程序自有记录,或可选择的键入 `FFlowState` 带有快照和撤销/重写的记录.
-   您的应用仍然控制着验证规则,权限,持久性,以及两种状态模式中的商业意义.
-   适用于轻量级图表和完整的工作流程构建器产品.

## 特征概览

| 区域 | 箱子里有什么船吗 |
| --- | --- |
| 编辑 | 拖放节点和组、拖放/点击/键盘连接创建、重新指定、路由点、调整大小、旋转、抓取和调整指南、磁行 |
| 导航 | 相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相接相接相接相接相接相接相接相接相接相接相相接相接相接相接相接相接相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相 |
| 选择 | 点击、 marquee、 多选择、 全部选择、 选择事件—— 您的应用程序决定选择的含义 |
| 无障碍 | ARIA 语义默认; 选入键盘层: 空间导航, 移动, 删除, 和连接创建, 无需鼠标, 屏幕阅读器通知, 可重用密钥 |
| 版式 | Dagre 和 ELK 自动放出软件包, 重排大小, 层排序 |
| 缩放 | 节点虚拟化,使缓存,背景工人——可选,用于大型场景 |
| 自定义 | 完整的模板化节点/连接/连接器,可以通过 CSS 令牌/ SCSS 混音器,自定义标记,连接梯度和标签实现 |
| 一体化 | 经典事件驱动的 API 有应用自有记录, 或者可选 `withFlowState()` 管理的记录、快照和撤销/重做; SSR -- -- 安全、无区域准备 |
| AI 工具 | `llms.txt`,捆绑 `AI.md`, (中文(简体) ), `ng add` 撰写代理规则, 进行稳定的 dev 诊断 `FFxxxx` 错误代码 |

比较选择? 阅读诚实的比较: [反向流对角球队的 Foblex 流](https://flow.foblex.com/docs/react-flow-vs-foblex-flow-for-angular-teams) 财务报告和审定财务报表 [ngx-vflow vs Foblex 流量](https://flow.foblex.com/docs/ngx-vflow-vs-foblex-flow)。 。 。 .

## 选择您的状态整合

默认 **经典模式** 生成应用程序拥有的数组或信号。 Foblex 流出最后交互事件,例如 `fCreateConnection` 财务报告和审定财务报表 `fMoveNodes`;您的处理器验证它们并更新应用程序状态.

可选 **管理模式** 安装 `provideFFlow(withFlowState())`。其类型 `FFlowState` 记录自动应用支持的手势,并提供分批、快照、撤销和重做。 您的应用程序仍然定义了域,并决定记录的验证和持续方式 .

[管理流动国家指南](https://flow.foblex.com/docs/managed-flow-state) • 妇女 [状态实例](https://flow.foblex.com/examples/state)

## 你可以构建什么

-   角节点编辑器
-   角工作流程构建器
-   AI 低码和内部工具
-   呼叫流量、自动化编辑器和管道
-   UML 、 架构和其他交互式图表接口

## 实例

-   [AI 低码平台](https://flow.foblex.com/examples/ai-low-code-platform) - 有自定义节点、JSON导入/导出、多个主题、配置面板的旗舰前端仅AI低码IDE演示,并附有验证、节点验证反馈、撤销/重做、持久性、多选择和动画连接.
-   [呼叫中心流量](https://flow.foblex.com/examples/call-center) - IVR路由、排队、操作员交接、传输、语音邮件和嵌入式节点表格的工作流程构建器参考应用程序.
-   [Schema 设计器](https://flow.foblex.com/examples/schema-designer) - 更丰富的schema编辑器演示 带节点,关系,和CRUD风格的交互.
-   [UML 图表](https://flow.foblex.com/examples/uml-diagram-example) - 架构和UML风格的图形界面的角实例.
-   [锦标赛](https://flow.foblex.com/examples/tournament-bracket) - 以同一种以节点为基础的原始物为基础的专用括号UI.
-   [所有实例](https://flow.foblex.com/examples/overview) - 连接、选择、迷你地图、布局、对齐和其他编辑功能的有重点的例子.

## 尝试在线

不需要本地设置——浏览器中最小启动器运行 :

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/Foblex/f-flow/tree/main/starters/minimal-flow)

## 安装

这些安装命令用于当前 `19.x` 线条。 对于Angular 12-17.2应用软件,请使用 [角版本兼容性](https://flow.foblex.com/docs/angular-version-compatibility) 首先引导您不要意外安装更新的兼容行 .

```bash
ng add @foblex/flow
```

Nx 工作空间 :

```bash
nx g @foblex/flow:add
```

`ng add` 自动安装所需的配套软件包。 如果喜欢手工安装,请明确安装:

```bash
npm install @foblex/flow @foblex/platform@^1.0.4 @foblex/mediator@^1.1.3 @foblex/2d@^1.2.2 @foblex/utils@^1.1.1
```

`ng add` 还可以通过添加将运出默认主题带入应用程序样式 `node_modules/@foblex/flow/styles/default.scss` 当条目缺失时.

## 默认主题

使用默认主题时, 需要立即排序节点、 连接器、 连接器、 迷你地图、 选择区域、 以及帮助插件 .

```json
"styles": [
  "src/styles.scss",
  "node_modules/@foblex/flow/styles/default.scss"
]
```

如果您更喜欢选取SCSS混音器,而不是一个完整的切入点:

```scss
@use '@foblex/flow/styles' as flow-theme;

@include flow-theme.theme-tokens();
@include flow-theme.flow-canvas();
@include flow-theme.node-group();
@include flow-theme.connector();
@include flow-theme.connection-all();
@include flow-theme.plugins();
```

全向导 : [默认主题和样式](https://flow.foblex.com/docs/default-theme-and-styling)

## 最小示例

```html
<f-flow fDraggable>
  <f-canvas>
    <f-connection fSourceId="a-out" fTargetId="b-in"></f-connection>

    <div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }">
      Drag me
      <div fConnector fConnectorType="source" fConnectorId="a-out"></div>
    </div>

    <div fNode fDragHandle [fNodePosition]="{ x: 244, y: 24 }">
      Drag me too
      <div fConnector fConnectorType="target" fConnectorId="b-in"></div>
    </div>
  </f-canvas>
</f-flow>
```

这就是心理模型: `f-flow` 主持编辑, `f-canvas` 泛和缩放,任何元素都会成为节点 `fNode`,以及 `fConnector` 端点附加连接 。 国家管理和每一个先进特点仍然是明确的选择.

## 快速 FAQ 数据

-   **Foblex Flow 很难使用吗?** 没有。 核心设置为小而角-内生.
-   **我需要蹲下还是虚拟化?** 没有。 大部分编辑在第一天不需要它们. 它们是大型场景的可选缩放工具.
-   **给谁用的?** Angular团队建立节点编辑器,工作流程构建器,交互式图表等以图表为基础的产品UI.

## 资源

-   [开始](https://flow.foblex.com/docs/get-started)
-   [角版本兼容性](https://flow.foblex.com/docs/angular-version-compatibility)
-   [流动管理状态](https://flow.foblex.com/docs/managed-flow-state)
-   [大流量性能](https://flow.foblex.com/docs/large-flow-performance)
-   [阴影 DOM 和角元素](https://flow.foblex.com/docs/shadow-dom-and-angular-elements)
-   [移动到统一连接器](https://flow.foblex.com/docs/migrating-to-unified-connectors)
-   [文档](https://flow.foblex.com/docs/intro)
-   [实例](https://flow.foblex.com/examples/overview)
-   [文章](https://flow.foblex.com/blog/overview)
-   [显示大小写](https://flow.foblex.com/showcase/overview)
-   [路线图](https://github.com/Foblex/f-flow/blob/main/ROADMAP.md)
-   [更改日志](https://github.com/Foblex/f-flow/blob/main/CHANGELOG.md)

### AI代理和法学硕士

-   [页:1](https://flow.foblex.com/llms.txt) 代理人索引; [llms- full.txt (英语)](https://flow.foblex.com/llms-full.txt) 完全可读的LLM参考文献
-   [AI 使用指南](https://github.com/Foblex/f-flow/blob/main/libs/f-flow/AI.md) ——严格的代码生成规则,也在本包内发运,地点: `node_modules/@foblex/flow/AI.md`

## 社区和支助

-   [GitHub 仓库](https://github.com/Foblex/f-flow)
-   [GitHub 讨论](https://github.com/Foblex/f-flow/discussions)
-   [问题跟踪器](https://github.com/Foblex/f-flow/issues)
-   [文件门户](https://flow.foblex.com/)

关于问题或伙伴关系调查: [支持@ foblex.com](mailto:support@foblex.com)

## 许可证

Foblex 流量在 [MIT 许可证](https://github.com/Foblex/f-flow/blob/main/LICENSE)。 。 。 .

## 常见问题

### @foblex/flow 是什么？

Angular 最被采纳的节点编辑器库\. Angular-native,用于生产工作流程构建者,AI管道和交互式图表编辑器\.

### 如何安装 @foblex/flow？

在项目目录运行 npm install @foblex/flow，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（\>=17\.3\.0）、@angular/common（\>=17\.3\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @foblex/flow 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @foblex/flow 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @foblex/flow 可以商用吗？

@foblex/flow 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @foblex/flow 的下载量有多少？

根据 npm 官方下载统计，@foblex/flow 在 2026/10/15 – 2026/11/13 这 30 天内被下载 379,273 次，日均约 12,642 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @foblex/flow 还在维护吗？

最新版本 19\.4\.0 发布于 2026/10/25（21 天前）；至今共发布 170 个版本，其中过去 12 个月发布了 25 个；首次发布于 2023/09/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。