# @flowfuse/flow-renderer 中文文档

规范地址：https://npmcn.com/package/%40flowfuse/flow-renderer/

版本：0\.6\.0
npm 元数据更新时间：2026-10-06T15:52:43.239Z
中文译文更新时间：2026-11-15T00:21:58.265Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：438 kB，5 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>=16\.x
- 运行依赖：0 个
- 首次发布：2024-04-24T14:22:00.475Z
- 最新版本发布：2026-10-06T15:52:42.666Z
- 近 30 天下载量：8606（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：9（近 12 个月 2 个）

## 中文简介

节点-RED 流量渲染器

## 安装

```sh
npm install @flowfuse/flow-renderer
```

也可以使用：`pnpm add @flowfuse/flow-renderer`、`yarn add @flowfuse/flow-renderer`、`bun add @flowfuse/flow-renderer`

## README

# FlowFuse 流程渲染器

一个将节点-RED流量转换成网页的库.

## 安装

```bash
npm install @flowfuse/flow-renderer
```

## 发展

所有客户端代码都在 `index.js` 文档以方便地包含在网页中.

运行 `npm run demo` 在浏览器中测试流程渲染器.

运行 `npm run build` 用于构建最小化的流变器。 这将输出文件 `index.min.js`。 。 。 .

ImportANT:在对寄存器进行修改之前,应先建造流程渲染器的精密版本.

## 使用量

将以下脚本标记添加到您的 HTML 文件 :

```html
<script type="module" src="public/flow-renderer/index.min.js"></script>
```

_或脚本位于您的工程中的位置_

下一个,将容器元素添加到您的 HTML 文件并即时跳出 a `flowRenderer`。 。 。 . 注:流-还源器是一个ES模块,需要现代浏览器运行. 脚本标记必须包含 `type="module"` 属性.

默认情况下,流出渲染器会使流出 `gridLines`, (中文(简体) ), `images`, (中文(简体) ), `labels`, (中文(简体) ), `zoom`, (中文(简体) ), `autoZoom`,以及 `autoScroll` 启用 . `linkLines` 默认已禁用.

要操作缩放,请使用鼠标轮 + 代码 或者说 ⌘ 键. 要垂直滚动容器,请使用鼠标轮,而不使用 移动 键. 要横向滚动容器,请使用鼠标轮+ 移动 键.

### 基本实例

```html
<div id="nr-flow-1" class="flow-renderer" style="height: 300px"></div>
```

```html
<script type="module">
  const renderer = new FlowRenderer()
  const container1 = document.getElementById('nr-flow-1');
  const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
  renderer.renderFlows(flow, { container: container1 })
</script>
```

### 内入选项示例

可通过数据属性设置选项 `scope`, (中文(简体) ), `grid-lines`, (中文(简体) ), `zoom`, (中文(简体) ), `images`, (中文(简体) ), `link-lines`, (中文(简体) ), `labels`, (中文(简体) ), `auto-zoom`, (中文(简体) ), `auto-scroll`。 。 。 .

注:对于SET和选项,数据属性可以简单地存在于容器元素上。 对于UNSET,数据属性必须设定为: `false`。 。 。 .

```html
<div id="nr-flow-2" style="height: 300px" 
    data-scope="custom-css-scope"
    data-grid-lines
    data-zoom
    data-images
    data-link-lines="false"
    data-labels
    data-auto-zoom
    data-auto-scroll
></div>
```

```html
<script type="module">
  const renderer = new FlowRenderer()
  const container2 = document.getElementById('nr-flow-2');
  const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
  renderer.renderFlows(flow, { container: container2 })
</script>
```

### 完整选项示例

```html
<div id="nr-flow-3" class="my-scope" style="height: 300px"></div>
```

```javascript
const renderer = new FlowRenderer()
const container3 = document.getElementById('nr-flow-3');
const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
renderer.renderFlows(flow, {
    container: container3,
    scope: 'custom-css-scope', // scope for CSS
    gridLines: true, // show gridLines
    images: true, // show images
    linkLines: false, // show link lines
    labels: true, // show labels
    zoom: true, // enable zoom within the container
    autoZoom: true, // auto zoom to fit the flow within the container upon rendering (best fit, limited to 20% min, 100% max zoom)
    autoScroll: true, // auto scroll the leftmost node to the left of the container and the topmost node to the top of the container upon rendering
    flowId: undefined // Id of flow to display
})
```

### 实例

```html
    <div id="app">
        <div ref="f1" class="flow-renderer"></div>
    </div>

    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        import FlowRenderer from './index.js'
        createApp({
            mounted() {
                const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
                const renderer = new FlowRenderer()
                renderer.renderFlows(flow, { container: this.$refs.f1 })
            }
        }).mount('#app')
    </script>
```

### 比较流动的基本实例

```html
<div id="nr-flow-1" class="flow-renderer" style="height: 300px"></div>
```

```html
<script type="module">
  const renderer = new FlowRenderer()
  const container1 = document.getElementById('nr-flow-1');
  const flow1 = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "z": "9999", "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40, "z": "9999"}]
  const flow2 = [{"id": "1001", "type": "inject", "x": 120, "y": 40, "z": "9999", "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":120, "y": 80, "z": "9999"}]
  renderer.compare([flow1, flow2], { container: container1 })
</script>
```

## 鸣谢

这个项目要归功于格瑞特·瑞森的原作 [节点-红色流程查看器](https://github.com/gorenje/node-red-flowviewer-js)正是这个伟大的贡献 开始球滚滚。 Gerrit给我们留下了 这个项目所需的零件.

## 限制

-   目前只支持客户端渲染
-   移动抓取缩放尚未执行
-   流出渲染器不支持所有贡献的节点-RED节点,但是它们将作为通用节点类型与节点的标签一起完成.
-   流量渲染器并不总是像在节点-RED编辑器中出现的那样,使流量和节点精确. 这部分是由于是一个客户端的渲染器,没有服务器端组件来提供完整的上下文,部分是由于渲染器本身目前的局限性.
-   流量比较功能仍在很早期的开发中,如果流量过于相异,或者来自节点-RED的出口不完善,则可能无法如预期的那样运行.

## 释放过程

在这个项目中 [释放请](https://github.com/googleapis/release-please) 用于根据代码库中的承诺信息自动确定下一个发布版本.

通过使用 [常规武器委员会](https://www.conventionalcommits.org/en/v1.0.0/),项目遵守承诺信息的标准格式 `Release Please` 用于确定下一次发布是主要、次要还是补丁发布.

### 构成部分

1.  这个 `Prepare release` GitHub 动作工作流程 :
    
    -   请分析信件的动作,以根据常规承诺的规格确定需要的释放类型(主要、次要、补丁)
    -   创建带有拟议版本凸起和更改日志的预放拉动请求
    -   合并后,自动更新版本编号 `package.json` 并在 GitHub 上创建新的版本,并附带适当的更改日志
2.  这个 `Lint Pull Request Title` GitHub 动作工作流程 :
    
    -   运行于拉动请求创建和使用 `amannn/action-semantic-pull-request` 行动以验证拉动请求标题遵循《公约》格式
    -   与调整后的默认合并承诺消息一起,这确保所有合并到主分支中的承诺都遵守预期格式,允许发布请求正确运行
3.  这个 `Release Published` GitHub 动作工作流程 :
    
    -   当新的 git 标记进入时运行的工作流程 `v*.*.*` 格式被推出,并负责将新版本的软件包发布给使用该软件包的 npm 公共登记册 `JS-DevTools/npm-publish` 动作

### 拉动请求标题格式

常规委员会预设的拉动请求标题格式如下:

```
<type>(<scope>): <subject>
```

-   类型:描述承诺的类别。 例如:
    -   `feat`:一个新的特性(触发一个小版本的凸起).
    -   `fix`: a bug fix (触发补丁版本的出错).
    -   `perf`: 代码更改能改善性能(触发补丁版本的出错).
    -   `refactor`:一个代码更改,既不修补一个错误,也不添加一个特性(除非伴有 BREAKING CHANGE,否则不会触发发布).
    -   `docs`: 仅文档更改(不触发发布).
    -   `chore`: 构建过程或辅助工具和库的更改(不触发发布).
-   范围:一个可选部分,提供关于所改变内容的额外上下文(例如模块,组件).
-   主题:变化简介.

### 处理中断更改

为了表示突破性的变化,感叹标记 `!` 应在类型/范围之后立即使用:

-   `feat!:`
-   `fix!:`
-   `refactor!:`

## 许可证

阿帕奇 - 2.0

## 常见问题

### @flowfuse/flow-renderer 是什么？

节点-RED 流量渲染器

### 如何安装 @flowfuse/flow-renderer？

在项目目录运行 npm install @flowfuse/flow-renderer，或使用 pnpm add / yarn add / bun add。

### @flowfuse/flow-renderer 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/flowfuse\_\_flow-renderer 是否存在。

### @flowfuse/flow-renderer 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @flowfuse/flow-renderer 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=16\.x。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @flowfuse/flow-renderer 可以商用吗？

@flowfuse/flow-renderer 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @flowfuse/flow-renderer 的下载量有多少？

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

### @flowfuse/flow-renderer 还在维护吗？

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