dify 工作流二次开发

前言

dify 的前端是用 next 来编写的(一个 react 的框架)，而其工作流使用了react-flow这个插件,最新版本名为 xyflow。我们需要参考其 workflow 定制一个属于自己的 ai 工作流，是一个有向无环图。

困难

1.需要在短时间内理解dify的工作流架构以及其封装的大量hooks的使用

2.刚刚上手react

3.配置项比较多，时间紧

开发

首先让我们来分析一下一个工作流中包含的元素：

• node节点

这是整个工作流的核心也是难点，基于不同的节点可以执行不同的操作，dify内置了多种节点Http,  LLM,Code,`

1. 需要对不同的节点使用不同的配置项（也就是右侧的panel）

2. 每个节点都可以有output 变量，要在输入的时候拿到你前面连接的节点的output变量作为自己的input变量，最后输出的时候判断哪些是临时变量， 就进行舍弃

这个地方的难点就是如何拿到当前节点连接的前后节点，判断你这个节点可以使用的变量，其他都是一些力气活了。

其中需要注意的，开始节点是不能删除的，dify的工作流对react-flow的删除节点操作进行了重写，采用了右键和del删除，这样子可操作性就很高了，而如果你不想改写的话，可以在applyNodeChanges的时候添加一个属性进行判断，我看官方是建议使用onBeforeDelete这个，但是这个返回的是整个nodes节点，拿不到当前删除的节点，同时react-flow删除的逻辑好像有点问题，有时候会出现删错的现象。

• edges边

在dify中一个节点只能连接一条边，除非使用了IF-ELSE节点来走不同的逻辑，而我们需要改造成一对多或者多对一的情况，在hooks中有一个对前后可连接节点的判断，可以在每次连接的时候判断是否可以连接

• workflow

这是对一整个工作流中数据的整合，有一个use-workflow hooks，在这里进行了数据的初始化，节点的操作和更新以及draft的一些操作，一开始写的时候，我还想着不按照他的来，写到后面发现这个是统筹全局，必不可少的一部分，然后又重新理解了一下。

总结

因为之前是一直用的Vue，这次对React中的hooks和zustand都有了更深的了解，最主要的是学习到了一个复杂的组件如何进一步合理和有逻辑的封装。在最初看一个大型的项目无从下手的时候，我觉得应该要从大的方向开始，先不看其内部的详细实现，当你理解了大致的逻辑之后，在分别详细的去看一大块里面的实现。看不明白的时候也不用急躁，可以休息一下或者转移方向，之后再回来看都是可以的。

同时也不能只关注代码，需要大致的了解一下业务逻辑，特别是前端，很多时候只需要知道你需要什么样子的效果，那ok我实现出来就可以了，对业务的了解可以说是没有的。

这个workflow对node和panel，utils，types，constants，operation，hooks都进行了很大的封装，大大降低了耦合度。

还是得多看一些大型的开源项目，从他们中学习比较系统的封装和架构，这个是日常中很难去学习到的。

以及如何才能提升自己的开发效率，我对接的那个后端大哥写接口是真快，我还在想怎么构建页面的时候他就把大部分的接口写完了。

我的想法是1.对自己使用技术的熟练程度;2.对所开发项目的代码和业务理解程度。