dify之Web 前端工作流编排（Workflow Builder）

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）

---

🧱 四、运行机制（前端层面）

简化流程如下：

1. 用户拖拽节点

   • React Flow 负责渲染与节点管理；
   • 新节点定义写入 Zustand 全局 store。

2. 节点参数配置

   • 点击节点 → 打开右侧属性面板；
   • 参数编辑后写入 store；
   • 实时校验。

3. 连线逻辑

   • React Flow 提供 onConnect() 事件；
   • 保存连线关系，更新 DAG（有向无环图）结构。

4. 保存/发布

   • 前端序列化工作流（节点 + 连线 + 参数）；
   • 通过 API 调用后端（/api/workflows）保存。

5. 执行可视化

   • 运行时通过 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 等）。

---