终极指南：解决开源工作流设计工具WFD的8大常见问题

WFD（flowable workflow designer）是一款基于@antv/g6开发的开源工作流设计工具，广泛应用于流程可视化与业务流程管理场景。本文将为新手用户提供WFD使用过程中常见问题的解决方案，帮助你快速掌握这款强大工具的使用技巧。

一、安装与环境配置问题

1.1 如何正确安装WFD？

WFD的安装过程非常简单，只需执行以下命令克隆仓库并安装依赖：

git clone https://gitcode.com/gh_mirrors/wf/wfd
cd wfd
npm install

安装完成后，通过npm start即可启动开发服务器。如果遇到依赖冲突，建议使用Node.js 14+版本并尝试删除node_modules目录后重新安装。

1.2 启动后页面空白怎么办？

若启动后浏览器页面空白，可按以下步骤排查：

1. 检查控制台错误信息（F12开发者工具）
2. 确认src/index.tsx入口文件是否存在
3. 尝试执行npm run build构建项目后查看生成的静态文件

二、界面操作问题

2.1 如何添加和连接流程节点？

WFD提供直观的拖拽式操作界面，左侧面板包含各种流程节点类型：

操作步骤：

1. 从左侧面板拖拽节点到画布中央
2. 点击节点边缘的锚点（小圆圈）并拖拽到目标节点
3. 释放鼠标完成连接，系统会自动生成箭头连接线

2.2 节点无法拖拽或选中怎么办？

如果遇到节点无法拖拽的情况，可能是以下原因：

• 检查是否处于"只读模式"（工具栏有锁定图标）
• 确认画布是否被意外缩放（可通过工具栏重置视图）
• 尝试清除浏览器缓存或使用隐私模式访问

三、流程设计问题

3.1 如何设计分支流程？

WFD支持多种网关类型实现分支逻辑，以"排他网关"为例：

操作方法：

1. 添加"排他网关"节点（菱形图标）
2. 从网关引出多条连接线
3. 点击连接线设置条件表达式（如"金额大于1000"）

相关配置文件可参考：src/components/DetailPanel/GatewayDetail.tsx

3.2 如何设置任务节点属性？

选中任意任务节点后，右侧面板会显示详细属性配置界面：

• 基本信息：名称、描述、负责人
• 高级设置：超时时间、优先级、表单关联
• 事件配置：前置/后置处理脚本

不同类型的任务节点（如用户任务、脚本任务）会显示不同的配置项，具体实现可查看src/components/DetailPanel/目录下的相关文件。

四、高级使用问题

4.1 如何导出和导入流程定义？

WFD支持多种格式的流程定义导入导出：

• 导出：点击顶部工具栏"保存"按钮，可导出为JSON格式
• 导入：通过"文件"菜单选择本地JSON文件导入
• 历史记录：系统自动保存修改历史，可通过"上一条/下一条"按钮回溯

4.2 如何自定义流程节点类型？

如需扩展自定义节点类型，可按以下步骤操作：

1. 在src/shape/目录下创建新的节点定义
2. 注册自定义节点到G6图表：src/index.tsx
3. 添加节点图标到assets/icons/flow/目录

五、常见错误及解决方法

错误现象	可能原因	解决方案
连接线显示异常	锚点配置错误	检查src/item/anchor.ts中的锚点定义
属性面板不显示	组件未正确注册	确认src/plugins/detailPanel.ts配置
流程验证失败	节点配置不完整	检查必填字段，使用工具栏"验证"功能排查问题

六、学习资源与社区支持

• 官方文档：docs/index.html
• 示例项目：example/pages/index.js
• 本地化支持：src/locales/目录包含多语言配置

通过以上解决方案，相信你已经能够应对WFD使用过程中的大部分问题。如果遇到更复杂的情况，建议查看项目源码或参与社区讨论获取帮助。