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?