ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;background-color: rgb(255, 255, 255);text-align: center;visibility: visible;">
FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快速创建固定布局或自由连线布局的流程，并提供一套交互的最佳实践, 很适合有明确输入和输出的可视化工作流。
ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;background-color: rgb(255, 255, 255);text-align: center;visibility: visible;"> ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;color: rgb(62, 62, 62);font-size: 16px;text-align: left;background-color: rgb(255, 255, 255);visibility: visible;">在 AI 如火如荼的当下，流程扮演串联不同 Agent 或大模型，通过可视化方式表达模型节点间的调用关系，即使没有编程经验也能直观理解调用逻辑，而 FlowGram 便是这类流程的搭建引擎，下边是两个案例：ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;color: rgb(62, 62, 62);font-size: 16px;text-align: left;background-color: rgb(255, 255, 255);visibility: visible;">扣子工作流：通过选择器节点判断用户输入的是图片、声音或文本，调用不同的模型节点总结分析再返回给用户。 ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;background-color: rgb(255, 255, 255);"> ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;color: rgb(62, 62, 62);font-size: 16px;text-align: left;background-color: rgb(255, 255, 255);visibility: visible;">ComfyUI：通过自由连接节点 + 图像实时预览，满足特定的图像生成需求。 ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;background-color: rgb(255, 255, 255);text-align: center;"> ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;color: rgb(62, 62, 62);text-align: left;background-color: rgb(255, 255, 255);visibility: visible;">
ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;background-color: rgb(255, 255, 255);">
ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;color: rgb(62, 62, 62);font-size: 16px;text-align: left;background-color: rgb(255, 255, 255);visibility: visible;">目前已服务字节 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 # 自由布局最佳实践
目前我们提供两种布局模式： 固定布局，节点/分支支持指定位置拖拽移动，并提供分支、循环等复合节点 
自由布局，节点支持任意位置移动，通过自由连线连接节点 
我们提供一套交互的最佳实践，让操作流程更加丝滑 Motion 动画：让节点变化有个过渡过程 | 
| 模块化：分组及分支折叠 | 
| 批量操作：框选拖拽、批量复制粘贴 | 
| 布局切换：支持水平/垂直模式切换 | 
| 辅助排版：参考线、吸附对齐、自动整理、缩略图 | 
|
Condition 条件判断，分固定布局模式和自由布局模式 | 
| Loop 循环，分固定布局模式和自由布局模式 | 
| Try/Catch 错误监控，固定布局模式，支持对一条分支的节点做监控 | 
| Slot 插槽，固定布局模式，支持将一类节点以插槽的形式挂载到目标节点上 | 
|
功能 | ReactFlow Pro 付费功能 | FlowGram 是否支持 | 分组 | ✅ | ✅ | redo/undo | ✅ | ✅ | copy/paste | ✅ | ✅ | HelpLines 辅助线 | ✅ | ✅ | 自定义节点及形状 | ✅ | ✅ | 自定义线条 | ✅ | ✅ | AutoLayout，自动布局整理 | ✅ | ✅ | ForceLayout，节点排斥效果 | ✅ | ❌ 如有诉求可跟进 | Expand/Collapse | ✅ | ✅ | Collaborative多人协同 | ✅ | ❌ 计划中 | WorkflowBuilder 相当于固定布局完整案例 | ✅ | ✅ |
底层提供画布引擎（通过分层扩展交互）、节点引擎 （节点的表单渲染、校验）、变量引擎（节点间变量的引用管理）、物料库 （扩展节点 及 UI 组件）来丰富业务扩展 
通过将画布的交互分层 (Layer) 及 IOC (Inversion of Control) 依赖注入实现扩展： 
@injectable()classMyLayerextendsLayer{/***通过依赖注入监听自己想要的节点数据*/@observeEntityDatas(FlowNodeEntity,FlowNodeTramsformData)transforms;/**渲染Layer*/render(){returnthis.transforms.map(trans=><div>x:{trans.x}y:{trans.y}</div>)}/***扩展画布生命周期*/onReady(){}onResize(){}onFocus(){}onBlur(){}onZoom(){}onScroll(){}onViewportChange(){}onReadonlyOrDisabledChange(){}}
变量引擎能力： 作用域约束
变量树生成
类型自动联动推导
一方即三方，内部大量功能都以插件化形式开放 
|
