Total.js Flow新手入门：手把手拖拽构建你的第一条可视化自动化流程

Total.js Flow新手入门：手把手拖拽构建你的第一条可视化自动化流程

【免费下载链接】flowVisual Programming Interface项目地址: https://gitcode.com/gh_mirrors/flow29/flow

Total.js Flow 是一款基于 Total.js 的可视化编程与自动化平台（Visual Programming Interface），让你通过拖拽组件、连线端口的方式，像拼积木一样搭建数据流、IoT 应用和自动化任务，完全无需手写大段代码。本文是一份面向新手的完整指南，带你从零安装到跑通第一条可视化流程。

一、为什么选择 Total.js Flow？

如果你写过自动化脚本，大概都经历过这样的烦恼：代码越堆越长、逻辑藏在函数里、新人接手一脸懵。而可视化流程（Visual Flow）的思路完全不同：

• 🧩拖拽即用：把"监听器""处理器""输出器"等组件拖到画布上，连线即逻辑
• 🔍实时可视：消息在组件间流动，控制台实时显示运行统计
• 📦组件生态：从官方 CDN 一键下载现成组件，也能实时创建自己的组件
• 🐳部署简单：Docker 一行命令即可运行

简单说：把"写代码"变成"画图"，适合新手快速理解数据流，也适合把复杂业务画给团队看。

二、快速安装：Total.js Flow 启动的 2 种方式

Total.js Flow 依赖Node.js 运行环境，默认运行在8000 端口。

方式 1：本地源码运行（推荐新手）

第一步，获取源码：

git clone https://gitcode.com/gh_mirrors/flow29/flow cd flow

第二步，安装依赖并启动：

npm install npm run start

或者直接用 Node 指定端口启动：

node index.js 8000

启动成功后，浏览器访问http://localhost:8000即可进入登录页。入口脚本 index.js 会加载 Total.js v5 框架并调用F.run(options)，应用名称与端口等配置都在 config 文件中维护。

方式 2：Docker 一键部署

如果你不想折腾 Node 环境，Docker 是最快的上手路径：

docker pull totalplatform/flow docker run -p 8000:8000 totalplatform/flow

镜像构建细节见 Dockerfile，本地编排可参考 docker-compose.yaml。

三、初识 FlowStream 可视化设计器

登录首页后，你可以看到自己的FlowStream（流程流）列表——每一条 FlowStream 就是一个独立的可视化应用。点击任意一条，右侧会弹出欢迎引导，官方把使用路径总结成了 3 步：

1. 🚩 欢迎使用 Total.js FlowStream，用设计器创建你的 Flow
2. 🔌 先安装一些 FlowStream 组件（或实时创建自己的）
3. 🌿 把组件拖放到画布上，并把它们彼此连线

设计器界面由三部分构成（源码位于 views/designer.html）：

顶部工具栏的APPLY按钮是关键——只有点击它，画布上的改动才会真正生效并应用到运行中的流程。

四、手把手教程：拖拽构建你的第一条自动化流程

第 1 步：新建一条 FlowStream

在首页点击"新建"，填写流程名称。系统会自动为流程初始化画布、变量表等结构（逻辑见 actions/streams.js 中的Streams|save）。

第 2 步：安装可视化组件

进入设计器后，打开"Download components（下载组件）"面板，在搜索框中输入关键词，即可从官方 CDN 找到并安装组件。每个组件都带有inputs（输入端口）和outputs（输出端口），例如：

• 触发类组件：定时触发、HTTP 触发
• 处理类组件：转换、分支、聚合
• 输出类组件：日志、存储、消息推送

💡 小技巧：每个组件都有Read me说明文档，看不懂点它！

第 3 步：拖拽组件并连线

1. 从左侧面板拖拽一个触发组件到画布
2. 再拖入处理组件、输出组件
3. 从组件右侧的Output 端口按住鼠标，拖到下一个组件的Input 端口上，连线即完成
4. 双击组件可打开设置面板，配置参数后点击 APPLY

组件间的数据以"消息（message）"形式流动，instance.message收到消息后通过$.send('output', data)转发给下游——这一套通信模型让流程的每一步都清晰可追踪。

第 4 步：点击 APPLY 并观察控制台

点击顶部APPLY按钮应用流程，打开Console（控制台）查看运行日志。底部状态栏会实时刷新：

• Messages：累计处理的消息数
• Per minute：每分钟消息数
• Errors：错误数（出现时组件边框会变红）
• Memory：流程占用的内存

看到数字滚动，说明你的第一条可视化自动化流程已经跑起来了！🎉

五、4 个让流程更好用的新手技巧

1. 📌 用 Variables 管理配置：工具栏的 Variables 按钮可以定义键值对变量，组件内通过{变量名}引用，改配置不用改流程
2. 🗂 用 Group 整理画布：把相关组件圈成组、设置背景色，复杂流程也能一目了然
3. 📤 导入导出 JSON：流程可以一键导出为 JSON 备份，也能导入到另一台机器（接口见 actions/streams.js 的Streams|export与Streams|import）
4. 🔌 扩展自定义组件：把带<script total>标签的 HTML 文件放入extensions/目录即可注册自定义扩展，参考 extensions.js 与示例 --extensions--/test.html；内置插件（如书签插件）位于 plugins/bookmarks/

六、项目文件导航：核心代码在哪里？

七、总结

Total.js Flow 让"可视化编程"变得触手可及：拖拽组件、连线端口、点击 APPLY，三步就能跑通一条自动化流程。无论你是想快速搭建 IoT 数据管道，还是希望用图形化方式梳理业务逻辑，它都能帮你少写代码、多看结果。

现在就去打开浏览器，拖出你的第一条流程吧！

【免费下载链接】flowVisual Programming Interface项目地址: https://gitcode.com/gh_mirrors/flow29/flow