bpmn基础使用（一）

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

基本使用

npm install --save bpmn-js

//mian.js
// 以下为bpmn工作流绘图工具的样式
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'//home.vue
import BpmnViewer from 'bpmn-js';
var viewer = new BpmnViewer({container: '#canvas'
});

基础API

//创建空白流程图
this.bpmnModeler.createDiagram();
// 将图形dom挂载到目标节点
this.bpmnModeler.attachTo(parentNode);
// 清空
this.bpmnModeler.clear()
// 销毁
this.bpmnModeler.destroy()
// 脱离dom
this.bpmnModeler.detach()
// 获取流程定义
this.bpmnModeler.getDefinitions()
// 注销事件监听器
this.bpmnModeler.off(eventName, callback)
// 保存为svg文件，与importXML方法一样，后续会取消传入callback的方式
this.bpmnModeler.saveSVG(callback)
// 保存为xml文件，与importXML方法一样，后续会取消传入callback的方式
this.bpmnModeler.saveXML(callback);
//放大缩小视图
this.bpmnModeler.get("canvas").zoom(this.defaultZoom);

bpmn基础使用（一）相关推荐

BPMN基础元素及任务类型
01 BPMN定义 BPMN(Business Process Modeling Notation,即业务流程建模符号),是一种流程建模的通用和标准语言,用来绘制业务流程图,以便更好地让各部门之间理解 ...
BPMN - 如何绘制符合良构编排的基础BPMN？
一.什么是BPMN BPMN(Business Process Modeling Notation),是指业务流程建模与标注,包括这些图元如何组合成一个业务流程图. 二.BPMN基础本文介绍的BPM ...
BPMN 2.0 快速使用文档
目录 BPMN 使用教程 3 BPMN 基础 3 事件(Event) 3 开始事件(Start Event) 3 中间事件(Intermediate Event ) 4 结束事件(End event) ...
BPMN 2.0学习笔记 (基于Activiti实践学习笔记)
写在前面推荐学习网站:http://www.mossle.com/docs/activiti/index.html#bpmn20 摘一句: 生活就是个缓慢受锤的过程,人一天天老下去,奢望也一天天消失 ...
VISIO标准图-BPMN
BPMN,业务流程建模与标注,包括这些图元如何组合成一个业务流程图(Business Process Diagram):讨论BPMN的各种的用途,包括以何种精度来影响一个流程图中的模型:BPM ...
学习笔记之-Activiti7工作流引擎，概述，环境搭建，类关系图，使用Activiti BPMN visualizer，流程变量，组任务网关，Activiti整合Spring SpringBoot
本篇学习笔记是观看黑马程序员Activiti7视频而得 Activiti7 一.工作流介绍 1.1 概念工作流(Workflow),就是通过计算机对业务流程自动化执行管理.它主要解决的是" ...
java中bpmn流程图_Java学习之BPMN知识以及Activiti的流程部署
BPMN的介绍 Activiti项目是一项新的基于Apache许可的开源BPM平台,从基础开始构建,旨在提供支持新的BPMN 2.0标准,包括支持对象管理组(OMG),面对新技术的机遇,诸如互操作性和 ...
Flowable 6.6.0 BPMN用户指南 -10 流程实例迁移 - 10.1 简单示例
Flowable 6.6.0 用户指南相关文档下载 BPMN用户指南第一部分 - 中文PDF精编版 BPMN用户指南第二部分 - 中文PDF精编版 BPMN用户指南第三部分 - 中文PDF精编版 ...
我们的flowable改造（8）-----BPMN模型
当我们在收集flowable改造原型时,所有的代码都会涉及到bpmn模型定义.这是流程规划设计与流程引擎的结合点.业务规划人员参照bpmn规范设计执行图,工作流引擎解析bpmn模型,并对解析的结果进行 ...

bpmn基础使用（一）

基本使用

基础API

bpmn基础使用（一）相关推荐

最新文章

热门文章