spring boot （十三）整合Activiti工作流（四）集成Diagram Viewer跟踪流程

本文介绍如何在Activiti 5.22.0中配置流程跟踪功能，包括引入依赖、部署diagram-viewer并修改相关方法以实现审批流跟踪。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#前言
activiti 5.22.0

一、引入依赖

如果需要用到Diagram Viewer跟踪流，那么需要引入下面的依赖

<dependency>
  <groupId>org.activiti</groupId>
    <artifactId>activiti-diagram-rest</artifactId>
    <version>${activiti.version}</version>
</dependency>

二、引diagram-viewer

下载activiti 5.22.0的源码，在war包下找到diagram-viewer文件夹，粘贴到你的static目录下，如下：
这里写图片描述

三、修改需要查看审批跟踪流的方法

我们需要访问审批流的链接如下：
http://localhost:8080/static/diagram-viewer/index.html?processDefinitionId={processDefinitionId}&processInstanceId={processInstanceId}，参数分别是流程定义id，和审批流Id
打开diagram-viewer/index.html页面找到如下js修改

ActivitiRest.options = {
    processInstanceHighLightsUrl: "/process-instance/{processInstanceId}/highlights?callback=?",
    processDefinitionUrl:  "/process-definition/{processDefinitionId}/diagram-layout?callback=?",
    processDefinitionByKeyUrl: "/process-definition/{processDefinitionKey}/diagram-layout?callback=?"
  };

这3个Url地址分别是activiti-diagram-restjar中的3个service访问方法，如下图
这里写图片描述
当访问diagram-viewer/index.html页面时就会请求这3个服务获取审批流信息，返回json数据。

访问审批流跟踪流

访问某个审批流程的踪流程，找到这个审批流Id和流程定义Id，组成如下链接：

http://localhost:8080/static/diagram-viewer/index.html?processDefinitionId=leave:1:42512&processInstanceId=50001

访问查看页面加载报错，右键查看浏览器console,报错：

Get diagram layout[leave:1:42512] failure: parsererror

因为ActivitiRest.js里面的ajax请求，返回数据类型都是jsop，把所有dataType是jsop的地方注释，再访问，加载完成，console信息如下：
这里写图片描述
页面效果如下：