README.md · Arben_sky/vite-vue-bpmn-process

<h1 align="center">
    Vite Vue Bpmn Process Editor
</h1>

<p align="center">
    <a href="https://github.com/moon-studio/vite-vue-bpmn-process/blob/main/README.en.md">English</a> | 中文
</p>

## 项目简介

Vite Vue Bpmn流程编辑器，基于[Bpmn.js](https://github.com/bpmn-io/bpmn-js)， [Vite](https://vitejs.dev)， [Vue.js 3.x](https://vuejs.org/)。

实现了 Bpmn.js 和 Diagram.js 的 typescript 类型声明，typescript 可以用来在编辑器中编写代码。

React 项目也可以参考自定义插件和属性更新方式。

> 码云：https://gitee.com/MiyueSC/vite-vue-bpmn-process

> 🚀Tips:
> 
> Diagram.js 最近已经实现了 Type Declares 声明，具体请查看 [Diagram.js](https://github.com/bpmn-io/diagram-js) 的 **type-declarations** 分支~
> 
> Bpmn.js 的 Type Declares 声明 目前已经加入到 bpmn-io 团队的任务面板中，但目前处于 **积压状态**。

## 友情赞助

生活不易，猪猪叹气。如果对您有帮助，您可以请我喝杯咖啡。十分感谢 (毕竟这个项目还是写了几个月， typescript 部分实在是太难写了)~ ~ ~ ~

> 付费咨询联系微信：
> 
> <img alt="wechat.png" src="public/wechat.png" width="200"/>
> 
> 也可关注公众号：MiyueFE 的前端圈
>
> <img alt="wechat.png" src="public/qrcode.jpg" width="200"/>

## 结构目录

## 当前功能

### 1. 工具栏

- [x] 导入文件
- [x] 导出文件（xml, bpmn, svg）
- [x] 预览文件字符串（xml, json）
- [x] 元素对其（垂直上中下、水平左中右）
- [x] 缩放
- [x] 撤销恢复与重做
- [x] 扩展功能（流程模拟，小地图，快捷键提示，bpmn 事件查询）

### 2. 编辑器

- [x] 自定义流程id与名称
- [x] 可选流程引擎（camunda，activiti，flowable）
- [x] 动态背景设置
- [x] 自定义 PaletteProvider
- [x] 自定义 Renderer
- [x] 自定义 ContentPadProvider
- [x] 自定义 Rules
- [x] 自定义 ElementFactory
- [x] 扩展右键菜单
- [ ] 自定义 Overlays
- [ ] 扩展 Tooltip
- [ ] 部分元素高亮

### 3. 属性面板

- [x] 基础信息（id, name, version, executable ...）
- [x] 附件文档（documentation）
- [x] 执行作业
- [x] 异步配置
- [x] 流程启动项
- [x] 扩展属性
- [x] 执行监听器
- [x] 流转条件
- [ ] 任务监听器
- [ ] 任务多实例（会签、或签）

## 界面预览

![img.png](docs/img.png)

![img_1.png](docs/img_1.png)

![img_2.png](docs/img_2.png)

![img_3.png](docs/img_3.png)

![img_4.png](docs/img_4.png)

![img_5.png](docs/img_5.png)

![img_6.png](docs/img_6.png)

## 其他项目

1. [diagram-js-grid-bg](https://github.com/miyuesc/diagram-js-grid-bg)：基于 diagram-js-grid 的 SVG 网格背景，可用于diagram-js的相关项目，例如 bpmn-js、dmn-js 等
2. [bpmn-js-external-label-modeling](https://github.com/miyuesc/bpmn-js-external-label-modeling)：一个用来将 Label 标签渲染在节点外部的bpmn-js插件。

## Licence

This project is licensed under the Apache License 2.0 .

Arben_sky/vite-vue-bpmn-process

简介

发行版

贡献者

近期动态

Arben_sky/vite-vue-bpmn-process .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

Arben_sky/vite-vue-bpmn-process