关于bpmn.js工作流**非NPM**方式使用的介绍
套用官方的一句话,使用bpmn.js,一步一步来,嘿嘿。
BPMN.js介绍
bnmp.js是一个BNPM2.0渲染工具箱和web建模器,我们能够很简单的嵌入BPMN2.0的图标到到我们的浏览器器里面(不需要借助后端)。
bpmn.js的引入
1.通过npm的方式引入,非常简单,参考官网http://bpmn.io/toolkit/bpmn-js/就能非常简单的搭建。
2.通过本地预打包的方式
首先就是引入必要的JS文件。bpmn-modeler.min.js(可以去官方例子找,下载到本地)
加载必要的css文件,diagram-js.css,bpmn-embedded.css(去官方例子找,下载到本地)
bpmn.js的容器
因为通过可视化的方式,因此需要添加一个包含元素渲染图表到我们的浏览器里面
<div id=“canvas”></div>
实例
通过JS实例,在浏览器上面实例一个基本的工作流。
<script>
// the diagram you are going to display