FlowGram 是一款专为 AI 时代流程可视化打造的开源前端流程搭建引擎。借助节点编辑模式，开发者能够快速构建固定布局或自由连线布局的流程图，并内置一套成熟的交互最佳实践——尤其适合具有明确输入与输出的可视化工作流场景。本文将从三个维度展开深度解读：引擎背景与 AI 项目中的实际案例、业务应用场景与快速上手指南，以及交互体验和复合节点功能的详细剖析。

背景

AI 正在深刻改变各个行业。在这一趋势下，流程已成为串联不同 Agent 或大模型的核心纽带——通过可视化方式清晰呈现节点间的调用关系，即使零编程基础的用户也能轻松理解。FlowGram 正是为满足这一需求而诞生的搭建引擎。以下是两个典型应用案例：

• 扣子工作流：利用选择器节点判断用户输入为图片、声音还是文本，随后调用对应的模型节点进行总结分析，最后将结果返回给用户。
• ComfyUI：通过自由连接节点配合图像实时预览功能，灵活满足多种图像生成需求。

业务应用

目前，FlowGram 已在字节跳动内部支撑超过 30 个项目，广泛覆盖多种业务场景，从低代码平台到多维表格的工作流均有深度应用。

快速上手

通过 npx 命令即可快速创建官方最佳实践的 Demo 项目：

# 创建 Demo
npx @flowgram.ai/create-app@latest

# 选择案例
- fixed-layout # 固定布局最佳实践
- free-layout # 自由布局最佳实践

当前引擎提供两种布局模式：

• 固定布局：节点与分支支持在指定位置拖拽移动，并提供分支、循环等复合节点能力。
• 自由布局：节点可任意移动，通过自由连线灵活连接各节点。

了解更多

丰富的交互体验

引擎内置了一套经过打磨的交互最佳实践，让操作流程更加顺畅自然：

丰富的复合节点

具备 ReactFlow 大部分付费功能

强大的扩展性

底层提供画布引擎（通过分层扩展交互）、节点引擎（支持节点表单渲染与校验）、变量引擎（实现节点间变量引用管理）、物料库（扩展节点及 UI 组件），全面丰富业务扩展能力。

通过画布交互分层（Layer）及 IOC（Inversion of Control）依赖注入机制实现灵活扩展：

@injectable()
class MyLayer extends Layer {
  @observeEntityDatas(FlowNodeEntity, FlowNodeTramsformData) transforms;
  render() {
    return this.transforms.map(trans => 
x: {trans.x} y: {trans.y}
)
  }
  onReady() {}
  onResize() {}
  onFocus() {}
  onBlur() {}
  onZoom() {}
  onScroll() {}
  onViewportChange() {}
  onReadonlyOrDisabledChange() {}
}

变量引擎核心能力包括：

1. 作用域约束
2. 变量树生成
3. 类型自动联动推导

丰富的内置插件

一方即三方，内部大量功能均以插件化形式开放，便于开发者根据实际需求按需集成和自由扩展。