微信扫码
添加专属顾问
我要投稿
探索开源前端流程搭建引擎FlowGram,为AI时代下的流程可视化提供强大支持。 核心内容: 1. FlowGram引擎背景及其在AI项目中的应用案例 2. 业务应用实例和快速上手指南 3. 交互体验和复合节点功能详解
FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快速创建固定布局或自由连线布局的流程,并提供一套交互的最佳实践, 很适合有明确输入和输出的可视化工作流。
在 AI 如火如荼的当下,流程扮演串联不同 Agent 或大模型,通过可视化方式表达模型节点间的调用关系,即使没有编程经验也能直观理解调用逻辑,而 FlowGram 便是这类流程的搭建引擎,下边是两个案例:
扣子工作流:通过选择器节点判断用户输入的是图片、声音或文本,调用不同的模型节点总结分析再返回给用户。
ComfyUI:通过自由连接节点 + 图像实时预览,满足特定的图像生成需求。
目前已服务字节 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
通过 npx 快速创建官方最佳实践:
# 创建 Demo
npx @flowgram.ai/create-app@latest
# 选择案例
- fixed-layout # 固定布局最佳实践
- free-layout # 自由布局最佳实践
目前我们提供两种布局模式:
固定布局,节点/分支支持指定位置拖拽移动,并提供分支、循环等复合节点
自由布局,节点支持任意位置移动,通过自由连线连接节点
丰富的交互体验
我们提供一套交互的最佳实践,让操作流程更加丝滑
Motion 动画:让节点变化有个过渡过程 | |
模块化:分组及分支折叠 | |
批量操作:框选拖拽、批量复制粘贴 | |
布局切换:支持水平/垂直模式切换 | |
辅助排版:参考线、吸附对齐、自动整理、缩略图 |
丰富的复合节点
Condition 条件判断,分固定布局模式和自由布局模式 | |
Loop 循环,分固定布局模式和自由布局模式 | |
Try/Catch 错误监控,固定布局模式,支持对一条分支的节点做监控 | |
Slot 插槽,固定布局模式,支持将一类节点以插槽的形式挂载到目标节点上 |
具备 ReactFlow 大部分付费功能
功能 | ReactFlow Pro 付费功能 | FlowGram 是否支持 |
分组 | ✅ | ✅ |
redo/undo | ✅ | ✅ |
copy/paste | ✅ | ✅ |
HelpLines 辅助线 | ✅ | ✅ |
自定义节点及形状 | ✅ | ✅ |
自定义线条 | ✅ | ✅ |
AutoLayout,自动布局整理 | ✅ | ✅ |
ForceLayout,节点排斥效果 | ✅ | ❌ 如有诉求可跟进 |
Expand/Collapse | ✅ | ✅ |
Collaborative多人协同 | ✅ | ❌ 计划中 |
WorkflowBuilder 相当于固定布局完整案例 | ✅ | ✅ |
强大的扩展性
底层提供画布引擎(通过分层扩展交互)、节点引擎 (节点的表单渲染、校验)、变量引擎(节点间变量的引用管理)、物料库 (扩展节点 及 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() {} }
变量引擎能力:
作用域约束
变量树生成
类型自动联动推导
丰富的内置插件
一方即三方,内部大量功能都以插件化形式开放
53AI,企业落地大模型首选服务商
产品:场景落地咨询+大模型应用平台+行业解决方案
承诺:免费场景POC验证,效果验证后签署服务协议。零风险落地应用大模型,已交付160+中大型企业
2025-04-01
阿里巴巴开源:AI框架,快速落地大模型应用
2025-04-01
开源Manus替代:智谱AutoGLM沉思来了
2025-04-01
Heygem - Heygen的开源平替产品
2025-04-01
挖到一个Deep Research和Manus的替代品,是新发布的开源项目,香
2025-04-01
字节跳动MegaTTS 3!0.45B超轻量语音克隆模型,中英文混合输出+口音控制黑科技
2025-04-01
开源 Remote MCP Server 一站式托管来啦!
2025-04-01
MCP的配置文件解析。不过讲真,配置文件仍然是MCP最失败的设计之一!
2025-04-01
47.3K star!这款开源RAG引擎真香!文档理解+精准检索+可视化干预,一站式搞定!
2025-01-01
2024-07-25
2025-01-21
2024-05-06
2024-09-20
2024-07-20
2024-06-12
2024-07-11
2024-08-13
2024-12-26
2025-04-01
2025-03-31
2025-03-25
2025-03-25
2025-03-24
2025-03-22
2025-03-19
2025-03-17