Dify 的 Web 前端工作流编排（Workflow Builder） 是整个平台里最复杂、也是最具创新性的部分之一。
下面是一个完整、深入但清晰的技术分析👇：
🧩 一、工作流编排的核心定位
Dify 的“工作流编排”模块（Workflow Builder）是可视化拖拽式的流程设计器，允许用户在网页上像画流程图一样组装 LLM 应用逻辑。
它实现了：
- 拖拽节点（Node）
- 节点间连线（Edge）
- 参数设置面板（Properties Panel）
- 实时预览与执行
- 流程的保存、发布、执行回调
🧠 二、技术栈概览（前端部分）
| 框架基础 | React + TypeScript |
| UI组件库 | TailwindCSS + Radix UI + Shadcn/UI |
| 工作流可视化引擎 | 🧩 React Flow（核心） |
| 状态管理 | Zustand / React Query |
| 构建工具 | Vite |
| 代码组织 | Monorepo（基于 pnpm workspace） |
| 国际化 | i18next |
| 通信 | REST + WebSocket（实时运行状态） |
🔧 三、核心依赖：React Flow
Dify 前端工作流界面使用了 React Flow —— 一个专门用于构建可视化流程图编辑器的 React 库。 它支持：
- 拖拽节点、缩放、平移
- 自定义节点类型（例如：LLM 节点、Tool 节点、条件判断节点等）
- 连线事件与动态计算
- 节点状态（运行中、错误、完成）可视化
🔗 官方库地址： https://reactflow.dev/
在 Dify 中，你会看到类似以下结构：
web/
├─ app/
│ ├─ components/workflow/
│ │ ├─ index.tsx ← 工作流主入口
│ │ ├─ node-types/ ← 自定义节点组件（LLM、HTTP、Condition 等）
│ │ ├─ edges/ ← 自定义连线样式与逻辑
│ │ ├─ store.ts ← Zustand 状态管理
│ │ ├─ useWorkflow.ts ← 流程逻辑 Hooks
│ │ └─ …
│ └─ pages/workflow/ ← 页面布局
├─ shared/
│ ├─ api/ ← 与后端交互
│ ├─ ui/ ← 通用UI组件（如 Modal、Sidebar、Tabs）
🧱 四、运行机制（前端层面）
简化流程如下：
用户拖拽节点
- React Flow 负责渲染与节点管理；
- 新节点定义写入 Zustand 全局 store。
节点参数配置
- 点击节点 → 打开右侧属性面板；
- 参数编辑后写入 store；
- 实时校验。
连线逻辑
- React Flow 提供 onConnect() 事件；
- 保存连线关系，更新 DAG（有向无环图）结构。
保存/发布
- 前端序列化工作流（节点 + 连线 + 参数）；
- 通过 API 调用后端（/api/workflows）保存。
执行可视化
- 运行时通过 WebSocket 获取后端执行状态；
- 动态高亮节点、显示输出结果。
🧩 五、前后端交互
| 保存工作流 | POST /api/workflows | dify/server/workflow/ |
| 加载工作流 | GET /api/workflows/:id | |
| 执行工作流 | POST /api/workflows/:id/execute | Celery 异步任务 |
| 实时状态 | WebSocket /ws/workflows/:id | FastAPI WebSocket 通道 |
💡 六、React Flow + 自定义节点举例
例如一个“LLM 调用节点”前端定义结构：
import { Handle, Position } from 'reactflow'
export default function LLMNode({ data }) {
return (
<div className="p-3 rounded-2xl bg-white shadow-sm border">
<div className="font-semibold text-sm mb-2">LLM Node</div>
<div className="text-xs text-gray-500">Model: {data.model}</div>
<Handle type="target" position={Position.Left} />
<Handle type="source" position={Position.Right} />
</div>
)
}
这类自定义节点在 Dify 中以多种形式存在：
- Input node
- LLM node
- Tool node
- Condition node
- Output node
- HTTP Request node
🔍 七、总结
| 核心框架 | React + TypeScript |
| UI 框架 | TailwindCSS + Shadcn/UI |
| 工作流引擎 | React Flow |
| 状态管理 | Zustand |
| 后端交互 | REST / WebSocket |
| 执行引擎（后端） | Python + Celery + FastAPI |
| 主要文件目录 | /web/app/components/workflow/ |
🚀 八、可扩展方向（如果你想二开）
- 新增节点类型：在 node-types/ 目录增加组件 + 注册节点类型；
- 定制参数面板：扩展右侧属性表单；
- 接入自定义 API：修改工作流执行时序；
- 样式/布局修改：调整 React Flow 配置项（如 snap-to-grid、mini-map 等）。
