BPMN绘制流程的项目推荐

项目简介

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)
  • 执行作业
  • 异步配置
  • 流程启动项
  • 扩展属性
  • 执行监听器
  • 流转条件
  • 任务监听器
  • 任务多实例(会签、或签)

界面预览

BPMN绘制流程的项目推荐_第1张图片
BPMN绘制流程的项目推荐_第2张图片
BPMN绘制流程的项目推荐_第3张图片
BPMN绘制流程的项目推荐_第4张图片
BPMN绘制流程的项目推荐_第5张图片
BPMN绘制流程的项目推荐_第6张图片
BPMN绘制流程的项目推荐_第7张图片

你可能感兴趣的:(vue.js,前端,javascript,BPMN)