1、直接部署流程文件

这种方式部署后引擎会自动生成流程图，存在的问题：在Activiti Designer里面设计与自动生成的流程图

坐标不一致

，还有

中文乱码

问题(可以通过添加字体解决)和

Flow上文字不显示

或者坐标错位等问题。   解决乱码问题可以在引擎配置中添加：

复制代码

获取图片的代码如下(完整代码在kft-activiti-demo项目的ActivitiController.java中)

InputStream imageStream = ProcessDiagramGenerator.generateDiagram(bpmnModel, "png");

复制代码

2、一劳永逸的部署方式——Zip

一般开发人员设计流程会选择使用Activiti Designer，这个插件会在设计流程时自动创建PNG格式的图片，图片中的组件坐标与bpmn文件里面的坐标一致，部署时可以

把bpmn文件和png图片文件打包成Zip文件部署

，这种方式引擎

不会自动生成流程图

，因为zip包里面存在了同名的图片文件。

所以推荐大家选择这种方式部署，一劳永逸，没有坐标错位问题，流程跟踪也方便。

读取流程图的代码：

String resourceName = processDefinition.getDiagramResourceName();

resourceAsStream = repositoryService.getResourceAsStream(processDefinition.getDeploymentId(), resourceName);

byte[] b = new byte[1024];

int len = -1;

while ((len = resourceAsStream.read(b, 0, 1024)) != -1) {

response.getOutputStream().write(b, 0, len);

}

复制代码

----------------

流程跟踪

----------------

与部署方式对应的流程跟踪方式也有集中，在kft-activiti-demo中分别对三种方式做了演示(demo里面有三个按钮可以切换不同的跟踪方式)。

1、通过引擎生成png图片，并标记当前节点

List activeActivityIds = runtimeService.getActiveActivityIds(executionId);

InputStream imageStream = ProcessDiagramGenerator.generateDiagram(bpmnModel, "png", activeActivityIds);

// 输出资源内容到相应对象

byte[] b = new byte[1024];

int len;

while ((len = imageStream.read(b, 0, 1024)) != -1) {

response.getOutputStream().write(b, 0, len);

}

复制代码

得到的图片是引擎自动生成的，并把当前节点用红色边框标记出来，弊端和直接部署流程文件生成的图片问题一样。

2、读取图片后通过前段Javascript和Css配合跟踪

这种方式依赖于zip部署方式，因为这种方式的流程图坐标与bpmn文件里面的坐标一致，所以可以根据坐标分析在前段用javascript和css配合动态标记当前节点，这种方式在优势灵活性很大，可以显示你要展示的所以信息，因为完全就是一堆信息点汇合起来的跟踪功能。

需要后端提供数据给前端分析，例如有哪些Activity分别及其坐标、高度、宽度、是否当前节点等信息，json数据结构如下。

流程图跟踪示例：

3、通过Diagram Viewer跟踪(完全Javascript画图)

这是官方提供的一个Javascript跟踪工具，使用方便，简单配置就可以使用，兼容各种浏览器，并且可以自己扩展；参考: