# bpmn-designer

**Repository Path**: Gianttrees/bpmn-designer

## Basic Information

- **Project Name**: bpmn-designer
- **Description**: 流程设计器，flowable，activity，bpmnjs
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: bpmn-8.7
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 7
- **Created**: 2025-07-01
- **Last Updated**: 2025-07-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3+bpmnjs实现流程设计器

BPMNJS是一个用于在浏览器中渲染BPMN 2.0流程图的JavaScript库。在Vue 3项目中使用BPMNJS，可以按照以下步骤：

## 1、package.json中添加组件库
```
    "bpmn-js": "^8.9.1",
    "diagram-js": "^7.8.2",
    "diagram-js-minimap": "^2.1.1",
    "bpmn-js-properties-panel": "^0.46.0",
```
## 2、在Vue组件中引入BPMNJS
```
import BpmnModeler from 'bpmn-js/lib/Modeler';
```
## 2、在Vue组件中引入BPMNJS 样式引用
```
// 以下为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'
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右边工具栏样式
import 'bpmn-js-properties-panel/styles/properties.less'
import 'diagram-js-minimap/assets/diagram-js-minimap.css'
```

## 3、创建BPMNJS实例  
在Vue组件的mounted()钩子函数中创建BPMNJS实例，可以使用以下代码：
```
function initData() {
  bpmnModeler = new BpmnModeler({
    container: unref(canvasRef),
    keyboard: {
      bindTo: document,
    },
    propertiesPanel: {
      parent: unref(propertiesPanel),
    },
    additionalModules: [
      customTranslateModule,
      propertiesProviderModule,
      propertiesPanelModule,
    ],
    moddleExtensions: {
      activiti: activitiModdleDescriptor
    }
  });
}
```
```
<div class="canvas" ref="canvasRef" id="js-canvas"></div>
<div ref="propertiesPanel" class="properties" :class="{'hide' : !propertiesPanelVisible}" id="js-properties-panel"></div>
```

## 本地项目启动
### 安装组件
```
npm install
```

### 运行
```
npm run serve
```

### 打包编译
```
npm run build
```