Dify 工作流组件详细实现文档

1. 工作流架构概述

Dify 的工作流组件是基于 ReactFlow 实现的可视化流程编辑器，用于创建和编辑 AI 工作流，支持用户以可视化方式构建复杂的 AI 应用流程。工作流组件位于 app/components/workflow 目录，是一个完整的流程编排解决方案。

1.1 核心技术栈

ReactFlow - 提供流程图的基础能力
Zustand - 用于状态管理
SWR - 用于数据获取和缓存
TypeScript - 提供类型安全
TailwindCSS - 样式处理

1.2 设计思路

工作流组件采用了模块化设计，将不同的功能分解为独立的组件和钩子，主要包括：

流程图编辑器 - 负责节点和边的可视化展示及交互
节点面板 - 提供节点配置界面
工具栏 - 提供快捷操作
状态管理 - 集中管理工作流状态
流程验证 - 确保工作流的正确性
历史记录 - 支持撤销和重做操作
导入导出 - 支持 DSL (领域特定语言) 的导入导出

2. 数据结构

2.1 核心类型定义

工作流的核心数据结构定义在 app/components/workflow/types.ts 文件中，主要包括：

2.1.1 节点类型

// 节点枚举类型，定义了所有支持的节点类型
export enum BlockEnum {
   
    
    
  Start = 'start',
  End = 'end',
  Answer = 'answer',
  LLM = 'llm',
  KnowledgeRetrieval = 'knowledge-retrieval',
  QuestionClassifier = 'question-classifier',
  IfElse = 'if-else',
  Code = 'code',
  TemplateTransform = 'template-transform',
  HttpRequest = 'http-request',
  VariableAssigner = 'variable-assigner',
  VariableAggregator = 'variable-aggregator',
  Tool = 'tool',
  ParameterExtractor = 'parameter-extractor',
  Iteration = 'iteration',
  DocExtractor = 'document-extractor',
  ListFilter = 'list-operator',
  IterationStart = 'iteration-start',
  Assigner = 'assigner',
  Agent = 'agent',
  Loop = 'loop',
  LoopStart = 'loop-start',
}

// 节点通用属性
export type CommonNodeType<T = {
    
     
     }> = {
   
    
    
  _connectedSourceHandleIds?: string[]
  _connectedTargetHandleIds?: string[]
  _targetBranches?: Branch[]
  _isSingleRun?: boolean
  _runningStatus?: NodeRunningStatus
  _runningBranchId?: string
  _singleRunningStatus?: NodeRunningStatus
  _isCandidate?: boolean
  _isBundled?: boolean
  _children?: string[]
  _isEntering?: boolean
  _showAddVariablePopup?: boolean
  _holdAddVariablePopup?: boolean
  _iterationLength?: number
  _iterationIndex?: number
  _inParallelHovering?: boolean
  _waitingRun?: boolean
  _retryIndex?: number
  isInIteration?: boolean
  iteration_id?: string
  selected?: boolean
  title: string
  desc: string
  type: BlockEnum
  width?: number
  height?: number
  _loopLength?: number
  _loopIndex?: number
  isInLoop?: boolean
  loop_id?: string
  error_strategy?: ErrorHandleTypeEnum
  retry_config?: WorkflowRetryConfig
  default_value?: DefaultValueForm[]
}

// 节点类型定义，基于 ReactFlow 的 Node 类型扩展
export type Node<T = {
    
     
     }> = ReactFlowNode<CommonNodeType<T>>

2.1.2 边类型

// 边的通用属性
export type CommonEdgeType = {
   
    
    
  _hovering?: boolean
  _connectedNodeIsHovering?: boolean
  _connectedNodeIsSelected?: boolean
  _isBundled?: boolean
  _sourceRunningStatus?: NodeRunningStatus
  _targetRunningStatus?: NodeRunningStatus
  _waitingRun?: boolean
  isInIteration?: boolean
  iteration_id?: string
  isInLoop?: boolean
  loop_id?: string
  sourceType: BlockEnum
  targetType: BlockEnum
}

// 边类型定义，基于 ReactFlow 的 Edge 类型扩展
export type Edge = ReactFlowEdge<CommonEdgeType>

2.1.3 变量类型

// 变量值选择器，用于指定变量来源
export type ValueSelector = string[] // [nodeId, key | obj key path]

// 变量定义
export type Variable = {
   
    
    
  variable: string
  label?: string | {
   
    
    
    nodeType: BlockEnum
    nodeName: string
    variable: string
  }
  value_selector: ValueSelector
  variable_type?: VarKindType
  value?: string
  options?: string[]
  required?: boolean
  isParagraph?: boolean
}

// 环境变量
export type EnvironmentVariable = {
   
    
    
  id: string
  name: string
  value: any
  value_type: 'string' | 'number' | 'secret'
}

// 对话变量
export type ConversationVariable = {
   
    
    
  id: string
  name: string
  value_type: ChatVarType
  value: any
  description: string
}