springboot2.x集成activiti6.0在线流程设计器

我在网上找了很多资料都没有找到关于activiti6.0的在线流程设计器，大多数都是基于5.x的。因为6.0的源码包中没有在线设计器的资源包,因此本文使用的是activiti 5.22.0中web资源包来做的，只是依赖不一样ui一样，下面就能开始来实现一下吧。

第一步：在activiti官网下载5.22.0的源码包：https://www.activiti.org/get-started

第二步: 新建springboot项目在pom中配置如下

        
        
            org.activiti
            activiti-spring-boot-starter-basic
            6.0.0
        

        
            org.activiti
            activiti-json-converter
            6.0.0

            
                
                    org.activiti
                    activiti-bpmn-model
                
            
        
        


        

            org.apache.xmlgraphics
            batik-codec
            1.7
        
        
            org.apache.xmlgraphics
            batik-css
             1.7
        
        
            org.apache.xmlgraphics
            batik-svg-dom
            1.7
        
        
            org.apache.xmlgraphics
            batik-svggen
            1.7
        
        

数据源配置yml:(如果使用jdbc8的版本必须配置nullCatalogMeansCurrent=true，不然启动建表会报错，具体可以网上自行找答案，这里就不多说了)

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/oa?useSSL=false&nullCatalogMeansCurrent=true
    username: root
    password: 你的密码
  activiti:
    # 不自动检查resources/bpmn目录
    check-process-definitions: false 

第三步: 静态资源整合
下载完以后，解压activiti-5.22.0的包，解压wars/activiti-explorer.war，把里面的diagram-viewer、editor-app、modeler.html复制到springboot项目下的static下，这是activiti的在线设计器，modeler.html就是设计的主界面，复制resources下stencilset.json到自己的resources下。将libs下的activiti-modeler-5.22.0-sources.jar解压出来，把org\activiti\rest\editor路径下的main、model文件夹复制到springboot项目的源码路径下，里面有三个类，主要用于读取stencilset.json。

image.png

修改editor-app下的app-cfg.js，把contextRoot后面改成 ''(这个和控制器的和controller里面加的requestMapping要一致

第四步:处理bug，在上一片文章 springboot2.x集成activiti6.0就说过activiti的一个bug，就是在启动的app入口中排除 org.activiti.spring.boot.SecurityAutoConfiguration这个类

@SpringBootApplication(exclude = {SecurityAutoConfiguration.class})
public class ActivitiWebDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(ActivitiWebDemoApplication.class, args);
    }

}

第五步: 测试
运行项目访问 http://localhost:8002/editor 就会出现以下效果！

image.png

第六步: 总结
至此，activiti的web在线设计器就集成好了，如果有什么问题欢迎留言！之前一直使用图片加文字写文字，但是代码展示不好看，于是开始使用markdown来写，第一次使用markdown写文章，喜欢我的文字记得关注我哦！

项目地址: https://github.com/juzhizhang/springboot2-activiti-design