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）

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

简化流程如下：

用户拖拽节点
- 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 调用节点"前端定义结构：

tsx 复制代码

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 等）。