Flowable UI实战：从零绘制一个BPMN标准请假审批流程图

📅 2026/6/30 14:32:12 👁️ 次浏览

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.port8081第一次登录后建议立即在身份管理里创建新用户。比如我们添加开发账号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 iddays typelong / /extensionElements4.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代码。

相关新闻