import Vue from 'vue'
import App from './App.vue'
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'
- 在
views 下新建 panel.vue 文件，并配置好路由
打 … 的地方和 basic.vue 文件的内容一样哦
<template>
<div class="container">
<div class="canvas" ref="canvas"></div>
<!-- 右边属性栏部分 -->
<div id="js-properties-panel" class="panel"></div>
</div>
</template>
<script>
import propertiesPanelModule from 'bpmn-js-properties-panel'
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
export default {
name: 'basic',
data () {
return {
mounted () {
this.init()
methods: {
init () {
const canvas = this.$refs.canvas
this.bpmnModeler = new BpmnModeler({
container: canvas,
propertiesPanel: {
parent: '#js-properties-panel'
additionalModules: [
propertiesProviderModule,
propertiesPanelModule
moddleExtensions: {
camunda: camundaModdleDescriptor
this.createNewDiagram()
createNewDiagram () {
</script>
<style scoped>
.panel {
position: absolute;
top: 0;
right: 0;
width: 300px;
</style>
运行后效果
以上，就是 在 vue 中使用 bpmn.js 中绘制流程图的全部内容啦！
关于右下角 BPMN.IO 这个 logo，官方要求是不给删或者隐藏的，否则就侵权，如果实在是不需要 logo的话可以简单地把 logo 的 css样式隐藏一下
js 部分
mounted() {
const bjsIoLogo = document.querySelector('.bjs-powered-by')
while (bjsIoLogo.firstChild) {
bjsIoLogo.removeChild(bjsIoLogo.firstChild)
css 部分
.bjs-powered-by {
display:none !important;
一个可参考的链接地址：https://gitee.com/MiyueSC/bpmn-process-designer?_from=gitee_search
bpmn.js-doc
这里总结了 bpmn-js 用法以及一些 API
由于本人也是新手，有些地方总结得不到位或者用词不当，这个笔记会在日后不断完善，望各位老爷多多指点 :kissing_face_with_closed_eyes:
本篇笔记旨在技术交流，觉得还可以的希望可以给的 star:handshake:
不同功能的代码在不同分支中
开发分支，的代码分支，完整度高
自定义工具栏分支
欢迎留言交流：
vue + bpmn 预览：
自定义 Palette => 指定 Palette 容器
自定义 Renderer
自定义 contextPad
自定义连线和箭头的颜色
自定义规则
自定义 properties-panel
右上角小地图
总结常用 API :triangular_flag:
为 Viewer 添加一些功能
bpmn-camunda DEMO
可能对你有帮助的资料
diagram-js 是一个工具箱，用于在 web 上显示
BPMN 无处不在，适合所有人
在浏览器中创建、嵌入和扩展 BPMN 图。单独使用它或将其集成到您的应用程序中。
1.使用基于Web 的建模组件 轻松创建您自己的 BPMN 2.0 图表。
2.使用该工具包将 BPMN 2.0 图表嵌入到您的应用程序中。 使用对您和您的业务很重要的数据来 丰富他们。
3. 集成浏览器内流程引擎、令牌模拟、自定义元素、样式或建模规则。这取决于您，因为 bpmn-js 是一个开放的工具包。
自定义流程设计器bpmn-js初体验安装vue使用vue-cli创建项目安装bpmn-js简单的查看工作流图形的例子中间遇到的问题新需求：可以拖拽自定义工作流
此文只为记录一下自己学习bpmn-js和使用bpmn-js实现工作流设计器的过程。
bpmn-js初体验
安装vue
新版的vue-cli有图形化工具，新版本的Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经...
因为之前项目需求需要用到Activiti以及Bpmn.js，我就去学了一波操作了一波，再学习使用的过程中经常去百度发现对于Activiti7以及Bpmn.js的文章还是相对比较少的，或者说描述的不够详细以及版本相对比较旧的问题，所以现在记录一下我整合Bpmn.js的一些步骤以及操作。
有关后端方面的Spring Boot整合Activiti7的一些操作我下次再整理发布一边专门的博客来记录，这次先来看一下Vue怎么样集成Bpmn.js实现在线绘图，导出Xml，svg，在线保存等操作。
如果您有什么好的建议以及问题可以发送邮件到“”
Github 完整代码
首先不用说肯定先得有一个Vue的一个项目，先建一个Vue的项目，安装一下依赖。
// 创建一个Vue项目
vue create bpmn-demo
// 安装一下项目
/打开package.json,下面的版本必须按照这个来,否则报错。//创建customTranslate.js 内容如下。//创建translations.js 内容如下。//浏览器打开地址,下面就是集成好的界面了。//在App.vue直接替换,内容如下。//在main.js直接替换,内容如下。//vue必须选择2的版本,否则报错。//安装bpmn 后面记得改版本。//删除node_modules。//先提前安装好cnpm。// 创建一个Vue项目。// 安装一下项目依赖，//然后重新安装依赖。
本文集成现成的Vue设计器组件
Element UI版本 workflow-bpmn-modeler
Ant Design Vue 版本 workflow-bpmn-modeler-antdv
npm i workflow-bpmn-modeler-antdv
修改package.json：
"bpmn-js-properties-panel":"https://github.com/RubyLinT/bpmn-js-properties-panel.git",
"activiti-bpmn-mod...
