# bpmn-vue3

**Repository Path**: bnmnba/bpmn-vue3

## Basic Information

- **Project Name**: bpmn-vue3
- **Description**: 基于 Bpmn.js、Vue 3.x 、Element-plus 和vite的流程编辑器（前端部分），参考bpmn-vue3
- **Primary Language**: JavaScript
- **License**: ISC
- **Default Branch**: master
- **Homepage**: http://bpmn.majh.top/
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 47
- **Created**: 2024-02-05
- **Last Updated**: 2025-11-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# bpmn-vue3

## 介绍


基于 Bpmn.js、Vue 3.x 、Element-plus 和vite的流程编辑器（前端部分）
分支来源:
源自[xlys998 bpmn-vue3](https://gitee.com/xlys998/bpmn-vue3)
源自[majinhui9 bpmn-vue3](https://github.com/majinhui9/bpmn-vue3)
源自[bpmn-process-designer](https://gitee.com/MiyueSC/bpmn-process-designer)

本版本是在`bpmn-vue3` 基础上修改，稍微做了些改动（弹窗显示流程设计器和预览组合式API组件、原有的选项式API组件未修改、替换activiti的json为bpmn-process-designer的版本以修正控制台报错问题、修正了翻译不完整问题、预览可拖拽、用户任务选择用户下拉框修改为输入框），感谢 @xlys998 @majinhui9 @MiyueFE

示例及其数据参考：[yudao-ui-admin-vue3](https://gitee.com/yudaocode/yudao-ui-admin-vue3)
对流程图高亮逻辑进行了重写：
```
 * 第1种计算情况: 按活动的开始时间升序遍历所有已开始或完成的活动，
 * 当前活动已开始，且前一个有连线活动已经结束时，将前一个活动指向这个活动的线标记为已完成。
 * 第2种计算情况: 当一个活动只有一条出线，且当前活动已结束目标活动已开始，则设置连线为已完成。
 * 第3种计算情况: 当一个活动只有一条进线，且当前活动已开始上一个活动已结束，则设置连线为已完成。
 *
 * 已知的问题是上述三种情况涵盖了大部分连线高亮。但并不完全覆盖所有情况，如：
 * 由于假定两个图元之间只有一条线，所以如果有两条线的话只有一条线会高亮，其他线不会高亮。
```

## 1. 安装依赖

```shell
npm install
# or 
npm instal -g pnpm
pnpm install
```

## 2. 运行

```shell
npm run dev
# or
pnpm run dev
```