FlowGram 简介:开源前端流程搭建引擎

FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快速创建固定布局或自由连线布局的流程,并提供一套交互的最佳实践, 很适合有明确输入和输出的可视化工作流。
Github: https://github.com/bytedance/flowgram.ai

01 背景
在 AI 如火如荼的当下,流程扮演串联不同 Agent 或大模型,通过可视化方式表达模型节点间的调用关系,即使没有编程经验也能直观理解调用逻辑,而 FlowGram 便是这类流程的搭建引擎,下边是两个案例:
扣子工作流:通过选择器节点判断用户输入的是图片、声音或文本,调用不同的模型节点总结分析再返回给用户。

ComfyUI:通过自由连接节点 + 图像实时预览,满足特定的图像生成需求。

02 业务应用
目前已服务字节 30 + 项目。
扣子工作流:https://www.coze.cn/open/docs/guides/workflow

飞书低代码平台工作流:https://ae.feishu.cn/hc/zh-CN/articles/120610822514


03 快速上手
通过 npx 快速创建官方最佳实践:
目前我们提供两种布局模式:
固定布局,节点/分支支持指定位置拖拽移动,并提供分支、循环等复合节点

自由布局,节点支持任意位置移动,通过自由连线连接节点

04 了解更多
丰富的交互体验
我们提供一套交互的最佳实践,让操作流程更加丝滑
1.Motion 动画:让节点变化有个过渡过程

2.模块化:分组及分支折叠

3.批量操作:框选拖拽、批量复制粘贴

4.布局切换:支持水平/垂直模式切换

5.辅助排版:参考线、吸附对齐、自动整理、缩略图

丰富的复合节点
1.Condition 条件判断,分固定布局模式和自由布局模式


2.Loop 循环,分固定布局模式和自由布局模式


3.Try/Catch 错误监控,固定布局模式,支持对一条分支的节点做监控

4,Slot 插槽,固定布局模式,支持将一类节点以插槽的形式挂载到目标节点上

具备 ReactFlow 大部分付费功能

强大的扩展性
底层提供画布引擎(通过分层扩展交互)、节点引擎 (节点的表单渲染、校验)、变量引擎(节点间变量的引用管理)、物料库 (扩展节点 及 UI 组件)来丰富业务扩展

通过将画布的交互分层 (Layer) 及 IOC (Inversion of Control) 依赖注入实现扩展:

变量引擎能力:
作用域约束

变量树生成

类型自动联动推导


丰富的内置插件
一方即三方,内部大量功能都以插件化形式开放

05 D2 大会分享
相关链接
项目地址:
评论