Spring Boot + Activiti 在浏览器显示工作流图

本篇承接上一篇：
Spring Boot + Activiti 工作流框架搭建

Activiti 版本是：7.1.0.M6

总概

在Activiti 7 版本中，导出流程图的功能独立成一个独立的依赖包， 默认的导出格式是SVG的图片。所以，导出流程图的功能开发主要是3步：

1. 导入图片导出的依赖包
2. 定义导出图片需要的Bean
3. 编写导出代码

1. 导入图片导出的依赖包

		<dependency>
		    <groupId>org.activitigroupId>
		    <artifactId>activiti-image-generatorartifactId>
		    <version>7.1.0.M6version>
		dependency>	

这里保持image-generator的版本和Activiti的版本一致， 在pom.xml中可以使用版本变量。

2. 定义导出图片需要的Bean

Activiti 默认需要的服务，比如runtimeService、taskService会自动配置， 但是图片导入的Bean需要自行配置，方式是增加一个配置类， 类似：

@Configuration
public class ActivitiProcessConfig {
     

	@Bean
	public ProcessDiagramGenerator processDiagramGenerator() {
     
		return new DefaultProcessDiagramGenerator();
	}
}

3. 图片导出代码

使用HttpServletResponse 对象，直接输出SVG的图片代码， 这样在浏览器中就直接可以看到流程图。

	@RequestMapping("/activiti/exportImage")
	public void exportImage(HttpServletResponse response, String processInstanceId) {
     
		ProcessInstance processInstance = runtimeService.createProcessInstanceQuery()
				.processInstanceId(processInstanceId).singleResult();
		String processDefinitionId = processInstance.getProcessDefinitionId();
		BpmnModel bpmnModel = repositoryService.getBpmnModel(processDefinitionId);
		HistoricActivityInstanceQuery historyInstanceQuery = historyService.createHistoricActivityInstanceQuery()
				.processInstanceId(processInstanceId);

		response.setContentType("text/html;charset=utf-8");
		// 查询历史节点
		List<HistoricActivityInstance> historicActivityInstanceList = historyInstanceQuery
				.orderByHistoricActivityInstanceStartTime().asc().list();
		List<String> executedActivityIdList = historicActivityInstanceList.stream().map(item -> item.getActivityId())
				.collect(Collectors.toList());
		InputStream imageStream = processDiagramGenerator.generateDiagram(bpmnModel, executedActivityIdList);
		
		byte[] b = new byte[1024];
		int len;
		try {
     
			while ((len = imageStream.read(b, 0, 1024)) != -1) {
     
				response.getOutputStream().write(b, 0, len);
			}
			response.getOutputStream().flush();
		} catch (IOException e) {
     
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
      // 流关闭
			try {
     
				imageStream.close();
			} catch (IOException e) {
     
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}

• 需要设置Response的内容类型是： text/html
• SVG图片以输入流方式响应到浏览器

显示效果如下：

住： 中文可能有乱码。需要额外做相关设定。