在HTML中使用
<!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>运维 - BPMNJS</title>
<!-- 引入BPMN-JS的CSS文件 -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/assets/diagram-js.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/assets/bpmn-font/css/bpmn.css" /></head>
<body>
<div id="canvas" style="height:80vh;"></div>
<!-- 引入BPMN-JS的JS文件 -->
<script src="https://unpkg.com/[email protected]/dist/bpmn-modeler.development.js"></script>
<script>
var diagramXML = `<?xml version="1.0" encoding="UTF-8"?><bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"><bpmn2:process id="Process_1" isExecutable="false"> <bpmn2:startEvent id="StartEvent_1" /></bpmn2:process><bpmndi:BPMNDiagram id="BPMNDiagram_1"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1"> <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1"> <dc:Bounds x="192" y="82" width="36" height="36" /> </bpmndi:BPMNShape> </bpmndi:BPMNPlane></bpmndi:BPMNDiagram></bpmn2:definitions>`
var bpmnModeler = new BpmnJS({
container: '#canvas'
});
bpmnModeler.importXML(diagramXML, function(err) {
if (err) {
return console.error('failed to load diagram', err);
}
});
</script></body>
</html>
样式图片
在Vue中使用
安装Bpmn-js
npm install bpmn-js --save
引入bpmn-js 的CSS,修改 src/main.js 文件
import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css' // 样式
编写bpmn-model.vue 文件
<template>
<div class="containers">
<div class="canvas" ref="canvas"></div>
</div>
</template>
<script>
import BpmnModeler from 'bpmn-js/lib/Modeler'
//import { CustomModeler } from '../components/nmms/customBpmn'
import { xmlStr } from '../mock/xmlStr'
export default {
name: 'ops-coffee',
mounted () {
this.init()
},
data () {
return {
bpmnModeler: null,
container: null,
canvas: null
}
},
methods: {
init () {
const canvas = this.$refs.canvas
this.bpmnModeler = new BpmnModeler ({
container: canvas
})
this.createNewDiagram()
},
createNewDiagram () {
try {
this.bpmnModeler.importXML(xmlStr)
} catch (err) {
console.log(err.message, err.warnings)
}
}
}
}
</script>
<style scoped>
.containers {
width: 100%;
height: calc(100vh - 82px);
}
.canvas {
width: 100%;
height: 100%;
}
</style>
vue文件中引入了xmlStr，用来存放bpmn的xml数据，创建src/mock/xmlStr.js文件
export var xmlStr = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
<bpmn2:process id="Process_1" isExecutable="false">
<bpmn2:startEvent id="StartEvent_1" />
</bpmn2:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
<dc:Bounds x="192" y="82" width="36" height="36" />
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn2:definitions>`;
最后为.vue 文件添加路由
{
path: 'dddd',
name: 'dddd',
component: () => import('../../views/nmms/bpmn-modeler.vue'),
meta: { isFullScreen: true, keepAlive: false, title: '流程模板管理' }
},
官方网站：https://bpmn.io/
本文参考地址：https://zhuanlan.zhihu.com/p/427078485
点击查看代码 标签：canvas,dist,bpmn,Bpmn,基础,js,import,css From： https://www.cnblogs.com/mzqls/p/17654217.html