BPMNJS 在原生HTML中的引入与使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BPMN JS Example</title>
<!-- 引入bpmn-js样式 -->
<link rel="stylesheet" href="https://unpkg.com/bpmn-js/dist/assets/diagram-js.css" />
<link rel="stylesheet" href="https://unpkg.com/bpmn-js/dist/assets/bpmn-font/css/bpmn.css" />
<style>
/* 定义SVG容器的样式 */
.container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 定义SVG容器 -->
<div id="canvas" class="container"></div>
<!-- 引入bpmn-js库 -->
<script src="https://unpkg.com/bpmn-js/dist/bpmn-modeler.development.js"></script>
<script>
var bpmnJS = new BpmnJS({
container: '#canvas'
});
bpmnJS.importXml(bpmnXml, function(err) {
if (err) {
console.error('Could not import BPMN 2.0 diagram', err);
} else {
console.log('BPMN 2.0 diagram successfully imported');
}
});
</script>
</body>
</html>这段代码展示了如何在原生HTML中引入并使用BPMN JS（Business Process Model and Notation JS）库来渲染BPMN 2.0图形。首先，我们通过<link>和<script>标签引入了BPMN JS的样式和库。然后，我们创建了一个用于渲染图形的div容器。最后，我们初始化了BpmnJS类的一个实例，并通过importXml方法加载了BPMN 2.0 XML图表。这个例子简单明了地展示了如何将BPMN JS集成到Web项目中。
评论已关闭