0

I use bpmn-js@11.5.0 to display the process diagram, the process xml file got by backend restful interface(flowable@6.8.0) using process definition id.

backend code

public String getProcessDefinitionBpmnXML(String id) {
        BpmnModel bpmnModel = repositoryService.getBpmnModel(id);
        if (bpmnModel == null) {
            return null;
        }
        BpmnXMLConverter converter = new BpmnXMLConverter();
        return StrUtil.utf8Str(converter.convertToXML(bpmnModel));
    }

vue method code

import BpmnJS from 'bpmn-js';

initBpmnModeler() {
      this.bpmnModeler && this.bpmnModeler.destroy();
      this.bpmnModeler = new BpmnJS({
        container: this.$refs["bpmn-canvas"],
        height: 800,
        bpmnRenderer: {
        },
        additionalModules:[
          MoveCanvasModule,//移动整个画布
        ],
      })

async createNewDiagram(xml) {
      // 将字符串转换成图显示出来
      let newId = `Process_${new Date().getTime()}`;
      let newName = `业务流程_${new Date().getTime()}`;
      let xmlString = xml || DefaultEmptyXML(newId, newName, this.prefix);
      try {
        let { warnings } = await this.bpmnModeler.importXML(xmlString);
        if (warnings && warnings.length) {
          warnings.forEach(warn => console.warn(warn));
        }
        // 高亮流程图
        await this.highlightDiagram();
        const canvas = this.bpmnModeler.get('canvas');
        canvas.zoom("fit-viewport", "auto");
      } catch (e) {
        console.error(e);
        // console.error(`[Process Designer Warn]: ${e?.message || e}`);
      }

the right diagram: nomal diagram

the problem diagram: problem diagram

i want to know why and how to deal with it, Whether it is a version problem?

0 Answers0