Flowable UI实战：从零绘制一个BPMN标准请假审批流程图
1. Flowable UI入门：为什么选择它来画流程图？
第一次接触Flowable UI时，我和很多开发者一样有个疑问：市面上有那么多流程图工具，为什么非要选这个？后来在实际项目中踩过几次坑才明白，对于需要集成到Java应用中的业务流程，Flowable确实是最顺手的选择。
想象一下这样的场景：HR部门需要一套电子化的请假审批系统，要求能根据请假天数自动判断审批路径（比如3天以下只需主管审批，3天以上需要总监审批）。如果用普通绘图工具画完再找开发人员编码实现，光是沟通成本就让人头疼。而Flowable UI直接解决了这个问题——你画的流程图本身就是可执行的代码。
我特别喜欢它的几个特点：
- BPMN标准支持：就像HTML之于网页，BPMN是流程图的"普通话"。用Flowable画的图可以无缝对接其他支持BPMN的系统
- 可视化开发：不需要写XML就能创建复杂逻辑，通过拖拽就能设置审批人、条件分支
- 即时测试：画完流程图可以直接模拟运行，马上看到审批路径是否符合预期
提示：BPMN 2.0标准里最常用的元素其实就4类——开始事件（流程入口）、用户任务（审批环节）、网关（决策分支）、结束事件（流程终点），掌握这些就能应对80%的业务场景。
2. 环境准备：5分钟快速搭建Flowable UI
很多教程一上来就讲Docker部署、源码编译，把简单事情复杂化。其实对于刚接触Flowable的新手，我推荐直接用官方打包好的发行版。最近在给客户做内训时，验证过这个最简方案：
- 从GitHub Release页面下载flowable-6.7.2.zip（注意选
flowable-*-ui.war的版本） - 解压后进入wars目录，执行：
java -jar flowable-ui.war - 浏览器访问http://localhost:8080/flowable-ui 用admin/test登录
遇到过两个典型问题：
- 如果启动时闪退，检查JAVA_HOME环境变量是否指向JDK8+
- 端口冲突可以加参数：
java -jar flowable-ui.war --server.port=8081
第一次登录后建议立即在"身份管理"里创建新用户。比如我们添加：
- 开发账号：dev/dev（分配Modeler权限）
- 测试账号：tester/tester（分配Task权限）
3. 实战：绘制请假审批流程图
现在我们来创建一个真实的请假流程，需求是这样的：
- 员工提交申请后，先由直属主管审批
- 主管通过后，超过2天的请假需要经理二次审批
- 任何环节拒绝都直接结束流程
3.1 创建流程画布
点击"流程模型"→"创建流程"，填写：
- 名称：员工请假流程
- 描述：BPMN2.0标准请假审批
- 主键：MyLeave（后续代码中会用到）
这时会进入空白的流程图编辑界面。左侧是BPMN元素面板，右侧是属性配置区，中间是画布——是不是很像Visio？但区别在于这里每个元素将来都会变成真实的代码逻辑。
3.2 添加核心元素
按顺序拖拽这些元素到画布：
开始事件（圆形图标）：表示流程起点
- 修改id为"startEvent"（规范命名方便后续维护）
用户任务（矩形图标）：主管审批环节
- 命名为"主管审批"
- 在"分配"选项卡设置assignee为"zhangsan"（实际项目这里通常绑定角色ID）
排他网关（菱形图标）：决策分支
- 命名为"是否通过"
- 这是整个流程最关键的逻辑控制点
结束事件（粗边圆形图标）：流程终点
- 添加两个结束事件分别对应"通过"和"拒绝"路径
3.3 连接元素并设置条件
用连接线（箭头图标）按以下顺序连线：
- 开始事件 → 主管审批
- 主管审批 → 网关
- 网关 → 经理审批（条件流）
- 点击连线，在"条件"选项卡设置：
${days > 2 && status == 'approved'}
- 点击连线，在"条件"选项卡设置：
- 网关 → 结束事件（拒绝流）
- 条件设置为：
${status == 'rejected'}
- 条件设置为：
注意：这里的days和status是流程变量，实际运行时由前端表单传入。测试时可以先用固定值模拟。
4. 高级配置：让流程图更智能
基础的流程图虽然能用，但想要真正实用还需要些技巧。分享几个我总结的配置经验：
4.1 动态任务分配
实际项目中审批人很少是固定的。比如我们可以：
- 设置候选组（candidateGroups）为"deptLeader"
- 或者在assignee里使用表达式：
${taskService.createTaskQuery().taskAssignee('zhangsan').list()}
4.2 表单绑定
在用户任务的"表单"选项卡可以：
- 关联外部表单URL
- 直接嵌入字段定义：
<extensionElements> <flowable:formProperty id="days" type="long" /> </extensionElements>
4.3 监听器配置
想要在审批通过时自动发邮件？可以添加执行监听器：
executionListener = { event: "end", implementation: "com.example.LeaveApprovalListener" }5. 导出与使用：从流程图到可运行代码
画好的流程图最终要投入实际使用，这里有两个关键操作：
5.1 导出BPMN文件
点击右上角"下载"按钮会生成标准的BPMN2.0 XML文件。这个文件：
- 可以被任何支持BPMN的引擎解析
- 包含了所有图形和逻辑定义
- 可以直接部署到Flowable引擎
5.2 集成到Spring Boot项目
在Java应用中加载流程图只需要几行代码：
@Autowired private RepositoryService repositoryService; public void deployProcess() { repositoryService.createDeployment() .addClasspathResource("processes/leave.bpmn20.xml") .deploy(); }最近在金融项目里，我们用这套方法把原本需要2周开发的报销审批流程，缩短到了3天就上线测试。特别是当业务部门提出"增加财务复核环节"这种需求时，只需要在Flowable UI里拖个新节点，完全不用修改Java代码。