基于Camunda 7 Spring Boot的流程实例进度可视化需求（REST API方式）

一、优先方案：基于原生REST API组合实现 #

Camunda 7 原生没有直接返回带轨迹标记的流程图的REST接口，但可以通过组合多个接口数据，在前端完成标记渲染，完全满足需求：

• 获取基础流程SVG
  调用/engine-rest/process-definition/key/{key}/diagram接口，拿到对应流程定义的原始SVG图，这是可视化的基础载体。

• 获取流程实例执行数据
  调用以下接口收集需要标记的节点和路径信息：

  1. 已完成活动：调用/engine-rest/process-instance/{id}/activity-instances，从返回结果中筛选completed: true的活动ID，这些是已经执行完毕的节点。
  2. 当前活跃节点：同样从上述接口中筛选completed: false的活动ID，或者直接调用/engine-rest/process-instance/{id}/active-activities快速获取当前正在执行的节点。
  3. 已执行序列流：通过/engine-rest/history/activity-instance接口，按流程实例ID筛选历史活动记录，通过previousActivityInstanceId字段关联前后活动，推导已走过的连线；也可以直接基于已完成节点的执行顺序，匹配SVG中对应的序列流ID。

• 前端渲染标记
  原生导出的SVG中，每个活动节点、序列流的ID与Camunda流程定义中的ID完全对应。前端可以通过JS操作SVG DOM，给对应元素添加样式：

  • 已完成节点：添加灰色填充（如fill: #e0e0e0）
  • 当前活跃节点：添加高亮样式（如fill: #a5d6a7; stroke: #2e7d32; stroke-width: 2）
  • 已执行序列流：添加加粗变色样式（如stroke: #2e7d32; stroke-width: 2）

二、进阶方案：扩展REST API（引擎插件） #

如果希望后端直接返回带标记的SVG，无需前端处理，可以通过Camunda引擎插件扩展自定义REST接口：

1. 编写引擎插件
   实现ProcessEnginePlugin接口，注册自定义的REST资源类，在资源类中实现标记SVG的逻辑。

2. 核心逻辑实现

   • 通过RepositoryService获取流程定义的原始SVG流
   • 通过RuntimeService和HistoryService获取流程实例的活跃节点、已完成节点数据
   • 使用SVG操作库（如Apache Batik）修改SVG，给对应元素添加标记样式
   • 将修改后的SVG作为响应返回

核心代码片段 #

@Path("/process-instance/{id}/activity-diagram")
public class MarkedProcessDiagramResource {

    @Inject
    private RepositoryService repositoryService;
    @Inject
    private RuntimeService runtimeService;
    @Inject
    private HistoryService historyService;

    @GET
    @Produces(MediaType.IMAGE_SVG_XML)
    public Response getMarkedDiagram(@PathParam("id") String processInstanceId) {
        // 查询流程实例
        ProcessInstance instance = runtimeService.createProcessInstanceQuery()
                .processInstanceId(processInstanceId)
                .singleResult();
        if (instance == null) {
            return Response.status(Response.Status.NOT_FOUND).build();
        }

        // 获取原始SVG流
        InputStream rawSvgStream = repositoryService.getProcessDiagram(instance.getProcessDefinitionId());

        // 收集需标记的活动ID
        List<String> completedActivityIds = historyService.createHistoricActivityInstanceQuery()
                .processInstanceId(processInstanceId)
                .finished()
                .list()
                .stream()
                .map(HistoricActivityInstance::getActivityId)
                .collect(Collectors.toList());
        List<String> activeActivityIds = runtimeService.getActiveActivityIds(processInstanceId);

        // 使用Apache Batik修改SVG，添加标记样式
        // 示例逻辑：遍历SVG元素，匹配ID后添加对应style
        // 此处省略Batik具体操作代码，核心是操作SVG DOM元素的样式属性

        return Response.ok(modifiedSvgStream).build();
    }
}

3. 注册插件
   在Spring Boot的application.yaml中配置插件类路径：

   camunda:
     bpm:
       plugin:
         classes: com.yourpackage.MarkedProcessDiagramPlugin
   

三、关键注意事项 #

• SVG ID匹配：确保BPMN导出的SVG中，活动、序列流的ID与Camunda引擎中的ID一致（默认导出的SVG符合该规则）
• 权限控制：自定义REST接口需继承Camunda REST的权限体系，避免未授权访问
• 性能优化：高频场景下可缓存已标记的SVG，或优化SVG修改逻辑减少开销

内容的提问来源于stack exchange，提问作者RuanSama