# Activiti 5.13 没有流程图追踪？自己解析BPMN画进度图，政务用户一眼看懂

Activiti 5.13 没有流程图追踪自己解析BPMN画进度图政务用户一眼看懂非科班野生程序员深耕政务信息化20年这套自研Java Web框架支撑过省级新农保、全国首例跨省医保结算等核心民生系统18年稳定运行至今。这篇复盘在 Activiti 5.13 时代给政务用户做流程进度可视化的思路全是政务场景踩坑后的实用解法不求优雅但求落地。最后感谢豆包、智谱、OpenCode决策是我做的代码是我搓的文字是他们总结的。背景政务审批系统里用户最常问的一个问题是“我的申请走到哪一步了”社保参保、医保报销、生育津贴……老百姓提交申请后隔三差五打电话问进度。窗口工作人员也只能一个个去后台查效率很低。所以需要一个功能用户输入申请号直接看到一张流程图哪个环节走完了、卡在哪个环节、谁在处理、什么时间处理的一目了然。Activiti 5.13 那个年代2013 年左右官方提供的流程图追踪能力很弱。ProcessDiagramGenerator是后来版本才逐渐完善的而且它生成的图是纯英文的、不带中文节点名、不标注处理人和处理时间——对政务用户来说根本没法用。我的做法是自己解析 BPMN XML自己用 Java2D 画图把任务执行信息直接标注在节点上。整体思路┌─────────────────────────────────────────────┐ │ flowControl.image() ← 前端调用的入口 │ │ │ │ 1. processService.getTasks(insid) │ │ → 查 Activiti 历史任务表 │ │ → 拿到所有环节的处理人、时间、状态 │ │ │ │ 2. processService.loadByDeployment(pid) │ │ → 从 Activiti 仓库拿 BPMN XML 流 │ │ │ │ 3. xmltopic.parse(in, tasks) │ │ → 解析 BPMN XML 获取节点坐标和连线 │ │ → 把任务信息标注到对应节点上 │ │ → Java2D 画成 PNG 图片 │ │ → 直接输出到 HttpServletResponse │ │ │ │ 前端收到一张 PNG 图片直接展示 │ └─────────────────────────────────────────────┘前端不需要任何图表组件一个img标签就够了。第一步查任务历史——processService.getTasks()ListHistoricTaskInstancelisthistoryService.createHistoricTaskInstanceQuery().processInstanceId(insid).orderByHistoricTaskInstanceStartTime().asc().list();Activiti 的historyService记录了每个流程实例的所有历史任务。按开始时间升序排列就是流程的实际推进顺序。每个HistoricTaskInstance包含taskDefKey环节定义 ID对应 BPMN 里的节点 IDassignee处理人startTime开始时间endTime结束时间null 表示还没处理完我把这些信息提取出来组装成ListHashMapString, String传给画图方法。第二步拿 BPMN XML——processService.loadByDeployment()publicInputStreamloadByDeployment(StringprocessDefinitionId)throwsutilException{ProcessDefinitionpdrepositoryService.createProcessDefinitionQuery().processDefinitionId(processDefinitionId).singleResult();returnrepositoryService.getResourceAsStream(pd.getDeploymentId(),pd.getResourceName());}Activiti 部署流程时会把 BPMN XML 文件存到数据库里ACT_GE_BYTEARRAY表。通过repositoryService.getResourceAsStream()可以拿到原始 XML 的输入流。这个 BPMN XML 里包含了所有节点的坐标信息——这是画图的关键。第三步解析 BPMN XML——xmltopic.parse()publicvoidparse(InputStreamin,ListHashMapString,Stringtasks){SAXReadersaxnewSAXReader();Documentdocumentsax.read(in);Elementrootdocument.getRootElement();getNodes(root);getMax();create(tasks);}三个步骤解析节点 → 算画布大小 → 画图。3.1 getNodes()——解析节点坐标和连线BPMN XML 的结构大致是这样的definitionsprocessidleavename请假流程startEventidstartname开始/userTaskidtask1name科长审批/userTaskidtask2name处长审批/endEventidendname结束/sequenceFlowsourceRefstarttargetReftask1/sequenceFlowsourceReftask1targetReftask2/sequenceFlowsourceReftask2targetRefend//processBPMNDiagramBPMNPlaneBPMNShapebpmnElementstartBoundsx100y200width30height30//BPMNShapeBPMNShapebpmnElementtask1Boundsx200y185width100height60//BPMNShapeBPMNEdgebpmnElementsid-xxxwaypointx130y215/waypointx200y215//BPMNEdge/BPMNPlane/BPMNDiagram/definitions两层数据process节点定义了有哪些节点startEvent、userTask、endEvent以及它们的逻辑 ID 和名称BPMNDiagram节点定义了每个节点在画布上的坐标x、y、width、height以及连线的拐点坐标getNodes()方法用 dom4j 遍历这两层数据把所有信息存到一个ListHashMap里。每个 HashMap 代表一个节点或一条连线节点BPMNShape的 HashMaptype BPMNShape bpmnElement task1 ← 关联到 process 里的 userTask x 200 y 185 width 100 height 60连线BPMNEdge的 HashMaptype BPMNEdge bpmnElement sid-xxx x0 130, y0 215 ← 第一个拐点 x1 200, y1 215 ← 第二个拐点 points 2 ← 拐点数量连线可能有多个拐点折线所以用x0/y0、x1/y1、x2/y2……这样的命名方式存储。同时process下的节点也被解析出来type userTask id task1 name 科长审批后续画图时通过bpmnElement把 BPMNShape 的坐标和 process 节点的名称关联起来。3.2 getMax()——计算画布大小publicvoidgetMax(){for(inti0;ilist.size();i){HashMapString,Stringmaplist.get(i);if(BPMNShape.equals(map.get(type))){floattempxFloat.parseFloat(map.get(x))Float.parseFloat(map.get(width));if(maxXtempx)maxXtempx;floattempyFloat.parseFloat(map.get(y))Float.parseFloat(map.get(height));if(maxYtempy)maxYtempy;}if(BPMNEdge.equals(map.get(type))){intpointsInteger.parseInt(map.get(points));for(intj0;jpoints;j){floattempxFloat.parseFloat(map.get(xj));if(maxXtempx)maxXtempx;floattempyFloat.parseFloat(map.get(yj));if(maxYtempy)maxYtempy;}}}}遍历所有节点和连线的坐标找到最大的 x 和 y 值加上余量作为画布尺寸。第四步画图——create()这是核心部分。根据节点的不同状态用不同颜色和文字标注。4.1 三种状态的颜色if(!.equals(endtime)endtime!null!null.equals(endtime)){// 已完成——红色边框paintComponent(Color.BLACK,g,...);}elseif(!.equals(taskdefid)taskdefid!null!null.equals(taskdefid)){// 当前环节——红色高亮paintComponent(Color.RED,g,...);}else{// 未到达——黑色边框paintComponent(Color.BLACK,g,...);}已完成的环节黑色边框 黄色背景默认填充色标注环节名、处理人、完成时间当前正在处理的环节红色边框标注环节名、处理人、接收时间还没走到的环节黑色边框只标注环节名4.2 标注处理人信息每个有任务的节点上会查数据库获取处理人的真实姓名Stringuseridtask.get(userid);UseruserdaonewUser();userdao.setPsn_id(userid);ListUseruserlist(ListUser)DBUtil.getDao(userMapper.class,getUserInfo,userdao);if(userlist!nulluserlist.size()!0){stratUserNameuserlist.get(0).getPsn_name();}然后绘制三行文字g.setFont(newFont(宋体,Font.PLAIN,24));// 第一行环节名称如科长审批g.drawString(node.get(name),...);// 第二行处理人姓名如张三g.drawString(stratUserName,...);// 第三行时间如2024-01-15g.drawString(endtime.substring(0,10),...);4.3 画节点和连线开始/结束事件——画圆圈if(startEvent.equals(node.get(type))){g.setColor(Color.BLACK);g.drawArc((int)tempx*2,(int)tempy*2,(int)tempwidth*2,(int)tempheight*2,0,360);}用户任务——画圆角矩形publicvoidpaintComponent(Colorc,Graphicsg,intx,inty,intwidth,intheight){Graphics2Dg2d(Graphics2D)g;g2d.setColor(c);BasicStrokebs1newBasicStroke(2);g2d.setStroke(bs1);g2d.drawRoundRect(x2,y2,width-4,height-4,24,24);}连线——逐段画直线最后一段带箭头if(BPMNEdge.equals(map.get(type))){intpointsInteger.parseInt(map.get(points));for(intj0;jpoints-1;j){intx1(int)Float.parseFloat(map.get(xj))*2;inty1(int)Float.parseFloat(map.get(yj))*2;intx2(int)Float.parseFloat(map.get(x(j1)))*2;inty2(int)Float.parseFloat(map.get(y(j1)))*2;if(jpoints-2){drawAL(x1,y1,x2,y2,(Graphics2D)g);// 最后一段画带箭头直线}else{g.drawLine(x1,y1,x2,y2);// 中间段画普通直线}}}箭头用GeneralPath画三角形publicvoiddrawAL(intsx,intsy,intex,intey,Graphics2Dg2){doubleH15;doubleL8;doubleawradMath.atan(L/H);doublearraow_lenMath.sqrt(L*LH*H);double[]arrXY_1rotateVec(ex-sx,ey-sy,awrad,true,arraow_len);double[]arrXY_2rotateVec(ex-sx,ey-sy,-awrad,true,arraow_len);// 画线g2.drawLine(sx,sy,ex,ey);// 画箭头三角形GeneralPathtrianglenewGeneralPath();triangle.moveTo(ex,ey);triangle.lineTo(x3,y3);triangle.lineTo(x4,y4);triangle.closePath();g2.fill(triangle);}4.4 坐标放大 2 倍注意到所有坐标计算里都乘了 2(int)tempx*2这是因为 BPMN XML 里的坐标是为设计器比如 Eclipse Designer 或在线设计器准备的坐标值比较小。直接按原始坐标画出来的图太小文字挤在一起。乘以 2 放大后节点之间有足够的空间写三行中文。4.5 输出到浏览器create()方法画完后直接把BufferedImage写到OutputStreamImageIO.write(bi,picType,out);而这个out是response.getOutputStream()——直接输出到浏览器的 HTTP 响应。前端只需要imgsrc/flowControl/image?insidxxx/一张带进度标注的流程图就显示出来了。调用方——flowControl.image()publicDataCenterimage(DataCentercenter,HttpServletRequestrequest,HttpServletResponseresponse)throwsutilException{DBUtil.BeginTrans(null,false);Stringinsidrequest.getParameter(insid);ListHashMapString,StringtasksprocessService.getTasks(insid);if(tasks!nulltasks.size()0){Stringpidtasks.get(0).get(pid);InputStreaminprocessService.loadByDeployment(pid);xmltopic objnewxmltopic();try{response.setContentType(image/png);obj.setOut(response.getOutputStream());obj.parse(in,tasks);obj.getOut().flush();obj.getOut().close();}catch(IOExceptione){}}DBUtil.EndTrans();returnnull;}流程很清楚根据流程实例 ID 查任务历史根据流程定义 ID 拿 BPMN XML解析 画图 输出 PNG为什么不用 Activiti 自带的流程图生成Activiti 5.13 自带的ProcessDiagramGenerator有几个问题不支持中文标注生成的图只有节点 ID没有处理人、处理时间高亮逻辑不灵活只能高亮当前节点和历史节点不能按政务需求自定义颜色和标注图片质量差生成的图分辨率低文字模糊依赖 Activity 自己的渲染引擎版本升级后可能不兼容自己解析 BPMN Java2D 画图虽然代码多一点但完全可控。节点的颜色、文字、大小、位置想怎么改就怎么改。为什么这样做为什么输出图片而不是前端 SVG/Canvas这是 2013 年的技术决策。那时前端框架没有现在这么强大政务系统的浏览器环境也不统一IE8 还大量存在。输出一张 PNG 图片是最兼容的方案——所有浏览器都能显示不需要任何前端插件或框架。为什么不缓存图片每次请求都重新画图是因为流程的状态在变化。同一个流程实例今天看和明天看可能不一样新的环节完成了。PNG 图片很小通常几十 KB实时生成不会有性能问题。坐标乘 2 是不是太粗暴是的。更优雅的做法是根据文字内容动态计算节点大小和间距。但在政务系统里流程定义一旦确定就不太变设计器画出来的布局基本合理乘 2 够用了。先解决问题有需要再优化。决策原则没有现成的就用最笨的办法——解析 XML 画图片粗暴但可靠。政务用户不关心技术方案是否优雅他们只关心能不能一眼看懂自己的申请走到哪了。BPMN XML 里什么信息都有节点名、坐标、连线Java2D 画图也不是什么高深技术拼在一起就能解决问题。你的项目里流程追踪是怎么做的用的 Activiti 自带的还是自己画的欢迎评论区聊聊。作者许彰午| 非科班野生程序员深耕政务信息化20年标签#Java #Activiti #BPMN #流程图 #Java2D #工作流 #政务信息化