最好用的流程编辑器bpmn-js系列之基本使用

BPMN(Business Process Modeling Notation)是由业务流程管理倡议组织BPMI(The 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 lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><title>运维咖啡吧 - BPMNJS</title><!-- 引入BPMN-JS的CSS文件 --><link rel="stylesheet" href="https://unpkg.com/bpmn-js@7.3.0/dist/assets/diagram-js.css" /><link rel="stylesheet" href="https://unpkg.com/bpmn-js@7.3.0/dist/assets/bpmn-font/css/bpmn.css" />
</head><body><div id="canvas" style="height:80vh;"></div><!-- 引入BPMN-JS的JS文件 --><script src="https://unpkg.com/bpmn-js@7.3.0/dist/bpmn-modeler.development.js"></script><script>var diagramXML = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
<bpmn2:process id="Process_1" isExecutable="false"><bpmn2:startEvent id="StartEvent_1" />
</bpmn2:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1"><bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1"><bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1"><dc:Bounds x="192" y="82" width="36" height="36" /></bpmndi:BPMNShape></bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn2:definitions>`var 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 src="https://unpkg.com/bpmn-js@7.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

<template><div class="containers"><div class="canvas" ref="canvas"></div></div>
</template><script>
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);}}}
};
</script><style 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 version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
<bpmn2:process id="Process_1" isExecutable="false"><bpmn2:startEvent id="StartEvent_1" />
</bpmn2:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1"><bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1"><bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1"><dc:Bounds x="192" y="82" width="36" height="36" /></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的过程中,经常会出现一些名词,了解他们有利于我们后续的使用和开发

画布中的元素叫element,element包含连线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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/740354.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数学建模理论与实践国防科大版

目录 1.数学建模概论 2.生活中的数学建模 2.1.行走步长问题 2.2.雨中行走问题 2.3.抽奖策略 2.4.《非诚勿扰》女生的“最优选择” 3.集体决策模型 3.1.简单多数规则 3.2.Borda数规则 3.3.群体决策模型公理和阿罗定理 1.数学建模概论 1.数学模型的概念 2.数学建模的概…

前端之用html做一个用户登陆界面

用户登陆界面 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>用户注册页面</title></head> <body><form action"https://www.baidu.com" method"post">…

关于Node 中间件教程

在Node.js中&#xff0c;中间件是一种非常重要的概念&#xff0c;用于处理HTTP请求。中间件允许您在请求到达目标路由之前或之后执行某些功能。本教程旨在帮助您理解和使用Node.js中的中间件。 什么是中间件&#xff1f; 中间件是一个函数&#xff0c;可访问请求对象&#xf…

2023年全国职业院校技能大赛信息安全管理与评估

信息安全管理与评估三阶段理论 【注意事项】 1.理论测试前请仔细阅读测试系统使用说明文档&#xff0c;按提供的账号和密码登录测试系统进行测试&#xff0c;账号只限1人登录。 2.该部分答题时长包含在第三阶段比赛时长内&#xff0c;请在临近竞赛结束前提交。 3.参赛团队可…

数据库系统概念(第二周 第一堂)

前言 本文的所有知识点、图片均来自《数据库系统概念》&#xff08;黑宝书&#xff09;、山东大学李晖老师PPT。不可用于商业用途转发。 回顾 上周最后一个知识点说到数据库三级模式结构&#xff0c;在这个结构里面我们设立了模式/内模式映像、内模式/外模式映像&#xff0c;主…

闲聊Swift的枚举关联值

闲聊Swift的枚举关联值 枚举&#xff0c;字面上理解&#xff0c;就是把东西一件件列出来。 在许多计算机语言中&#xff0c;枚举都是一种重要的数据结构。使用枚举可以使代码更简洁&#xff0c;语义性更强&#xff0c;更加健壮。 Swift语言也不例外。但和其他语言相比&#xf…

docker搭建upload-labs

Upload-labs 是一个专门设计用于学习和练习文件上传安全的开源工具。它提供了各种场景的文件上传漏洞&#xff0c;供用户通过实践来学习如何发现和利用这些漏洞&#xff0c;同时也能学习到防御措施。使用 Docker 来搭建 upload-labs 环境是一种快速、简便的方法&#xff0c;它可…

[Django 0-1] Core.Cache模块

Caching 源码分析 Django 的 cache 缓存机制&#xff0c;包含了一些代理设计模式(代理了但没完全代理&#xff0c;多此一举)。 通过实现一个CacheHandler的manager类&#xff0c;来实现多缓存后端的统一管理和调用&#xff0c;避免到处实例使用。 缓存的目的 缓存的目的就是…

大华智慧园区综合管理平台 getNewStaypointDetailQuery SQL注入漏洞复现

0x01 产品简介 “大华智慧园区综合管理平台”是一款综合管理平台,具备园区运营、资源调配和智能服务等功能。平台意在协助优化园区资源分配,满足多元化的管理需求,同时通过提供智能服务,增强使用体验。 0x02 漏洞概述 由于大华智慧园区综合管理平台getNewStaypointDetai…

服务器被大流量攻击怎么办?如何防御攻击?

随着网络的发展&#xff0c;我们所遇到的安全挑战也越来越多。尤其是近年来&#xff0c;网络攻击频发&#xff0c;许多互联网企业深受其扰。为了不影响自身业务的稳定运行&#xff0c;许多企业都在想方设法的寻求解决方案&#xff0c;防止服务器被攻击而影响业务发展。下面我们…

开源模型应用落地-安全合规篇(二)

一、前言 在前面的“业务优化篇系列文章”的学习中,我们学会了如何使用线程池、Redis和向量数据库等工具。现在,我们要加快学习的速度。一方面,我们会继续改进AI服务的性能瓶颈,另一方面,我们还要学习如何进行合规操作。 接下来,我们将学习如何使用腾讯云的内容安全审核来…

内网横向渗透一般攻击技巧

1、通过 nmap、nessus 扫描整个内网 ip 主机漏洞&#xff0c;如如 ms08-067、ms17-010、ms12-020、ms15-035、ms19-0708、永恒之蓝2代、cve-2017-7494&#xff08;samba&#xff09;、cve- 2014-6271(破壳)、php cgi 等相关漏洞。 2、通过 nmap 扫内网 80、8080 端口&#xff…

Spring Boot面试系列-03

1. Spring Boot 中 Actuator 有什么作用? 本质上Actuator通过启用production-ready功能使得SpringBoot应用程序变得更有生命力。这些功能允许对生产环境中的应用程序进行监视和管理。 集成SpringBoot Actuator到项目中非常简单。只需要做的是将spring-boot-starter-actuator…

C#常见的.Net类型(一)

目录 一、处理数字二、处理文本三、模式匹配与正则表达式 一、处理数字 常见的数据类型之一是数字&#xff0c;.NET用于处理数字的最常见类型 示例类型描述int用于表示整数值&#xff0c;没有小数部分byte用于表示8位无符号整数double用于表示双精度浮点数decimal用于表示高精…

云起云落:揭秘云计算基础内功心法

文章目录 云计算基本概念云计算发展历程云计算计算模式云计算商业模式云计算部署模式私有云部署公有云部署混合云部署 云计算虚拟化技术虚拟机模式虚拟化容器模式虚拟化容器VS虚拟机 常见虚拟化工具和技术虚拟化工具“轻量级”虚拟化工具 云计算供应商云计算三要点&#xff08;…

笔记:12.1 使用sqlplus /as sysdba登录报错ORA-01017

说明 使用sqlplus / as sysdba 登录时报错 ORA-01017&#xff1a;invalid username/password&#xff1b;logon denied 此时无任何用户的账号密码&#xff0c;需要对密码进行重置&#xff0c;可参考一下方法。 操作 1&#xff0c;删除原PWD文件&#xff0c;位置在 ORACLE_HOME…

【Node.js相关问题】npm install报错后重装node版本及npm环境变量配置及npm run dev启动报错原因分析解决办法

一、问题描述 昨天在准备打开b站up主三更草堂的博客项目08-02.基础版本前端联调_哔哩哔哩_bilibili中的前端工程时&#xff0c;使用以下两个命令分别都出现了报错。 命令1&#xff1a; # install dependenciesnpm install 命令2&#xff1a; # serve with hot reload at loca…

服务器加密机的工作原理是什么

服务器加密机在现代信息社会中扮演着至关重要的角色。它是确保服务器数据安全、保障数据传输机密性&#xff0c;以及防范恶意攻击和网络窃取的关键技术手段。本文将对服务器加密机进行详细解读&#xff0c;分析其原理、应用以及在未来发展中的重要性。 服务器加密机是一种专门用…

跨境电商选品实战——Ownips静态ip代理+Python爬虫轻松搞定Lazada电商选品

文章目录 一、引言二、Lazada电商平台爬虫实战2.1、分析Lazada电商平台的商品列表接口2.2、定位商品列表计算逻辑2.3、封装IP代理2.4、运行爬虫 三、数据处理及选品分析四、Ownips——企业级全球静态IP代理 一、引言 互联网与外贸的结合&#xff0c;催生了蓬勃兴起的跨境电子商…

vue的router

目前单页应用&#xff08;SPA&#xff09;越来越成为前端主流&#xff0c;单页应用一大特点就是使用前端路由&#xff0c;由前端来直接控制路由跳转逻辑&#xff0c;而不再由后端人员控制&#xff0c;这给了前端更多的自由。 当用户在应用中进行导航时&#xff0c;Vue Router …