# bpmn-process-designer

**Repository Path**: bigdatas/bpmn-process-designer

## Basic Information

- **Project Name**: bpmn-process-designer
- **Description**: Base on Vue 2.x and ElementUI，基于 Bpmn.js、Vue 2.x 和 ElementUI 的流程编辑器（前端部分），支持监听器，扩展属性，表单等配置，可自由扩展
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: v2
- **Homepage**: https://miyuesc.gitee.io/process-designer/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 636
- **Created**: 2023-02-22
- **Last Updated**: 2023-02-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
  <a href="https://github.com/miyuesc/bpmn-process-designer">
   <img alt="logo" src="./public/icon-process.png" />
  </a>
</p>

<h1 align="center">Bpmn Process Designer</h1>

<p align="center">
<img alt="GitHub stars" src="https://img.shields.io/github/stars/miyuesc/bpmn-process-designer?style=flat&logo=github" />
<img alt="GitHub stars" src="https://img.shields.io/github/forks/miyuesc/bpmn-process-designer?style=flat&logo=github" />
<img src='https://gitee.com/miyuesc/bpmn-process-designer/badge/star.svg?theme=dark' alt='star' />
<img src='https://gitee.com/miyuesc/bpmn-process-designer/badge/fork.svg?theme=dark' alt='fork' />
</p>

<p align="center">
<img src="https://img.shields.io/badge/Vue-2.x-brightgreen" alt="" />
<img src="https://img.shields.io/badge/ElementUI-%5E2.13-orange" alt="" />
<img src="https://img.shields.io/badge/Bpmn.js-8.8.3-orange" alt="" />
</p>

----

🚨🚨当前分支为 V2 分支，根据 vue 3 项目的一些方法抽离逻辑进行了重构，属于破坏性改造，如需 v1 版本，请访问 [branches/main](https://github.com/miyuesc/bpmn-process-designer/tree/main)

----


## 项目简介

一个基于 `bpmn.js`，`Vue 2.x` 和 `ElementUI` 开发的 BPMN 2.0 流程设计器（网页版），您可以使用它在浏览器上查看和编辑符合 `BPMN 2.0` 规范的流程文件。

在线demo请访问 [MiyueFE Blog / MiyueSC Process Designer](https://miyuesc.github.io/process-designer-v2/)

码云同步镜像请访问 [Gitee / MiyueSC Process Designer](https://miyuesc.gitee.io/process-designer/) (V1 版本，V2 版本无法访问。。。因为没有实名，无法更新🤢)

### 🚀🚀🚀 墙裂推荐！！！

>**Vite + Vue 3 + pinia + naiveUI 新项目，进行了大部分自定义功能基础实现，完成了 bpmn.js 基本依赖的 typescript 类型声明。**
> 
> React 项目也可以参考自定义插件和属性更新方式
> 
>**体验地址：[vite-vue-bpmn-process](https://miyuesc.github.io/vite-vue-bpmn-process/)**
> 
>**源码地址：[github: vite-vue-bpmn-process](https://github.com/moon-studio/vite-vue-bpmn-process), [gitee: vite-vue-bpmn-process](https://gitee.com/MiyueSC/vite-vue-bpmn-process)**
> 
>**付费咨询请加微信**
> 
> 公众号：MiyueFE 的前端圈
> 
> <img alt="wechat.png" src="public/qrcode.jpg" width="200"/>


## 友情赞助

生活不易，偷偷丢个赞赏码吧，各位大佬赏个饭钱🤪🤪🤪🤪~~~~

<p>
<img alt="微信" src="packages/theme/images/wechat.jpg" width="240" style="display: inline-block"/>
<img alt="支付宝" src="packages/theme/images/alipay.png" width="240" style="display: inline-block"/>
</p>


## 友情链接

1. Me: [Bpmn.js 全面进阶指南](https://juejin.cn/column/6964382482007490590)
2. Yiuman: 低代码平台 [citrus](https://github.com/Yiuman/citrus) ，已集成 activiti7 工作流引擎后端部分
3. 霖呆呆: [《全网最详bpmn.js教材目录》](https://juejin.cn/post/6844904017567416328)，[关于bpmn.js交流群的说明](https://juejin.cn/post/6844904041026158599)
4. PL-FE: [Bpmn Document](https://github.com/PL-FE/bpmn-doc)
5. 芋道源码: [ruoyi-vue-pro](https://gitee.com/zhijiantianya/ruoyi-vue-pro) ,一套全部开源的企业级的快速开发平台，毫无保留给个人及企业免费使用。
6. 运维咖啡吧: [《BPMN系列原创文章》](https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU5MDY1MzcyOQ==&action=getalbum&album_id=1576254888626454529&scene=173&from_msgid=2247484449&from_itemidx=1&count=3&nolastread=1#wechat_redirect)
7. dialYun: React Bpmn Designer - [github](https://github.com/dialYun/react_bpmn_designer), [gitee](https://gitee.com/dialYun/react_bpmn_designer)

## 1. 安装依赖 Installations

```shell
npm install
// or yarn install
```

## 2. 运行 Quick Start

```shell
npm run demo
// or yarn run demo
```

## 学习交流

如果您觉得这些文章对您有帮助，想和我一起学习，欢迎您关注我的微信订阅号。