bpmn.js基础

伊泽先生丿瑞尔

已于 2023-07-12 14:18:09 修改

阅读量325

点赞数

文章标签： javascript

于 2023-07-12 14:04:06 首次发布

本文链接：https://blog.csdn.net/xrs151/article/details/131674660

版权

bpmn.js基础

什么是bpmn.js
bpmn.js基本的使用
- bpmn.js最简单的一种使用
- 使用npm安装bpmn.js

什么是bpmn.js

bpmn.js是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成.

bpmn.js基本的使用

为了方便大家对后面的讲解有一个大概认识, 我们先来看一下使用bpmn.js画图都有哪些内容:
在这里插入图片描述

bpmn.js最简单的一种使用

我们可以直接使用CDN将bpmn.js引入到代码中使用:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BPMNJS</title>
    <!--CDN加速-->
    <script src="https://unpkg.com/bpmn-js@6.0.2/dist/bpmn-viewer.development.js"></script>  		 <!--引入一个简单的xml字符串-->
    <script src="./xmlStr.js"></script>
    <style>
        #canvas {
            height: 400px;
        }
    </style>
</head>
 
<body>
    <div id="canvas"></div>
    <script>
        var bpmnJS = new BpmnJS({
            container: '#canvas'
        });
        bpmnJS.importXML(xmlStr, function(err) {
            if (!err) {
                console.log('success!');
                // 让图能自适应屏幕
                var canvas = bpmnJS.get('canvas')
                canvas.zoom('fit-viewport')
            } else {
                console.log('something went wrong:', err);
            }
        });
    </script>
</body>
 
</html>

如上面的案例所示, 我们使用CDN加速直接引入bpmn.js, 然后本地指定一个容器(也就是id为canvas的那个div), 接着用bpmn.js提供的方法importXML就可以解析xml字符串生成对应的工作流图了.

打开页面可以看到
在这里插入图片描述

使用npm安装bpmn.js

上面提供的使用方式是一种最基本的方式,仅仅是将图展示出来,不能自己绘画也不能操作. 所以在工作中使用更多的还是采用npm安装到项目中使用. 我们可以使用以下命令进行安装:

npm install --save bpmn-js

在应用程序中使用:

import BpmnViewer from 'bpmn-js';
import testDiagram from './test-diagram.bpmn';
 
var viewer = new BpmnViewer({
  container: '#canvas'
});
 
viewer.importXML(testDiagram, function(err) {
  if (!err) {
    console.log('success!');
    viewer.get('canvas').zoom('fit-viewport');
  } else {
    console.log('something went wrong:', err);
  }
});