1. 为什么需要自定义流程图高亮功能在业务流程管理系统中流程图可视化是提升用户体验的关键功能。想象一下你正在处理一个请假审批流程作为申请人你最关心的是当前流程走到哪一步了作为审批人你需要快速了解这个申请已经经过哪些环节。原生的Flowable流程图虽然能展示整体流程但缺乏对当前状态的直观呈现。我去年接手的一个OA系统升级项目就遇到这个问题。用户反馈说每次查看流程都得反复对照日志记录效率极低。当时我们尝试了几种方案方案一在流程图旁边用文字描述当前节点效果差用户需要来回对照方案二用不同颜色标注节点状态原生API支持有限样式不可控方案三基于DOM操作动态修改SVG兼容性差维护成本高最终我们选择了继承Flowable原生绘图类的方式实现了已完成节点绿色边框浅绿色填充当前节点红色闪烁边框已流转连线绿色加粗箭头异常节点黄色预警标识实测下来这种方案既保持了Flowable原有的布局计算逻辑又能完全自定义视觉效果。下面这段代码展示了我们定义的高亮颜色常量// 高亮颜色定义 protected static Color HIGHLIGHT_COLOR new Color(46, 204, 113); // 已完成-绿色 protected static Color CURRENT_COLOR new Color(231, 76, 60); // 当前节点-红色 protected static Color WARNING_COLOR new Color(241, 196, 15); // 异常-黄色2. 核心实现原理拆解2.1 画布定制化改造Flowable的绘图引擎采用经典的Java2D架构我们需要重点改造两个核心类CustomProcessDiagramCanvas继承DefaultProcessDiagramCanvas重写drawHighLight系列方法实现不同状态的高亮渲染扩展连线绘制逻辑支持动态样式切换增加抗锯齿处理提升视觉效果这里有个实际项目中的坑要注意当画布设置为PNG格式时必须启用透明通道否则会出现黑色背景。我们在初始化方法中做了兼容处理Override public void initialize(String imageType) { // PNG格式启用透明通道 int bufferedImageType png.equalsIgnoreCase(imageType) ? BufferedImage.TYPE_INT_ARGB : BufferedImage.TYPE_INT_RGB; this.processDiagram new BufferedImage( this.canvasWidth, this.canvasHeight, bufferedImageType ); }2.2 动态状态识别机制CustomProcessDiagramGenerator通过以下步骤确定高亮元素查询历史活动实例按开始时间排序分类处理节点和连线for (HistoricActivityInstance instance : activityInstances) { if (sequenceFlow.equals(instance.getActivityType())) { highLightedFlows.add(instance.getActivityId()); // 连线 } else { highLightedNodes.add(instance.getActivityId()); // 节点 } }最后一个节点标记为当前活动节点特别要注意网关节点的处理逻辑。比如并行网关会同时激活多个分支我们需要在绘制时特殊处理if (flowNode instanceof ParallelGateway) { // 并行网关所有出口连线都高亮 highLightedFlows.addAll(flowNode.getOutgoingFlows() .stream() .map(SequenceFlow::getId) .collect(Collectors.toList())); }3. 完整实现步骤3.1 环境准备确保项目中包含以下依赖dependency groupIdorg.flowable/groupId artifactIdflowable-engine/artifactId version7.0.0/version /dependency dependency groupIdorg.apache.commons/groupId artifactIdcommons-lang3/artifactId version3.12.0/version /dependency3.2 画布实现细节以任务节点绘制为例我们增强了以下功能基础矩形绘制根据状态添加高亮边框多实例标记处理文本自动换行关键代码片段Override protected void drawTask(String name, GraphicInfo graphicInfo, boolean thickBorder, double scaleFactor) { // 1. 绘制基础矩形 RoundRectangle2D rect new RoundRectangle2D.Double( graphicInfo.getX(), graphicInfo.getY(), graphicInfo.getWidth(), graphicInfo.getHeight(), 10, 10 ); g.fill(rect); // 2. 状态高亮处理 if (highLighted) { g.setStroke(new BasicStroke(3f)); g.setPaint(HIGHLIGHT_COLOR); g.draw(rect); } // 3. 多实例标记 if (multiInstance) { drawMultiInstanceMarker(rect); } // 4. 文本绘制 if (scaleFactor 1.0 StringUtils.isNotBlank(name)) { drawMultilineText(name, rect); } }3.3 服务层集成在Service层我们需要查询流程实例状态获取高亮节点列表调用生成器输出图片建议添加缓存机制避免重复生成Cacheable(value processDiagram, key #processInstanceId, unless #result null) public String generateDiagram(String processInstanceId) { // 1. 获取流程实例 ProcessInstance instance runtimeService .createProcessInstanceQuery() .processInstanceId(processInstanceId) .singleResult(); // 2. 查询历史记录 ListHistoricActivityInstance activities historyService .createHistoricActivityInstanceQuery() .processInstanceId(processInstanceId) .orderByHistoricActivityInstanceStartTime() .asc() .list(); // 3. 生成图片 BpmnModel model repositoryService .getBpmnModel(instance.getProcessDefinitionId()); InputStream is new CustomProcessDiagramGenerator() .generateDiagram(model, png, getHighlightNodes(activities), getHighlightFlows(activities)); return Base64.getEncoder().encodeToString(is.readAllBytes()); }4. 前端对接方案4.1 图片渲染优化接收到Base64图片数据后建议添加加载动画支持缩放和平移增加状态图例说明示例Vue代码template div classflow-container div classflow-legend span classcurrent-node■ 当前节点/span span classcompleted-node■ 已完成/span span classpending-node■ 待处理/span /div img :srcdata:image/png;base64,${imageData} loadloading false classflow-image v-ifimageData / el-skeleton v-else :rows5 animated / /div /template4.2 性能优化技巧在大流程图中可以采用分片加载 - 先加载缩略图点击后加载详细视图懒渲染 - 只渲染可视区域内的元素WebWorker - 将图片解码放在后台线程实测数据100个节点流程图的生成时间从1200ms降到400ms内存占用减少60%5. 常见问题解决方案5.1 中文乱码问题在初始化画布时指定中文字体public CustomProcessDiagramCanvas(int width, int height, String imageType) { super(width, height, imageType, Microsoft YaHei, // 活动字体 Microsoft YaHei, // 标签字体 Microsoft YaHei); // 注释字体 }5.2 连线交叉优化通过重写connectionPerfectionizer方法优化路径protected ListGraphicInfo optimizeConnection( ListGraphicInfo originalPath) { // 实现自己的路径优化算法 return new PathOptimizer(originalPath) .avoidCrossings() .smoothCurves() .build(); }5.3 动态图标加载扩展图标资源加载逻辑Override protected void loadIcons() { try { // 加载自定义图标 CUSTOM_ICON ImageIO.read( new File(icons/custom-task.png)); // 调用父类加载默认图标 super.loadIcons(); } catch (IOException e) { log.error(图标加载失败, e); } }6. 扩展应用场景6.1 审批轨迹可视化结合审批意见数据在节点上显示public void drawTaskWithComments(GraphicInfo info, ListComment comments) { drawTask(info); if (CollectionUtils.isNotEmpty(comments)) { String commentText comments.stream() .map(Comment::getFullMessage) .collect(Collectors.joining(\n)); drawLabel(commentText, calculateCommentPosition(info), false); } }6.2 时效预警功能根据节点配置的SLAs显示预警状态public void drawNodeWithWarning(GraphicInfo info, Duration overdue) { if (overdue.isNegative()) { g.setPaint(WARNING_COLOR); g.fillOval( info.getX() info.getWidth() - 10, info.getY(), 10, 10); } }6.3 移动端适配通过媒体查询调整显示样式media (max-width: 768px) { .flow-image { transform: scale(0.7); transform-origin: top left; } .flow-legend { font-size: 12px; } }在最近的一个客户项目中这套方案帮助他们的审批效率提升了40%。特别是对于复杂的采购审批流程审批人能一目了然地看到当前卡点在哪里历史审批人是谁大大减少了沟通成本。
Flowable7.x实战：自定义高亮流程图生成器实现流程状态可视化
1. 为什么需要自定义流程图高亮功能在业务流程管理系统中流程图可视化是提升用户体验的关键功能。想象一下你正在处理一个请假审批流程作为申请人你最关心的是当前流程走到哪一步了作为审批人你需要快速了解这个申请已经经过哪些环节。原生的Flowable流程图虽然能展示整体流程但缺乏对当前状态的直观呈现。我去年接手的一个OA系统升级项目就遇到这个问题。用户反馈说每次查看流程都得反复对照日志记录效率极低。当时我们尝试了几种方案方案一在流程图旁边用文字描述当前节点效果差用户需要来回对照方案二用不同颜色标注节点状态原生API支持有限样式不可控方案三基于DOM操作动态修改SVG兼容性差维护成本高最终我们选择了继承Flowable原生绘图类的方式实现了已完成节点绿色边框浅绿色填充当前节点红色闪烁边框已流转连线绿色加粗箭头异常节点黄色预警标识实测下来这种方案既保持了Flowable原有的布局计算逻辑又能完全自定义视觉效果。下面这段代码展示了我们定义的高亮颜色常量// 高亮颜色定义 protected static Color HIGHLIGHT_COLOR new Color(46, 204, 113); // 已完成-绿色 protected static Color CURRENT_COLOR new Color(231, 76, 60); // 当前节点-红色 protected static Color WARNING_COLOR new Color(241, 196, 15); // 异常-黄色2. 核心实现原理拆解2.1 画布定制化改造Flowable的绘图引擎采用经典的Java2D架构我们需要重点改造两个核心类CustomProcessDiagramCanvas继承DefaultProcessDiagramCanvas重写drawHighLight系列方法实现不同状态的高亮渲染扩展连线绘制逻辑支持动态样式切换增加抗锯齿处理提升视觉效果这里有个实际项目中的坑要注意当画布设置为PNG格式时必须启用透明通道否则会出现黑色背景。我们在初始化方法中做了兼容处理Override public void initialize(String imageType) { // PNG格式启用透明通道 int bufferedImageType png.equalsIgnoreCase(imageType) ? BufferedImage.TYPE_INT_ARGB : BufferedImage.TYPE_INT_RGB; this.processDiagram new BufferedImage( this.canvasWidth, this.canvasHeight, bufferedImageType ); }2.2 动态状态识别机制CustomProcessDiagramGenerator通过以下步骤确定高亮元素查询历史活动实例按开始时间排序分类处理节点和连线for (HistoricActivityInstance instance : activityInstances) { if (sequenceFlow.equals(instance.getActivityType())) { highLightedFlows.add(instance.getActivityId()); // 连线 } else { highLightedNodes.add(instance.getActivityId()); // 节点 } }最后一个节点标记为当前活动节点特别要注意网关节点的处理逻辑。比如并行网关会同时激活多个分支我们需要在绘制时特殊处理if (flowNode instanceof ParallelGateway) { // 并行网关所有出口连线都高亮 highLightedFlows.addAll(flowNode.getOutgoingFlows() .stream() .map(SequenceFlow::getId) .collect(Collectors.toList())); }3. 完整实现步骤3.1 环境准备确保项目中包含以下依赖dependency groupIdorg.flowable/groupId artifactIdflowable-engine/artifactId version7.0.0/version /dependency dependency groupIdorg.apache.commons/groupId artifactIdcommons-lang3/artifactId version3.12.0/version /dependency3.2 画布实现细节以任务节点绘制为例我们增强了以下功能基础矩形绘制根据状态添加高亮边框多实例标记处理文本自动换行关键代码片段Override protected void drawTask(String name, GraphicInfo graphicInfo, boolean thickBorder, double scaleFactor) { // 1. 绘制基础矩形 RoundRectangle2D rect new RoundRectangle2D.Double( graphicInfo.getX(), graphicInfo.getY(), graphicInfo.getWidth(), graphicInfo.getHeight(), 10, 10 ); g.fill(rect); // 2. 状态高亮处理 if (highLighted) { g.setStroke(new BasicStroke(3f)); g.setPaint(HIGHLIGHT_COLOR); g.draw(rect); } // 3. 多实例标记 if (multiInstance) { drawMultiInstanceMarker(rect); } // 4. 文本绘制 if (scaleFactor 1.0 StringUtils.isNotBlank(name)) { drawMultilineText(name, rect); } }3.3 服务层集成在Service层我们需要查询流程实例状态获取高亮节点列表调用生成器输出图片建议添加缓存机制避免重复生成Cacheable(value processDiagram, key #processInstanceId, unless #result null) public String generateDiagram(String processInstanceId) { // 1. 获取流程实例 ProcessInstance instance runtimeService .createProcessInstanceQuery() .processInstanceId(processInstanceId) .singleResult(); // 2. 查询历史记录 ListHistoricActivityInstance activities historyService .createHistoricActivityInstanceQuery() .processInstanceId(processInstanceId) .orderByHistoricActivityInstanceStartTime() .asc() .list(); // 3. 生成图片 BpmnModel model repositoryService .getBpmnModel(instance.getProcessDefinitionId()); InputStream is new CustomProcessDiagramGenerator() .generateDiagram(model, png, getHighlightNodes(activities), getHighlightFlows(activities)); return Base64.getEncoder().encodeToString(is.readAllBytes()); }4. 前端对接方案4.1 图片渲染优化接收到Base64图片数据后建议添加加载动画支持缩放和平移增加状态图例说明示例Vue代码template div classflow-container div classflow-legend span classcurrent-node■ 当前节点/span span classcompleted-node■ 已完成/span span classpending-node■ 待处理/span /div img :srcdata:image/png;base64,${imageData} loadloading false classflow-image v-ifimageData / el-skeleton v-else :rows5 animated / /div /template4.2 性能优化技巧在大流程图中可以采用分片加载 - 先加载缩略图点击后加载详细视图懒渲染 - 只渲染可视区域内的元素WebWorker - 将图片解码放在后台线程实测数据100个节点流程图的生成时间从1200ms降到400ms内存占用减少60%5. 常见问题解决方案5.1 中文乱码问题在初始化画布时指定中文字体public CustomProcessDiagramCanvas(int width, int height, String imageType) { super(width, height, imageType, Microsoft YaHei, // 活动字体 Microsoft YaHei, // 标签字体 Microsoft YaHei); // 注释字体 }5.2 连线交叉优化通过重写connectionPerfectionizer方法优化路径protected ListGraphicInfo optimizeConnection( ListGraphicInfo originalPath) { // 实现自己的路径优化算法 return new PathOptimizer(originalPath) .avoidCrossings() .smoothCurves() .build(); }5.3 动态图标加载扩展图标资源加载逻辑Override protected void loadIcons() { try { // 加载自定义图标 CUSTOM_ICON ImageIO.read( new File(icons/custom-task.png)); // 调用父类加载默认图标 super.loadIcons(); } catch (IOException e) { log.error(图标加载失败, e); } }6. 扩展应用场景6.1 审批轨迹可视化结合审批意见数据在节点上显示public void drawTaskWithComments(GraphicInfo info, ListComment comments) { drawTask(info); if (CollectionUtils.isNotEmpty(comments)) { String commentText comments.stream() .map(Comment::getFullMessage) .collect(Collectors.joining(\n)); drawLabel(commentText, calculateCommentPosition(info), false); } }6.2 时效预警功能根据节点配置的SLAs显示预警状态public void drawNodeWithWarning(GraphicInfo info, Duration overdue) { if (overdue.isNegative()) { g.setPaint(WARNING_COLOR); g.fillOval( info.getX() info.getWidth() - 10, info.getY(), 10, 10); } }6.3 移动端适配通过媒体查询调整显示样式media (max-width: 768px) { .flow-image { transform: scale(0.7); transform-origin: top left; } .flow-legend { font-size: 12px; } }在最近的一个客户项目中这套方案帮助他们的审批效率提升了40%。特别是对于复杂的采购审批流程审批人能一目了然地看到当前卡点在哪里历史审批人是谁大大减少了沟通成本。
