介绍

FlowGram 是一套基于节点编辑的流程搭建引擎,帮助开发者快速创建固定布局或自由连线布局模式的流程,并提供一套交互的最佳实践, 很适合有明确输入和输出的可视化工作流。

在 AI 如火如荼的当下,我们也会更专注于如何让流程赋能 AI,为此特意加上 AI 后缀。

FlowGram = Flow + Program,寓意流程如程序一样,拥有 Condition、Loop 甚至 TryCatch 节点。

官方 Demo

固定的排版,节点/分支支持指定位置拖拽移动,并提供分支、循环等复合节点

自由的排版,节点支持任意位置移动,通过自由连线连接节点

交互体验

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

Motion 过渡动画

Motion 动画在 Web 端应用可追溯到 Material Design,里边提到元素的变化如宽高或位置需要一个过渡过程,画布引擎会把线条和节点拆分单独绘制,使实现 Motion 过渡动画成本大大降低

触摸板手势缩放 + 空格自由拖动画布

手势指在 Mac 触摸板两指展开/合并可以实现画布放大/缩小,或者按住空格拖动画布,交互借鉴 Sketch、Figma

缩略图
撤销/重做
复制/粘贴(支持快捷键)
框选 + 拖拽
(固定)
水平/垂直布局切换
(固定)
分支折叠
(固定)
分组
(固定)

自动整理

(自由)

吸附对齐 + 参考线

(自由)

Coze Loop 子画布

(自由)

线上应用