扣子及AI 工作流搭建技术

1. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会 19T TEC 第十

2. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会扣子及 AI 工作流搭建技术刘文成 (六娃) 19T TEC 第十

3. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 19T TEC 第十九届 D 2终端技术大会第十 Contents 01 扣子及工作流应用场景 02 FlowGram 工作流搭建引擎 03 FlowGram 技术设计 3

4. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 19T TEC 第十九届 D 2终端技术大会第十 01 扣子及工作流应用场景 4

5. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会扣子 19T TEC 第十

6. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 19T TEC 第十九届 D 2终端技术大会第十工作流是什么？ 6

7. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会 AI 工作流（扣子） 19T TEC 第十

8. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会流程搭建（⻜书低代码平台） 19T TEC 第十

9. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会逻辑编写（虚幻引擎蓝图） 19T TEC 第十

10. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会图像处理（ComfyUI） 19T TEC 第十

11. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 19T TEC 第十九届 D 2终端技术大会第十输入和输出函数作用域变量条件、循环控制 } 程序

12. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 19T TEC 第十九届 D 2终端技术大会第十 02 FlowGram 工作流搭建引擎 12

13. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 19T TEC 第十九届 D 2终端技术大会第十工作流特色 FlowGram = Flow + Program https:// owgram.ai （2025.3.8 正式对外） https://github.com/bytedance/ owgram.ai

14. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会模式一：固定布局 19T TEC 第十 14

15. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会模式二：自由连线布局 19T TEC 第十 15

16. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 19T TEC 第十九届 D 2终端技术大会第十丰富的复合节点 16

17. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 19T TEC 第十九届 D 2终端技术大会 Condition / IF 条件判断第十 Loop 循环 17

18. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会 TryCatch 错误监控 19T TEC 第十 18

19. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会 19T TEC Slots LangChain 第十 19

20. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 19T TEC 第十九届 D 2终端技术大会第十交互设计 20

21. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会模块化 - 分支折叠、分组 19T TEC 第十 21

22. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会批量操作 - 框选拖拽、批量复制/粘贴 19T TEC 第十 22

23. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会辅助排版 - 自动整理、参考线、缩略图 19T TEC 第十 23

24. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 19T TEC 第十九届 D 2终端技术大会第十 Motion 过渡动画元素的变化需要一个过渡过程 24

25. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会 19T TEC 支持 ReactFlow 大部分付费功能第十 25

26. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会 19T TEC 内置丰富插件第十 26

27. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 19T TEC 第十九届 D 2终端技术大会第十小结 FlowGram 提供程序化工作流开箱即用解决方案： 1. 2. 3. 4. 基础功能完备度丰富的复合节点丰富的插件丝滑的交互体验 27

28. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 19T TEC 第十九届 D 2终端技术大会第十 03 FlowGram 技术设计 28

29. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会 19T TEC FlowGram 技术设计第十 - CanvasEngine：画布引擎负责绘制“点-线”构成的图, 保障大规模节点时的流畅性 - NodeEngine: 节点引擎提供渲染、校验、数据修改等表单能力 - VariableEngine: 变量引擎引入类 AST模型, 抽象各业务场景的变量 - Material: 物料库包含默认 ICON 等 UI, 业务接入后可覆盖扩展 29

30. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会画布引擎 19T TEC 第十

31. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会 ECS 设计 19T TEC 第十

32. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 19T TEC 第十九届 D 2终端技术大会第十交互分层的设计 32 将画布功能拆解成 Layer，每个 Layer 相互独立，各自监听数据

33. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会 19T TEC 扩展自己的 Layer 第十 33

34. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会 19T TEC IOC + 切面编程第十 34

35. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会 19T TEC 画布引擎的布局算法 - 缓存计算第十 35

36. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 19T TEC 第十九届 D 2终端技术大会第十画布引擎的布局算法 - 类 Monaco 的扁平化渲染 36

37. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 19T TEC 第十九届 D 2终端技术大会第十小结 FlowGram 架构设计： 1. 扩展性：通过 ECS 、IOC 和分层技术提升画布的扩展性 2. 易用性：集成表单和变量等工作流常用功能 3. 性能：通过缓存计算、扁平化结构、可视区域渲染提升性能 37

38. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 19T TEC 第十九届 D 2终端技术大会第十 https://github.com/bytedance/ owgram.ai

39. 19TH D2 TERMINAL TECHNOLOGY CONFERENCE 第十九届 D 2终端技术大会 THANK YOU 19T TEC 第十