写点什么

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

  • 2025-03-17
    北京
  • 本文字数:1489 字

    阅读完需:约 5 分钟

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

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


Github:  https://github.com/bytedance/flowgram.ai


官网:https://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


飞书多维表格工作流:https://www.feishu.cn/hc/zh-CN/articles/908751305974-%E4%BB%80%E4%B9%88%E6%98%AF%E5%A4%9A%E7%BB%B4%E8%A1%A8%E6%A0%BC%E5%B7%A5%E4%BD%9C%E6%B5%81


03 快速上手


通过 npx 快速创建官方最佳实践:


# 创建 Demonpx @flowgram.ai/create-app@latest
# 选择案例- fixed-layout # 固定布局最佳实践- free-layout # 自由布局最佳实践
复制代码


目前我们提供两种布局模式:


固定布局,节点/分支支持指定位置拖拽移动,并提供分支、循环等复合节点



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



04 了解更多


丰富的交互体验


我们提供一套交互的最佳实践,让操作流程更加丝滑


1.Motion 动画:让节点变化有个过渡过程


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


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


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


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


丰富的复合节点


1.Condition 条件判断,分固定布局模式和自由布局模式



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



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


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



具备 ReactFlow 大部分付费功能



强大的扩展性


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



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



@injectable()class MyLayer extends Layer {    /**     * 通过依赖注入监听自己想要的节点数据     */    @observeEntityDatas(FlowNodeEntity, FlowNodeTramsformData) transforms;    /*    * 渲染 Layer    */    render() {     return this.transforms.map(trans => <div>x: {trans.x} y: {trans.y}</div>)    }    /**     * 扩展画布生命周期     */    onReady() {}    onResize() {}    onFocus() {}    onBlur() {}    onZoom() {}    onScroll() {}    onViewportChange() {}    onReadonlyOrDisabledChange() {} }
复制代码


变量引擎能力:


  1. 作用域约束



  1. 变量树生成



  1. 类型自动联动推导




丰富的内置插件


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



05 D2 大会分享





相关链接


项目地址:



用户头像

还未添加个人签名 2022-11-18 加入

还未添加个人简介

评论

发布
暂无评论
FlowGram 简介:开源前端流程搭建引擎_低代码平台_字节跳动开源_InfoQ写作社区