项目简介

Vite Vue Bpmn流程编辑器，基于Bpmn.js， Vite， Vue.js 3.x,
Naiveui

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

整合项目地址： https://github.com/moon-studio/vite-vue-bpmn-process

图标使用

https://www.xicons.org/#/zh-CN

参考学习 文档

https://blog.csdn.net/weixin_43359503/category_10821477.html

当前功能

1. 工具栏

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

2. 编辑器

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

3. 属性面板

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

界面预览