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 快速创建官方最佳实践：
- # 创建 Demo
- npx @flowgram.ai/create-app@latest
- # 选择案例
- - fixed-layout # 固定布局最佳实践
- - free-layout # 自由布局最佳实践
- 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() {}
- }
变量树天生
范例自动联动推导
丰富的内置插件一方即三方，内部大量功能都以插件化情势开放
05D2 大会分享
https://d2.alibabatech.com/D2
分享：扣子及AI工作流搭建技术：https://github.com/d2forum/19th/blob/main/%E5%B7%A5%E7%A8%8B%E7%A0%94%E5%8F%91/%E6%89%A3%E5%AD%90%E5%8F%8AAI%20%E5%B7%A5%E4%BD%9C%E6%B5%81%E6%90%AD%E5%BB%BA%E6%8A%80%E6%9C%AF-%E5%88%98%E6%96%87%E6%88%90.pdf
相干链接项目地址：
Github: https://github.com/bytedance/flowgram.ai
官网：https://flowgram.ai/
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
