49张图带领小伙伴们体验一把 Flowable-UI

松哥最近正在录制 TienChin 项目视频～采用 Spring Boot+Vue3 技术栈，里边会涉及到各种好玩的技术，小伙伴们来和松哥一起做一个完成率超 90% 的项目，戳戳戳这里-->TienChin 项目配套视频来啦。

不知道小伙伴们有没发发现，IDEA 中似乎没有一个特别称手的流程绘制工具，大家注意我说的是称手，不是能用。

我之前用过下图这个插件：

评价就是两个字：能用！

官方提供了一个 flowable-ui，功能还比较强大，可以一试，今天我就来和小伙伴们简单介绍一下这个 flowable-ui 的使用，用熟了，将来我们可以使用这个来绘制流程图。

1. Flowable-UI

Flowable-UI 说白了就是一堆 Web 应用，提供了四方面的功能：

• Flowable IDM: 身份管理应用。为所有 Flowable UI 应用提供单点登录认证功能，并且为拥有 IDM 管理员权限的用户提供了管理用户、组与权限的功能。
• Flowable Modeler: 让具有建模权限的用户可以创建流程模型、表单、选择表与应用定义。
• Flowable Task: 运行时任务应用，这个提供了启动流程实例、编辑任务表单、完成任务，以及查询流程实例与任务的功能。
• Flowable Admin: 管理应用。让具有管理员权限的用户可以查询 BPMN、DMN、Form 及 Content 引擎，并提供了许多选项用于修改流程实例、任务、作业等。管理应用通过 REST API 连接至引擎，并与 Flowable Task 应用及 Flowable REST 应用一同部署。

简单来说：

• 创建用户、分配角色用 Flowable IDM。
• 画流程图用户 Flowable Modeler。
• 测试、体验流程用 Flowable Task。
• 后台管理相关的用 Flowable Admin。

2. 安装方式

前面说的几个应用，所有其他的应用都需要 Flowable IDM 提供认证。每个应用的 WAR 文件可以部署在相同的 Servlet 容器（如Apache Tomcat）中，也可以部署在不同的容器中。由于每个应用使用相同的 cookie 进行认证，因此应用需要运行在相同的域名下。

由于这些应用是基于 Spring Boot2.0 开发的，因此也可以直接作为独立应用来直接运行，通过执行 java -jar xxx.war 的方式来启动这些应用。

所以直接启动这些应用并不是麻烦事，反而是比较简单的。不过我看了下他这个还支持 Docker 安装，所以我还是用 Docker 吧，更省事，将来不想要了删除也方便（对 Docker 不熟悉的小伙伴可以在微信公众号后台回复 docker，有松哥写的入门教程）。

docker 安装的话，直接如下命令即可：

docker run -d --name flowableui -p 8086:8080 flowable/flowable-ui

没什么特别需要配置的地方，指定一下容器名字和端口映射即可。

装好之后，浏览器输入 http://localhost:8086/flowable-ui 进行访问，此时会弹出来如下页面：

默认情况下，登录的用户名是 admin，密码是 test，注意别把密码写错了。

登录成功之后，如果看到如下页面，就表示安装成功了（一般来说应该不会有安装问题）：

装好之后，接下来我们就来逐步体验这里的功能，我从简单的开始讲起。

3. 身份管理（IDM）

身份管理就是用户、用户组的管理，我们点进到身份管理页面之后，可以看到如下内容：

可以看到，默认只有一个 admin 用户，也就是我们刚刚登录时候的用户。

3.1 用户管理

接下来点击左边的创建用户按钮，我们可以创建新的用户出来：

填入用户的基本信息和密码即可。

我一共创建了四个用户，最终结果如下：

3.2 组管理

接下来点击上面的组，我们可以创建用户组，这个用户组相当于我们在 vhr 中所说的角色，给用户分组，相当于给用户分配一个角色。

默认情况下，没有任何组，组是空的：

我们点击创建组按钮，先来创建一个经理组：

组添加成功之后，点击添加用户按钮，为用户组中添加用户：

假设 zhangsan 和 zhangsi 两个人是经理，最终添加结果如下：

利用相同的方式，我再创建一个组长的组，并为之添加两个用户 lisi 和 liwu。

3.3 权限控制

我们前面创建的用户现在是没有任何权限的，例如现在如果使用 zhangsan/123 进行登录，登录成功后页面是空的，没有任何东西：

所以我们要为用户添加相应的权限。点击顶部的权限控制一栏，如下：

我们可以为这五种访问分别设置对应的用户/用户组：

• 访问 idm 应用：这个就是访问身份管理应用，如果用户没有访问这个的权限，那么用户在登录成功的后的首页上就看不到身份管理应用程序这个菜单项。
• 访问 admin 应用：这个是访问管理员应用程式，如果没有没有这个的访问权限，那么用户在登录成功之后的首页上就看不到管理员应用程式这个菜单项。
• 访问 modeler 应用：这个是访问建模器应用程序，如果没有没有这个的访问权限，那么用户在登录成功之后的首页上就看不到建模器应用程序这个菜单项。
• 访问 workflow 应用：这个是访问任务应用程序，如果没有没有这个的访问权限，那么用户在登录成功之后的首页上就看不到任务应用程序这个菜单项。
• 访问 REST API：这个是指用户通过 REST API 访问工作流的权限。

以访问 idm 应用为例，在设置的时候，我们可以直接设置用户，也可以设置用户组，设置用户组的话，则这个组中的所有用户都能访问这个菜单项。

我这里设置的是经理可以访问所有应用，而组长只可以访问 workflow 应用。

4. 管理员（Admin）

接下来是管理员应用程式，这个里边的功能相对来说简单一些，而且主要是数据查看，需要自己配置的比较少：

这是一个总览的页面，上面有流程引擎、CMMN引擎、App 引擎等各种菜单。这个因为用的不多，我也就不啰嗦了，小伙伴们可以自行体验一把。

5. 建模器（Modeler）

接下来的建模器算是我们在使用 Flowable-UI 时最最常用的功能了，因为画流程图就是在这里画。

5.1 绘制流程图

点击创建流程，可以开始一个流程图的绘制：

我们来看一下初始页面：

左边是菜单栏，里边是绘制流程图的各种组件，下边是流程图的各种属性了。其他东西大家看一下就懂了，我就不多说了。下边没有什么需要配置的，我就设置了一下版本号。

接下来我绘制一个简单的流程，如下图（一个流程启动之后，经过两个 UserTask 然后就结束了）：

绘制的时候，光标放在上一个组件上，然后会自动提示后面的组件，直接点击即可：

如果想要的组件没有提示，那么就只能在左边菜单中寻找，找到之后拖过来就行了。

这两个流程中的 UserTask 节点我也不做额外的设置，就设置一下每一个 UserTask 应该由谁来处理就可以了。假设第一个节点是组长来处理，第二个节点是经理处理，我们来看如何配置。

选中第一个 UserTask 之后，然后在下方找到分配用户，设置任务分配人：

另外我这里啰嗦一句，每一个组件都需要设置组件的主键 ID（下方的第一个属性），当然也可以不设置，不设置这里会自动生成一个随机字符串，当然随机生成的可读性肯定是不如自己设置的可读性好了。

大家看到有四种不同的用户选项，我这里选择候选组，也就是将来由指定的用户组中的用户来处理这一个任务：

选择完成之后，点击保存按钮：

利用相同的方式，给第二个 UserTask 也设置由经理进行处理。

好了，我们就绘制这样一个简单流程。

绘制完成后，点击左上角的勾进行检查，查看是流程图绘制是否正确，有的时候流程节点之间的连线起点和终点可能并没有放入正确的位置，肉眼不容易看到，点击左上角的勾可以帮我们检查一下。

验证完成没有问题，点击左上角的保存按钮对当前流程图进行保存。

保存完成后，就可以在流程首页看到我们刚刚绘制的流程图了：

点击流程图就可以查看流程图的详情，点击右上角的下载按钮，就可以下载这个流程图对应的 XML 文件了，将 XML 文件拷贝到我们的项目中，就可以开始开发啦。

5.2 发布应用程序

当然，我们也可以直接现场测试我们刚刚绘制好的流程图。

点击上方的应用程序，点击右上方的创建应用程序：

配置应用程序的基本信息：

点击编辑包含的模型，为当前应用程序添加一个流程图：

完成后点击左上角的保存按钮。

保存之后，我们就可以看到刚刚定义好的应用程序了：

点进到这个应用程序中，点击右上角的发布按钮，可以发布该应用程序。

发布之后，我们就可以在任务应用程序中来玩这个程序了。

6. 任务（Task）

经过前面的步骤之后，现在我们重新回到主页面，就可以发现除了刚刚一开始默认的四个菜单之外，现在还额外多了一个，就是我们刚刚新建的应用程序：

我们可以直接点击 my_first_app 进入到任务应用程序中，也可以先进入到任务应用程序中，然后选择 my_first_app，都行。我以后者为例和大家演示一下吧：

首先进来之后，默认情况下是没有要执行的任务：

点击到流程中，如下：

默认情况下，也是没有正在执行的流程，我们现在可以点击启动流程按钮，来启动一个新的流程：

点击启动流程按钮之后，左边会展示出来所有的流程实例，我们现在只有一个发布的流程，所以选中该流程，点击右边的启动流程按钮：

启动流程之后，点击显示图，可以查看流程走到哪一步了：

点击活动任务，查看自己需要完成的任务。点击之后发现并没有需要完成的任务：

这是因为当前用户是 admin，而我们流程中第一个 UserTask 应该是由组长来处理的，所以我们现在注销登录，先以 zhangsan 的身份登录，因为 zhangsan 的角色是经理，所以他登录上来应该也是没有任务的：

注意在筛选条件中选择我是其中一个候选人的任务（还是没有）：

再以 lisi 的身份登录，lisi 是组长，如下（也记得修改一下筛选条件）：

先点击认领按钮，认领该任务，然后点击完成按钮，完成自己的审批：

完成之后，然后点击到流程中，然后点击左上角的显示图，如下：

此时可以看到，流程已经向后走了一步了。

接下来该经理审批了。

我们注销登录，再以 zhangsan 的身份登录，然后重复 lisi 的步骤，就可以完成这个流程了。

最终执行结果如下图：

流程执行完毕。

如果流程中涉及到排他性网关，似乎里无法测试，如果有小伙伴知道这里如何测试带有排他性网关的流程，欢迎留言告知。

7. 小结

今天的图有点多，希望小伙伴们对 flowable-ui 这个工具有一个基本的认知，好啦，有问题欢迎留言讨论。

松哥最近正在录制 TienChin 项目视频～采用 Spring Boot+Vue3 技术栈，里边会涉及到各种好玩的技术，小伙伴们来和松哥一起做一个完成率超 90% 的项目，戳戳戳这里-->TienChin 项目配套视频来啦。