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 快速创建官方最佳实践：

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

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

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

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

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

底层提供画布引擎（通过分层扩展交互）、节点引擎 （节点的表单渲染、校验）、变量引擎（节点间变量的引用管理）、物料库 （扩展节点 及 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. 类型自动联动推导

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

• 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/

点击关注公众号，“技术干货” 及时达！