FlowGram.AI：企业级 AI 工作流平台开发框架深度解析

概述

FlowGram.AI 是由字节跳动开源的一款专为构建 AI 工作流平台而设计的企业级开发框架。它通过提供可视化画布、动态表单引擎、变量作用域链和开箱即用的物料组件,帮助开发者更快速、更简单地构建功能完善、性能卓越的工作流平台。

项目背景

FlowGram 最初是为解决字节跳动内部多个大型 AI 工作流平台的构建需求而设计的。这些平台通常具有复杂的业务逻辑和流程,从零开始构建不仅耗时,而且开发和维护成本极高。

许多开发者最初尝试使用主流的可视化图形库来构建工作流平台,但这些通用库无法解决工作流场景的核心问题。开发者仍然需要自行处理一系列挑战,如节点数据管理、动态表单、数据验证和变量作用域链等。这导致开发效率低下,长期维护困难。

为了解决这些痛点,FlowGram 应运而生——一个专门为工作流场景设计的开发框架,旨在帮助开发者提高效率并缩短工作流平台的开发周期。

核心特性

FlowGram 提供以下核心功能模块:

工作流画布 (Workflow Canvas)
- 提供节点和连线的可视化编排
- 支持自由布局 (Free Layout) 和固定布局 (Fixed Layout) 两种模式
- 轻松构建复杂的流程图
表单引擎 (Form Engine)
- 管理节点数据的 CRUD 操作
- 提供渲染、验证、副作用、联动和错误捕获等能力
- 简化节点配置的开发
变量引擎 (Variable Engine)
- 支持作用域约束
- 变量结构检查和类型推断
- 轻松管理工作流内的数据流
物料系统 (Materials)
- 提供开箱即用的组件、副作用和验证器
- 开发者可快速复用和扩展
- 提升开发效率

通过组合这些功能,开发者可以专注于实现业务逻辑,从而快速构建全功能、高性能的 AI 工作流平台。

成功案例

FlowGram 已被字节跳动内部多个产品成功应用:

Coze (扣子) - AI Bot 开发平台
飞书低代码平台工作流 - 企业级自动化流程
飞书多维表格 - 数据协作工具
nndeploy - 模型部署平台
Certimate - 证书管理系统

快速开始

方式一:使用官方脚手架(推荐)

使用 FlowGram CLI 快速创建项目:

bash

npx @flowgram.ai/create-app@latest

选择模板时,推荐选择 Free Layout Demo 快速上手:

Free Layout Demo - 自由布局最佳实践(⭐️ 推荐)
Free Layout Demo Simple - 自由布局基础用法
Fixed Layout Demo - 固定布局最佳实践
Fixed Layout Demo Simple - 固定布局基础用法

安装依赖并启动:

bash

cd [project-name]
npm install
npm run dev

方式二:直接安装包

适合有一定 FlowGram 使用经验的开发者:

bash

npm install @flowgram.ai/free-layout-editor
# 或
npm install @flowgram.ai/fixed-layout-editor

在线体验

核心功能详解

1. 画布引擎 (Canvas Engine)

FlowGram 提供两种布局模式,满足不同的业务场景需求:

自由布局 (Free Layout)

节点可以在画布上自由拖拽,通过连线建立节点之间的逻辑关系。

主要特性:

自由拖拽节点位置
可视化连线编辑
支持端口 (Ports) 连接
子画布嵌套(如循环节点)
自动布局插件
对齐线和吸附功能

适用场景:

复杂的分支逻辑
需要灵活调整节点位置
类似 Coze、Figma 的自由编辑体验

固定布局 (Fixed Layout)

节点在图中的位置代表它们之间的逻辑关系,类似传统的流程图。

主要特性:

自动计算节点位置
水平/垂直布局切换
分支折叠
节点分组
复合节点 (Composite Nodes)

适用场景:

线性流程
标准化的工作流模板
需要清晰展示执行顺序

2. 节点引擎 (Node Engine)

节点引擎是 FlowGram 的核心组件之一,负责管理节点的数据逻辑和渲染。

核心概念

FlowNodeEntity: 流程节点模型
FlowNodeRegistry: 流程节点的静态配置
FormMeta: 节点引擎的静态配置
Form: 节点表单,维护节点数据并提供验证、副作用等能力
Field: 表单中的渲染字段
validate: 表单验证
effect: 表单数据的副作用
FormPlugin: 表单插件

数据与渲染分离

节点引擎的一个关键设计理念是"数据与渲染分离"。即使节点未渲染,其数据逻辑(如验证、副作用)仍然有效。这确保了工作流的稳定性和可靠性。

3. 表单系统 (Form System)

FlowGram 内置了强大的表单引擎,用于管理节点的配置数据。

配置示例

tsx

import { FlowNodeRegistry, ValidateTrigger } from '@flowgram.ai/fixed-layout-editor';

export const nodeRegistries: FlowNodeRegistry[] = [
  {
    type: 'start',
    formMeta: {
      // 配置验证触发时机
      validateTrigger: ValidateTrigger.onChange,
      
      // 配置验证规则
      validate: {
        content: ({ value }) => (value ? undefined : 'Content is required'),
      },
      
      // 配置表单渲染
      render: () => (
        <>
          <Field<string> name="title">
            {({ field }) => <div>{field.value}</div>}
          </Field>
          <Field<string> name="content">
            {({ field, fieldState }) => (
              <>
                <input onChange={field.onChange} value={field.value}/>
                {fieldState?.invalid && <Feedback errors={fieldState?.errors}/>}
              </>
            )}
          </Field>
        </>
      )
    },
  }
]

核心组件

Field 组件：

用于渲染单个表单字段,支持三种写法:

tsx

// 1. 通过 children
<Field name="c">
  <Input />
</Field>

// 2. 通过 Render Props
<Field name="a">
  {({ field, fieldState }) => (
    <div>
      <Input {...field} />
      <Feedbacks errors={fieldState.errors}/>
    </div>
  )}
</Field>

// 3. 通过 render 函数
<Field 
  name="b" 
  render={({ field }) => <Input {...field} />} 
/>

FieldArray 组件：

用于处理数组类型的字段:

tsx

<FieldArray name="items">
  {({ fieldArray }) => (
    <>
      {fieldArray.map((item, index) => (
        <Field key={index} name={`items.${index}`}>
          <Input />
        </Field>
      ))}
      <button onClick={() => fieldArray.append({})}>添加</button>
    </>
  )}
</FieldArray>

验证机制

FlowGram 支持灵活的验证配置:

tsx

export const VALIDATE_EXAMPLE: FormMeta = {
  validateTrigger: ValidateTrigger.onChange,
  validate: {
    // 简单验证
    a: ({ value }) => (value.length > 5 ? 'Max length is 5' : undefined),
    
    // 依赖其他字段的验证
    b: ({ value, formValues }) => {
      if (formValues.a) {
        return undefined;
      } else {
        return value ? undefined : 'b is required when a exists';
      }
    },
    
    // 依赖节点或画布信息的验证
    c: ({ value, context }) => {
      const { node, playgroundContext } = context;
      // 自定义逻辑
    },
  },
};

验证时机:

ValidateTrigger.onChange: 数据变化时验证
ValidateTrigger.onBlur: 输入框失焦时验证

副作用 (Effects)

副作用用于在数据变化时执行特定逻辑:

tsx

export const EFFECT_EXAMPLE: FormMeta = {
  effect: {
    ['a.b']: [
      {
        event: DataEvent.onValueChange,
        effect: ({ value }) => {
          console.log('a.b value changed:', value);
        },
      },
    ],
    // 支持模糊匹配
    ['arr.*']: [
      {
        event: DataEvent.onValueInit,
        effect: ({ value, name }) => {
          console.log(name + ' value init:', value);
        },
      },
    ]
  }
};

副作用时机:

DataEvent.onValueChange: 数据变化时触发
DataEvent.onValueInit: 数据初始化时触发
DataEvent.onValueInitOrChange: 初始化和变化时都触发

路径系统 (Paths)

FlowGram 使用点号分隔的路径系统:

a.b.c - 指向 {a:{b:{c:1}}} 中的 1
arr.* - arr 字段的所有一级子项
arr.x.* - arr.x 的所有一级子项
arr.*.x - arr 所有一级子项下的 x

注意:* 只代表向下钻取一层。

Hooks API

表单内部 Hooks:

tsx

// 获取当前 Field 实例
const field = useCurrentField();

// 获取当前 Field 状态
const fieldState = useCurrentFieldState();

// 获取验证函数
const validate = useFieldValidate();

// 获取 Form 实例
const form = useForm();

// 监听字段值变化
const value = useWatch('fieldName');

表单外部 Hooks:

tsx

// 监听整个表单的值
const values = useWatchFormValues(node);

// 监听特定字段的值
const value = useWatchFormValueIn(node, 'fieldName');

// 监听表单状态
const formState = useWatchFormState(node);

// 监听表单错误
const errors = useWatchFormErrors(node);

// 监听表单警告
const warnings = useWatchFormWarnings(node);

4. 变量引擎 (Variable Engine)

变量引擎是 FlowGram 的核心特性之一,用于管理工作流中节点间的数据传递。

什么是变量?

变量是工作流中节点间传递信息的"信使"。每个变量由三部分组成:

名称: 唯一标识符,如 userName、orderId
值: 变量存储的内容,可以是数字、文本、布尔值等
类型: 指定变量可以存储的数据类型

设计时定义 vs 运行时求值

在设计时(绘制流程时),只需确定变量的定义:名称、类型和可选的元数据。变量引擎将这些定义作为结构化数据管理。

进入运行时时,FlowGram 根据这些定义为每次执行分配值。设计时专注于结构和约束;运行时每个节点都可以可靠地读写数据。

为什么需要变量引擎?

1. 作用域约束:精确的数据访问控制

变量引擎精确控制每个变量的有效范围(作用域)。就像给每个房间配备专属钥匙,确保变量只能被预期的节点访问,防止数据污染和意外的逻辑错误。

text

示例:
- Start 节点定义的 query 变量可以被后续的 LLM 和 End 节点访问
- 但 Condition 分支内的 LLM 节点生成的 result 变量,无法被分支外的 End 节点访问

2. 变量结构洞察:轻松理解复杂数据

当变量具有复杂结构(例如深度嵌套的对象)时,变量引擎让您可以逐层展开,使每个数据片段都易于定位。

3. 自动类型推断:灵感的火花

无需手动声明每个变量类型。变量引擎自动从上下文推断类型。

text

示例:
如果 Start 节点的 arr 变量改变类型,
Batch 节点的 item 输出会自动更新以保持一致。

启用变量引擎

tsx

// 在 EditorProps 中启用变量引擎
{
  variableEngine: {
    enable: true
  }
}

输出变量

节点可以通过以下方式输出变量:

在 FormMeta 中配置
通过 FormPlugin
全局变量

消费变量

节点可以通过以下方式读取变量:

使用物料组件(如 VariableSelector)
通过 API 访问

核心概念：

作用域链 (Scope Chain): 决定变量的可见范围
AST (抽象语法树): 变量系统的内部表示
声明 (Declaration): 变量的定义
表达式 (Expression): 变量的引用

5. 物料系统 (Materials)

FlowGram 提供丰富的官方物料,可通过两种方式使用:

方式一:包导入(推荐)

bash

npm install @flowgram.ai/form-materials

tsx

import { JsonSchemaEditor } from '@flowgram.ai/form-materials'

方式二:CLI 添加源码

如果需要自定义组件,可以通过 CLI 添加物料源码到项目:

bash

npx @flowgram.ai/cli@latest materials

CLI 会提示选择要添加的物料:

console

? Select one material to add: (Use arrow keys)
❯ components/json-schema-editor
  components/type-selector
  components/variable-selector

也可以直接指定物料:

bash

npx @flowgram.ai/cli@latest materials components/json-schema-editor

常用物料组件

表单组件:

TypeSelector - 类型选择器
JsonSchemaEditor - JSON Schema 编辑器
VariableSelector - 变量选择器
DynamicValueInput - 动态值输入
ConditionRow - 条件行配置
CodeEditor - 代码编辑器
PromptEditor - 提示词编辑器
PromptEditorWithVariables - 带变量的提示词编辑器

表单副作用:

autoRenameRef - 自动重命名引用
listenRefSchemaChange - 监听引用 Schema 变化
listenRefValueChange - 监听引用值变化
provideJsonSchemaOutputs - 提供 JSON Schema 输出
syncVariableTitle - 同步变量标题

表单插件:

inferAssignPlugin - 推断赋值插件
inferInputsPlugin - 推断输入插件
batchOutputsPlugin - 批量输出插件

验证器:

validateFlowValue - 验证流程值

按节点类型查找物料

实现节点输入输出:

输入: InputsValues, InputsValuesTree
输出: JsonSchemaEditor
输入验证: validateFlowValue
输出变量生成: provideJsonSchemaOutputs

实现代码节点:

代码编辑器: CodeEditor

实现 LLM 节点:

提示词编辑器: PromptEditor
带变量的提示词编辑器: PromptEditorWithVariables

实现条件分支节点:

单行条件配置: ConditionRow
变量监听: listenRefSchemaChange, listenRefValueChange

实现数据库节点:

数据库条件配置: DBConditionRow
SQL 编辑器: SQLEditorWithVariables

实现循环节点:

循环输入: BatchVariableSelector
Item/Index 派生: provideBatchInput
循环输出: BatchOutputs
输出类型推导: batchOutputsPlugin

实现 HTTP 节点:

JSON 编辑器: JsonEditorWithVariables

实现变量赋值/声明节点:

单行赋值: AssignRow
赋值列表: AssignRows
类型自动推导: inferAssignPlugin

6. 插件系统 (Plugin System)

FlowGram 提供多个官方插件,增强画布功能:

@flowgram.ai/background-plugin

画布背景插件,提供网格背景。

@flowgram.ai/minimap-plugin

小地图插件,提供画布全局视图。

@flowgram.ai/panel-manager-plugin

面板管理器插件,管理侧边栏面板。

@flowgram.ai/free-auto-layout-plugin

自动布局插件(仅自由布局),自动排列节点。

@flowgram.ai/free-stack-plugin

堆叠插件(仅自由布局),支持节点层叠。

7. 交互体验特性

FlowGram 提供丰富的交互功能,提升用户体验:

流畅的运动过渡

所有画布元素都具有平滑的运动过渡效果。当节点调整大小或移动时,动画过渡创造更自然直观的用户体验。

直观的画布导航

触控板双指缩放
按住空格键拖拽画面

小地图

提供画布全局视图,快速定位。

撤销/重做

支持操作历史记录,可撤销和重做操作。

复制/粘贴

支持快捷键复制粘贴节点。

框选和拖放

支持框选多个节点并批量操作。

水平/垂直布局切换(固定布局)

一键切换流程图的布局方向。

分支折叠(固定布局)

可折叠复杂分支,简化视图。

分组(固定布局)

将相关节点分组管理。

自动布局(自由布局)

自动排列节点,优化布局。

对齐线和吸附(自由布局)

拖动节点时显示对齐线并自动吸附。

子画布(自由布局)

支持嵌套子画布,如循环节点。

核心设计思想

1. 数据与渲染分离

FlowGram 的一个核心设计理念是"数据与渲染分离"。节点的数据逻辑(如验证、副作用)与渲染逻辑解耦,即使节点未渲染,数据逻辑仍然有效。

优势:

提高性能:不渲染的节点也能执行数据逻辑
增强可靠性:确保工作流数据的一致性
便于测试:数据逻辑可以独立测试

2. 声明式配置

FlowGram 采用声明式配置方式,开发者通过配置对象描述节点的行为,而不是编写命令式代码。

优势:

降低学习曲线
提高代码可读性
便于维护和扩展

3. 依赖注入 (IOC)

FlowGram 使用依赖注入(Inversion of Control)模式,通过容器管理依赖关系。

优势:

松耦合:组件间依赖关系由容器管理
可测试性:方便进行单元测试
可扩展性:易于替换和扩展组件

4. 实体组件系统 (ECS)

FlowGram 的画布引擎采用 ECS(Entity-Component-System)架构。

核心概念:

Entity(实体): 画布上的对象,如节点、连线
Component(组件): 实体的属性,如位置、大小
System(系统): 处理逻辑,如渲染、碰撞检测

优势:

高性能:系统可以批量处理实体
灵活性:通过组合组件定义实体行为
可扩展性:易于添加新的组件和系统

5. 插件化架构

FlowGram 采用插件化架构,核心功能通过插件扩展。

优势:

模块化:功能独立,易于管理
可定制:开发者可以选择需要的插件
可扩展:易于添加新功能

6. 响应式状态管理

FlowGram 使用响应式状态管理,自动追踪数据变化并更新视图。

优势:

简化开发:无需手动管理视图更新
提高性能:只更新变化的部分
增强可维护性:数据流清晰可追踪

与 ReactFlow 的对比

特性	FlowGram	ReactFlow
定位	工作流平台开发框架	通用流程图库
节点数据管理	内置表单引擎	需自行实现
变量系统	内置变量引擎	需自行实现
验证机制	内置验证系统	需自行实现
物料系统	提供丰富物料	需自行开发
学习曲线	较高(功能完善)	较低(简单易用)
适用场景	AI 工作流平台	通用流程图应用

FlowGram 专注于工作流场景,提供完整的解决方案;ReactFlow 是通用的流程图库,更灵活但需要更多自定义开发。

运行时 (Runtime)

除了设计时(Design-Time)的画布编辑器,FlowGram 还提供运行时(Runtime)引擎,用于执行工作流。

核心功能

Schema 解析: 将设计时的流程图转换为可执行的 Schema
节点执行: 按照流程图的逻辑执行节点
数据流管理: 管理节点间的数据传递
错误处理: 捕获和处理执行错误
状态管理: 跟踪工作流的执行状态

使用示例

typescript

import { WorkflowRuntime } from '@flowgram.ai/runtime';

const runtime = new WorkflowRuntime({
  schema: workflowSchema,
  nodes: customNodes,
});

const result = await runtime.execute({
  input: { query: 'Hello' }
});

console.log(result);

高级功能

1. 滚动和缩放

FlowGram 提供灵活的画布滚动和缩放功能:

鼠标滚轮缩放
触控板双指缩放
编程式控制缩放级别

2. 历史记录

内置撤销/重做功能:

自动记录操作历史
支持快捷键(Ctrl+Z/Ctrl+Y)
可配置历史记录上限

3. 快捷键

支持自定义快捷键:

复制/粘贴(Ctrl+C/Ctrl+V)
撤销/重做(Ctrl+Z/Ctrl+Y)
删除(Delete/Backspace)
全选(Ctrl+A)

4. 自定义服务

通过依赖注入添加自定义服务:

typescript

import { InjectionToken } from '@flowgram.ai/core';

const MY_SERVICE = new InjectionToken('MyService');

class MyService {
  doSomething() {
    // 自定义逻辑
  }
}

// 注册服务
container.register(MY_SERVICE, MyService);

// 使用服务
const myService = useService(MY_SERVICE);

5. 自定义图层

添加自定义渲染图层:

tsx

import { Layer } from '@flowgram.ai/core';

class MyLayer extends Layer {
  render() {
    // 自定义渲染逻辑
  }
}

6. 自定义插件

开发自定义插件扩展功能:

typescript

import { Plugin } from '@flowgram.ai/core';

class MyPlugin extends Plugin {
  onInit() {
    // 插件初始化逻辑
  }
  
  onDispose() {
    // 插件清理逻辑
  }
}

最佳实践

1. 合理使用布局模式

自由布局: 适合复杂的分支逻辑、需要灵活调整节点位置的场景
固定布局: 适合线性流程、标准化的工作流模板

2. 充分利用物料系统

优先使用官方物料,减少重复开发
如需自定义,通过 CLI 添加源码后修改
编写通用组件时考虑提交到官方物料库

3. 数据验证策略

使用 ValidateTrigger.onChange 实时验证,提供即时反馈
复杂验证可以在提交时统一触发
利用路径模糊匹配简化数组项验证

4. 变量管理

合理设计变量作用域,避免全局变量污染
利用类型推断减少手动类型声明
使用有意义的变量名,提高可读性

5. 性能优化

避免在 render 函数中执行耗时操作
使用 React.memo 优化组件渲染
合理使用 useWatch 避免不必要的重渲染
大型工作流考虑使用虚拟滚动

6. 错误处理

配置 nodeErrorRender 展示节点错误
使用 useWatchFormErrors 监控表单错误
提供清晰的错误提示信息

开发资源

官方文档

社区

贡献指南

FlowGram 欢迎社区贡献:

Fork 项目仓库
创建功能分支
提交代码并编写测试
提交 Pull Request

总结

FlowGram.AI 是一款功能强大、设计精良的企业级工作流平台开发框架。它通过提供完整的画布引擎、表单引擎、变量引擎和丰富的物料系统,帮助开发者快速构建高质量的 AI 工作流平台。

核心优势

开箱即用: 提供完整的解决方案,减少重复开发
灵活可扩展: 插件化架构,易于自定义和扩展
企业级能力: 经过字节跳动多个产品验证,稳定可靠
优秀体验: 丰富的交互功能,流畅的动画效果
完善的生态: 官方物料、文档、示例一应俱全

适用场景

AI Agent 平台
低代码/无代码平台
业务流程自动化
数据处理管道
规则引擎
工作流编排

无论您是从零开始构建工作流平台,还是需要升级现有系统,FlowGram.AI 都是值得考虑的优秀选择。

最后更新: 2025年12月2日FlowGram.AI 版本: LatestLicense: MIT

代码编辑器

Python 工程化指南

《Python 实现 AsyncIO HTTP 服务器》章节大纲

数学引擎

NCNN 教程

IM 系统设计指南

FlowGram.AI：企业级 AI 工作流平台开发框架深度解析 ​

概述 ​

项目背景 ​

核心特性 ​

成功案例 ​

快速开始 ​

方式一:使用官方脚手架(推荐) ​

方式二:直接安装包 ​

在线体验 ​

核心功能详解 ​

1. 画布引擎 (Canvas Engine) ​

自由布局 (Free Layout) ​

固定布局 (Fixed Layout) ​

2. 节点引擎 (Node Engine) ​

核心概念 ​

数据与渲染分离 ​

3. 表单系统 (Form System) ​

配置示例 ​

核心组件 ​

验证机制 ​

副作用 (Effects) ​

路径系统 (Paths) ​

Hooks API ​

4. 变量引擎 (Variable Engine) ​

什么是变量? ​

设计时定义 vs 运行时求值 ​

为什么需要变量引擎? ​

启用变量引擎 ​

输出变量 ​

消费变量 ​

5. 物料系统 (Materials) ​

方式一:包导入(推荐) ​

方式二:CLI 添加源码 ​

常用物料组件 ​

按节点类型查找物料 ​

6. 插件系统 (Plugin System) ​

@flowgram.ai/background-plugin ​

@flowgram.ai/minimap-plugin ​

@flowgram.ai/panel-manager-plugin ​

@flowgram.ai/free-auto-layout-plugin ​

@flowgram.ai/free-stack-plugin ​

7. 交互体验特性 ​

流畅的运动过渡 ​

直观的画布导航 ​

小地图 ​

撤销/重做 ​

复制/粘贴 ​

框选和拖放 ​

水平/垂直布局切换(固定布局) ​

分支折叠(固定布局) ​

分组(固定布局) ​

自动布局(自由布局) ​

对齐线和吸附(自由布局) ​

子画布(自由布局) ​

核心设计思想 ​

1. 数据与渲染分离 ​

2. 声明式配置 ​

3. 依赖注入 (IOC) ​

4. 实体组件系统 (ECS) ​

5. 插件化架构 ​

6. 响应式状态管理 ​

与 ReactFlow 的对比 ​

运行时 (Runtime) ​

核心功能 ​

使用示例 ​

高级功能 ​

1. 滚动和缩放 ​

2. 历史记录 ​

3. 快捷键 ​

4. 自定义服务 ​

5. 自定义图层 ​

6. 自定义插件 ​

最佳实践 ​

1. 合理使用布局模式 ​

FlowGram.AI：企业级 AI 工作流平台开发框架深度解析

概述

项目背景

核心特性

成功案例

快速开始

方式一:使用官方脚手架(推荐)

方式二:直接安装包

在线体验

核心功能详解

1. 画布引擎 (Canvas Engine)

自由布局 (Free Layout)

固定布局 (Fixed Layout)

2. 节点引擎 (Node Engine)

核心概念

数据与渲染分离

3. 表单系统 (Form System)

配置示例

核心组件

验证机制

副作用 (Effects)

路径系统 (Paths)

Hooks API

4. 变量引擎 (Variable Engine)

什么是变量?

设计时定义 vs 运行时求值

为什么需要变量引擎?

启用变量引擎

输出变量

消费变量

5. 物料系统 (Materials)

方式一:包导入(推荐)

方式二:CLI 添加源码

常用物料组件

按节点类型查找物料

6. 插件系统 (Plugin System)

@flowgram.ai/background-plugin

@flowgram.ai/minimap-plugin

@flowgram.ai/panel-manager-plugin

@flowgram.ai/free-auto-layout-plugin

@flowgram.ai/free-stack-plugin

7. 交互体验特性

流畅的运动过渡

直观的画布导航

小地图

撤销/重做

复制/粘贴

框选和拖放

水平/垂直布局切换(固定布局)

分支折叠(固定布局)

分组(固定布局)

自动布局(自由布局)

对齐线和吸附(自由布局)

子画布(自由布局)

核心设计思想

1. 数据与渲染分离

2. 声明式配置

3. 依赖注入 (IOC)

4. 实体组件系统 (ECS)

5. 插件化架构

6. 响应式状态管理

与 ReactFlow 的对比

运行时 (Runtime)

核心功能

使用示例

高级功能

1. 滚动和缩放

2. 历史记录

3. 快捷键

4. 自定义服务

5. 自定义图层

6. 自定义插件

最佳实践

1. 合理使用布局模式

2. 充分利用物料系统

3. 数据验证策略

4. 变量管理

5. 性能优化

6. 错误处理

开发资源