activiti7实战教材（一）完美作图

蔚落 2024-04-01 11:40 61阅读 0赞

## 一、activiti7作图一般方法 ##

### 1.idea环境 ###

下载actibpm插件

### 2.eclipse环境 ###

下载如下插件

Name：Activiti BPMN 2.0 designer

Location：http://activiti.org/designer/update/

## 二、一般方法局限性 ##

actibpm插件支持的idea版本只到2019年，后续actibpm就停止更新了。

Activiti BPMN 2.0 designer支持的eclipse版本在2018年左右，现在eclipse更新很多版本了，但是插件版本跟不上。

况且activiti版本也更新到了7.0版本。

现在我用的idea是2021.02版本，上述的插件就不能使用。

为了更好的画activiti工作流图，我找了很多idea插件，功能都不是很全，有的插件没有监听器设置，有的插件没有元素文档的设置，有的插件没有子流程的设置，有的插件没有多实例的设置。

经过我很长时间的查找，终于找到了一个比较好用的，功能比较齐全的，而且画出来的图很好看的一个插件。

这个插件不依托于idea或者eclipse，是一个在线编辑器。

## 三、功能强大的在线activiti作图编辑器 ##

在线编辑器网址：[Bpmn process Designer![logo.ico][]https://miyuesc.gitee.io/process-designer/][Bpmn process Designer_logo.ico_https_miyuesc.gitee.io_process-designer]

这个网址的作图效果如下：

![3a842a3ea41740e18d1bfd55a13235bd.jpeg][]

这个在线网址可以拖拽组件进行画图，左边是工具栏，右边是属性栏。最上面可以导出不同的格式。

工具栏包括：开始事件，中间事件，结束事件，用户任务，网关，子流程，数据对象，分组等。

属性栏包括：id，名称，元素文档，监听器，多实例，流转条件等。

![d9efed91dc684ed99b5be70d4f708fa7.jpeg][]

![4a0ccf67b54147abb727a891f8fde0dd.jpeg][]

最上边的工具栏下载有三种格式：bpmn文件，svg文件，xml文件。

![d80f1b32690f40738b1960d2cac02a74.jpeg][]

这个网址不仅仅可以画activiti流程图 ，还可以打开流程图，更可以对应不同的工作流引擎：activiti，flowable，camunda。

![99d412d8fa4a4907aea5d1984e8d02fd.jpeg][]

更多的功能大家可以下载作者的git源码，下载到本地，进行更进一步的研究。源码地址如下图网址链接。 git链接如下：

[GitHub - miyuesc/bpmn-process-designer: Base on Vue 2.x and ElementUI，基于 Bpmn.js、Vue 2.x 和 ElementUI 的流程编辑器（前端部分），支持监听器，扩展属性，表单等配置，可自由扩展Base on Vue 2.x and ElementUI，基于 Bpmn.js、Vue 2.x 和 ElementUI 的流程编辑器（前端部分），支持监听器，扩展属性，表单等配置，可自由扩展 - GitHub - miyuesc/bpmn-process-designer: Base on Vue 2.x and ElementUI，基于 Bpmn.js、Vue 2.x 和 ElementUI 的流程编辑器（前端部分），支持监听器，扩展属性，表单等配置，可自由扩展![fluidicon.png][]https://github.com/miyuesc/bpmn-process-designer][GitHub - miyuesc_bpmn-process-designer_ Base on Vue 2.x and ElementUI_ Bpmn.js_Vue 2.x _ ElementUI _Base on Vue 2.x and ElementUI_ Bpmn.js_Vue 2.x _ ElementUI _ - GitHub - miyuesc_bpmn-process-designer_ Base on Vue 2.x and ElementUI_ Bpmn.js_Vue 2.x _ ElementUI _fluidicon.png_https_github.com_miyuesc_bpmn-process-designer]

![3081ce6812ec4d2298ac97ab95a51371.jpeg][]

[logo.ico]: https://miyuesc.gitee.io/process-designer/logo.ico
[Bpmn process Designer_logo.ico_https_miyuesc.gitee.io_process-designer]: https://miyuesc.gitee.io/process-designer/
[3a842a3ea41740e18d1bfd55a13235bd.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/052aa7bfd9a04b55b09c3eddf33b5cc6.jpeg
[d9efed91dc684ed99b5be70d4f708fa7.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ee748d5c5cd7446b99e9892c1f858b55.jpeg
[4a0ccf67b54147abb727a891f8fde0dd.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5651001b548d482695ef4df5a1a6be41.jpeg
[d80f1b32690f40738b1960d2cac02a74.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/62797041e49c4557af896b24b663b7cb.jpeg
[99d412d8fa4a4907aea5d1984e8d02fd.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e11d9ac2b7384a0a8759a8b120070104.jpeg
[fluidicon.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/91c16cf9070542f6ba109c5336a93e6c.png
[GitHub - miyuesc_bpmn-process-designer_ Base on Vue 2.x and ElementUI_ Bpmn.js_Vue 2.x _ ElementUI _Base on Vue 2.x and ElementUI_ Bpmn.js_Vue 2.x _ ElementUI _ - GitHub - miyuesc_bpmn-process-designer_ Base on Vue 2.x and ElementUI_ Bpmn.js_Vue 2.x _ ElementUI _fluidicon.png_https_github.com_miyuesc_bpmn-process-designer]: https://github.com/miyuesc/bpmn-process-designer
[3081ce6812ec4d2298ac97ab95a51371.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/817227a55bc540a7bfaa1ca5917caadb.jpeg