Activiti可视化页面在2019年activiti5后就停止维护了，所以我们可以下载5.x的activiti官方demo代码。提取其前端代码，放到Activiti7项目里。

1. 下载Activiti5.X的官方DEMO

image.png

image.png

2.提取出Activiti Modeler的前端代码

image.png

3. Activiti7项目添加前端代码配套的服务端文件

Activiti-5.22.0 源码 把5.22.0源码里面的「activiti-modeler」里的三个文件，复制到我们「Activiti7」项目的控制层包内

image.png

image.png

4. Activiti7项目添加Activiti Modeler的Maven引用

注意，若添加activiti-modeler依赖，会抛Spring Bean名称重复ConflictingBeanDefinitionException

<dependency>
    <groupId>org.apache.xmlgraphics</groupId>
    <artifactId>batik-transcoder</artifactId>
    <version>1.7</version>
</dependency>
<dependency>
    <groupId>org.apache.xmlgraphics</groupId>
    <artifactId>batik-codec</artifactId>
    <version>1.7</version>
</dependency>
<dependency>
    <groupId>org.activiti</groupId>
    <artifactId>activiti-json-converter</artifactId>
    <version>6.0.0</version>
</dependency>

5. 启动Actitivi7项目

项目启动后访问bpmn的页面：http://localhost:8080/modeler.html
Activiti7项目去除spring security功能

// 启动类排除springsecurity
@SpringBootApplication(
        exclude = {
                org.springframework.boot.autoconfigure.security.servlet.SecurityAutoConfiguration.class,
                org.springframework.boot.actuate.autoconfigure.security.servlet.ManagementWebSecurityAutoConfiguration.class
        })

image.png

6. 处理前端代码，使其可正常访问Activiti7的服务端代码

6.1 打开bpmn编辑器，处理接口报错：/activiti-explorer/service/model//json

请求404：通过服务端接口地址，可以确定是因为前端请求接口错误导致

image.png

image.png

在/public/editor-app/app-cfg.js文件中修改请求的地址为「Activiti7项目对应的控制层」
修改后重启项目，看到接口访问地址正确

请求404：是因为没有传{modelId}

image.png

image.png

6.2 生成一个{modelId}
6.2.1 测试类Code：

package com.lpp.demo.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.node.ObjectNode;
import org.activiti.editor.constants.ModelDataJsonConstants;
import org.activiti.engine.RepositoryService;
import org.activiti.engine.repository.Model;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@Controller
@RequestMapping("/model")
public class ModelTest {
    @Autowired
    RepositoryService repositoryService;

    @RequestMapping("/create")
    public void createModel(HttpServletRequest request, HttpServletResponse response){
        try{
            String modelName = "modelName";
            String modelKey = "modelKey";
            String description = "description";

            ObjectMapper objectMapper = new ObjectMapper();
            ObjectNode editorNode = objectMapper.createObjectNode();
            editorNode.put("id", "canvas");
            editorNode.put("resourceId", "canvas");
            ObjectNode stencilSetNode = objectMapper.createObjectNode();
            stencilSetNode.put("namespace", "http://b3mn.org/stencilset/bpmn2.0#");
            editorNode.put("stencilset", stencilSetNode);
            Model modelData = repositoryService.newModel();

            ObjectNode modelObjectNode = objectMapper.createObjectNode();
            modelObjectNode.put(ModelDataJsonConstants.MODEL_NAME, modelName);
            modelObjectNode.put(ModelDataJsonConstants.MODEL_REVISION, 1);
            modelObjectNode.put(ModelDataJsonConstants.MODEL_DESCRIPTION, description);
            modelData.setMetaInfo(modelObjectNode.toString());
            modelData.setName(modelName);
            modelData.setKey(modelKey);

            //保存模型
            repositoryService.saveModel(modelData);
            repositoryService.addModelEditorSource(modelData.getId(), editorNode.toString().getBytes("utf-8"));
            response.sendRedirect(request.getContextPath() + "/modeler.html?modelId=" + modelData.getId());
        }catch (Exception e){
        }
    }

}

6.2.2 访问localhost:8080/model/create

image.png

6.3 处理接口报错：/editor/stencilset

可以在源码中找到该文件[ stencilset.json]，放在Activiti7项目的resource即可

image.png

image.png

image.png

6.4 保存Model，处理接口报错：/model/{}/save

image.png

image.png

6.4.1 修改接口服务方法（入参格式变更）

@RequestMapping(value = "/model/{modelId}/save", method = RequestMethod.PUT)
@ResponseStatus(value = HttpStatus.OK)
public void saveModel(@PathVariable String modelId, String name, String description, String json_xml, String svg_xml) {
    try {

        Model model = repositoryService.getModel(modelId);

        ObjectNode modelJson = (ObjectNode) objectMapper.readTree(model.getMetaInfo());

        modelJson.put("name", name);
        modelJson.put("description", description);
        model.setMetaInfo(modelJson.toString());
        model.setName(name);

        repositoryService.saveModel(model);

        repositoryService.addModelEditorSource(model.getId(), json_xml.getBytes("utf-8"));

        InputStream svgStream = new ByteArrayInputStream(svg_xml.getBytes("utf-8"));
        TranscoderInput input = new TranscoderInput(svgStream);

        PNGTranscoder transcoder = new PNGTranscoder();
        // Setup output
        ByteArrayOutputStream outStream = new ByteArrayOutputStream();
        TranscoderOutput output = new TranscoderOutput(outStream);

        // Do the transformation
        transcoder.transcode(input, output);
        final byte[] result = outStream.toByteArray();
        repositoryService.addModelEditorSourceExtra(model.getId(), result);
        outStream.close();

    } catch (Exception e) {
        LOGGER.error("Error saving model", e);
        throw new ActivitiException("Error saving model", e);
    }
}

6.5 验证集成完成

image.png