【工作流引擎】Flowable流程设计器基于bpmnjs开发的vue组件

最新推荐文章于 2026-07-19 15:21:51 发布

原创

最新推荐文章于 2026-07-19 15:21:51 发布 · 1.5w 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了如何使用bpmn.js这个BPMN2.0渲染工具包和web建模器在前端创建流程图。重点展示了如何在Vue项目中集成Element UI和Ant Design Vue版本的流程设计器组件，特别是详细讲述了Ant Design Vue版本的workflow-bpmn-modeler-antdv的集成步骤，包括项目创建、依赖安装和在main.js中全局引入。

【工作流引擎】Flowable流程设计器基于bpmnjs开发的vue组件

设计器介绍
集成设计器

设计器介绍

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

集成设计器

本文集成现成的Vue设计器组件
Element UI版本 workflow-bpmn-modeler
Ant Design Vue 版本 workflow-bpmn-modeler-antdv

workflow-bpmn-modeler-antdv 是鄙人在workflow-bpmn-modeler上适配的，所以下文以Ant Design Vue版本介绍，Element UI使用原版包即可

创建项目

vue create bpmn-model-demo
cd bpmn-model-demo

安装Ant Design Vue及less相关依赖

npm i --save ant-design-vue
npm install less less-loader --save-dev

安装设计器

npm i workflow-bpmn-modeler-antdv

main.js 全局引入Ant Design Vue

import Vue from 'vue'
import App from './App';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

Vue.config.productionTip = false