2.2　流程设计器

流程设计器是流程管理中不可或缺的部分，通过流程设计器可以可视化地对流程定义进行设计建模。

注意，本书主要讨论Flowable流程引擎内容，对流程设计器内容点到即止。

2.2.1　Flowable Designer

Flowable流程引擎提供名为Flowable Designer的Eclipse插件，可视化的设计及建模流程定义，显然，这是为开发者提供的流程设计器。

在Eclipse面板中，依次选择Help→Install New Software命令，进入如图2.3所示界面，单击Add按钮，并填写名称及位置信息，单击OK按钮完成设置。

设计器面板操作简单明了，这里不再赘述。

2.2.2　Flowable Modeler

Flowable Modeler是基于Web页面的流程设计器，支持BPMN、CMMN和DMN模型规范设计及表单设计。

Flowable Modeler自6.6.0版本后被包含进Flowable UI包，不再是独立war包。因为Flowable UI在Flowable发行包下的wars文件夹中，所以我们需要先下载Flowable。

下载Flowable有两种方法：

（1）在Flowable官网下载。

（2）因为Flowable是开源项目，托管在GitHub上，所以我们可以在GitHub的项目发行页下载已被构建好的Flowable发行包。

Flowable UI包同样有两种方式部署，方式一是部署在Tomcat上。

（1）下载最新稳定版本的Apache Tomcat。

（2）将Flowable发行包下wars文件夹中的flowable-ui.war文件复制到Tomcat的webapps文件夹中。

（3）在文件夹bin中，双击运行startup.bat脚本，启动Tomcat服务器。打开浏览器，访问本机localhost端口8080的flowable-ui链接地址。

（4）使用admin或test用户名登录，进入Flowable UI首页，如图2.4所示。

（5）单击“建模器应用程序”选项，创建流程模型，如图2.5所示。

方式二是独立运行。由于Flowable UI是基于Spring Boot开发的，因此可以直接以独立应用模式运行。

打开命令行cmd，切换到Flowable发行包的wars文件夹下：

运行Java-jar flowable-ui.war命令。部署效果与方式一相同。

2.2.3　外部设计器

由于Flowable Modeler并不是一个拆箱即用、独立可拼装的组件，也不是基于Vue编写的，因此在实际开发中需要对其进行改造，以适应现有项目。值得注意的是，这里需要替换其自带的身份认证模块代码。

当然我们还可以查找GitHub开源项目，在其基础上进行二次开发，推荐项目有workflow-bpmn-modeler和vue-bpmn-element。workflow-bpmn-modeler是一个基于Vue和Element UI并支持Flowable流程设计的前端框架，如图2.6所示。

vue-bpmn-element是一个基于Vue和Element UI的Flowable流程设计器组件，如图2.7所示。

如果以上仍不符合要求，我们还可以基于bpmn-js重新设计和编写符合项目要求的页面。