邢台规划局网站建设,企业展厅设计制作,长尾关键词排名系统,wordpress传上七牛BPMN#xff08;Business Process Modeling Notation#xff09;是由业务流程管理倡议组织BPMI#xff08;The Business Process Management Initiative#xff09;开发的一套标准的业务流程建模符号规范。其目的是为用户提供一套容易理解的标准符号#xff0c;这些符号作…BPMNBusiness Process Modeling Notation是由业务流程管理倡议组织BPMIThe Business Process Management Initiative开发的一套标准的业务流程建模符号规范。其目的是为用户提供一套容易理解的标准符号这些符号作为BPMN的基础元素将业务流程建模简单化、图形化将复杂的建模过程视觉化让业务建模者、业务实施人员、管理监督人员对BPMN描述的业务流程都有一个更加清晰明了的了解。
BPMN的主要意义在于其作为一个标准业务相关者都按照这个标准来绘制业务流程图能够减少各方对于流程图的理解歧义从而达到高效协作的目的
BPMN包含以下四类基本元素
流对象Flow Objects包括事件、活动、网关是BPMN中的核心元素连接对象Connecting Objects包括顺序流、消息流、关联泳道Swimlanes包括池和道两种类型人工信息Artifacts包括数据对象、组、注释
bpmn-js就是基于BPMN标准实现的一套渲染工具包和web建模器以下系列文章将会介绍我的使用过程
基本使用
bpmn-js的使用非常简单我们可以在VUE项目中使用或者是直接在HTML文件中引入JS/CSS资源文件就像下边这样
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1, user-scalableno/meta http-equivX-UA-Compatible contentIEedge,chrome1 /title运维咖啡吧 - BPMNJS/title!-- 引入BPMN-JS的CSS文件 --link relstylesheet hrefhttps://unpkg.com/bpmn-js7.3.0/dist/assets/diagram-js.css /link relstylesheet hrefhttps://unpkg.com/bpmn-js7.3.0/dist/assets/bpmn-font/css/bpmn.css /
/headbodydiv idcanvas styleheight:80vh;/div!-- 引入BPMN-JS的JS文件 --script srchttps://unpkg.com/bpmn-js7.3.0/dist/bpmn-modeler.development.js/scriptscriptvar diagramXML ?xml version1.0 encodingUTF-8?
bpmn2:definitions xmlns:xsihttp://www.w3.org/2001/XMLSchema-instance xmlns:bpmn2http://www.omg.org/spec/BPMN/20100524/MODEL xmlns:bpmndihttp://www.omg.org/spec/BPMN/20100524/DI xmlns:dchttp://www.omg.org/spec/DD/20100524/DC idsample-diagram targetNamespacehttp://bpmn.io/schema/bpmn xsi:schemaLocationhttp://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd
bpmn2:process idProcess_1 isExecutablefalsebpmn2:startEvent idStartEvent_1 /
/bpmn2:process
bpmndi:BPMNDiagram idBPMNDiagram_1bpmndi:BPMNPlane idBPMNPlane_1 bpmnElementProcess_1bpmndi:BPMNShape id_BPMNShape_StartEvent_2 bpmnElementStartEvent_1dc:Bounds x192 y82 width36 height36 //bpmndi:BPMNShape/bpmndi:BPMNPlane
/bpmndi:BPMNDiagram
/bpmn2:definitionsvar bpmnModeler new BpmnJS({container: #canvas});bpmnModeler.importXML(diagramXML, function(err) {if (err) {return console.error(failed to load diagram, err);}});/script
/body/html
浏览器访问会出现如下一个流程编辑器可以在这里进行流程的编辑 bpmn-js有两种模式Modeler模式和Viewer模式在Modeler模式下可以对流程图进行编辑而Viewer模式则不能仅作为展示用
viewer模式相对简单无需引入CSS文件只需引入一个JS即可
script srchttps://unpkg.com/bpmn-js7.3.0/dist/bpmn-viewer.development.js/script
通常在流程执行阶段的展示用Viewer模式配合节点颜色设置让用户清晰的看到当前流程的执行过程和状态 VUE中使用
更多的时候我们可能会在VUE项目中使用为了展示清晰这里先通过vue-cli脚手架创建一个vue项目
vue create ops-coffee-bpmn
cd ops-coffee-bpmn
原始的目录结构大概是这个样子的
安装bpmn-js
npm install bpmn-js --save
安装完成后就可以开始使用bpmn-js了首先要引入bpmn-js的CSS修改src/main.js文件
import Vue from vue;
import App from ./App.vue;
import router from ./router;
import store from ./store;Vue.config.productionTip false;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;new Vue({router,store,render: h h(App)
}).$mount(#app);
然后编写bpmn-modeler.vue文件文件位于src/views/bpmn-modeler.vue
templatediv classcontainersdiv classcanvas refcanvas/div/div
/templatescript
import BpmnModeler from bpmn-js/lib/Modeler;
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 {const result this.bpmnModeler.importXML(xmlStr);const { warnings } result;console.log(warnings);} catch (err) {console.log(err.message, err.warnings);}}}
};
/scriptstyle scoped
.containers {width: 100%;height: calc(100vh - 82px);
}
.canvas {width: 100%;height: 100%;
}
/style
这里引入了一个外部变量xmlStr这个变量主要用来存放BPMN的XML数据这里创建对应的src/mock/xmlStr.js文件
export var xmlStr ?xml version1.0 encodingUTF-8?
bpmn2:definitions xmlns:xsihttp://www.w3.org/2001/XMLSchema-instance xmlns:bpmn2http://www.omg.org/spec/BPMN/20100524/MODEL xmlns:bpmndihttp://www.omg.org/spec/BPMN/20100524/DI xmlns:dchttp://www.omg.org/spec/DD/20100524/DC idsample-diagram targetNamespacehttp://bpmn.io/schema/bpmn xsi:schemaLocationhttp://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd
bpmn2:process idProcess_1 isExecutablefalsebpmn2:startEvent idStartEvent_1 /
/bpmn2:process
bpmndi:BPMNDiagram idBPMNDiagram_1bpmndi:BPMNPlane idBPMNPlane_1 bpmnElementProcess_1bpmndi:BPMNShape id_BPMNShape_StartEvent_2 bpmnElementStartEvent_1dc:Bounds x192 y82 width36 height36 //bpmndi:BPMNShape/bpmndi:BPMNPlane
/bpmndi:BPMNDiagram
/bpmn2:definitions;
最后修改src/router/index.js文件添加路由
const routes [{path: /,name: 编辑模式,component: () import(../views/bpmn-modeler.vue)},
];
然后访问页面就可看到流程编辑器进行流程编辑等操作 以上为Modeler模式如果想用Viewer模式的话也非常简单仅需将引入的Modeler改为Viewer即可
import BpmnViewer from bpmn-js/lib/Viewer;
概念名词
在使用bpmn-js的过程中经常会出现一些名词了解他们有利于我们后续的使用和开发 画布中的元素叫elementelement包含连线connection和形状shape流程图是由shape和connection组成的可以通过拖动左侧工具栏Palette来创建元素点击元素会出现ContextPad工具箱不同的元素会出现不同的ContextPad可以通过ContextPad工具创建shape或connection也可以修改元素type添加注解以及删除元素等操作
写在最后
接触bpmn-js不久边学边写文章难免出错各位多多包含。想要打造一个好用的适合自己的流程编辑器需要了解的内容比较多bpmn-js会分多篇文章来介绍这是本系列的第一篇下一篇介绍bpmn-js的数据保存等内容欢迎关注
bpmn.js插件源码 GitHub - bpmn-io/bpmn-js: A BPMN 2.0 rendering toolkit and web modeler.
Demo源码地址https://github.com/Mrs-Bean/bpmn-src.git
