• Published:

When I needed to add an approval workflow to a business system, I mainly compared two engines: Activity and Flowable. After weighing the actual use cases, ease of operation, and overall fit, I ended up choosing flowable.

This is not a backend-focused walkthrough. There is already no shortage of material on workflow engine integration. What matters here is the front-end process designer.

A good approval designer cuts down on unnecessary back-and-forth, makes configuration easier, and lets teams build approval flows much more efficiently.

Why most designers did not fit

There are quite a few open-source workflow designers available, and some are already fairly complete. Even so, I did not go with them for a few recurring reasons:

  1. They were too tightly coupled to a specific business framework.
  2. Their own frameworks added too much wrapping and abstraction.
  3. Their technology choices did not match my stack.
  4. Secondary development and customization were inconvenient.

Then I came across the open-source FlowLong designer. Both the UI and the codebase felt unusually clean, and it matched my scenario very well.

What FlowLong is

FlowLong is presented as a domestically built workflow engine, using a JSON-based instance model together with a lightweight approval-flow designer, with a strong focus on approval concepts commonly needed in Chinese business processes.

Feature coverage

It supports part of the standard BPMN model, while also covering workflow behaviors that are especially common in real-world approval systems.

<table> <thead> <tr> <th>Supported feature</th> <th>Description</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>Sequential countersign</td> <td>Multiple approvers are configured on the same node, for example A, B, and C. Tasks are received one by one in order. A approves first, then B can act only after A submits, and the process moves on only after everyone agrees.</td> <td>✅</td> </tr> <tr> <td>Parallel countersign</td> <td>Multiple approvers such as A, B, and C receive the task at the same time on the same node, and the process continues only after all of them approve.</td> <td>✅</td> </tr> <tr> <td>Any-sign</td> <td>A node has multiple handlers, and the process can move to the next node as soon as any one of them completes it.</td> <td>✅</td> </tr> <tr> <td>Vote-sign</td> <td>Multiple approvers such as A, B, and C are assigned different voting weights. When the weighted approval ratio exceeds 50%, the process can advance.</td> <td>✅</td> </tr> <tr> <td>CC</td> <td>Sends the approval result to the configured CC recipients.</td> <td>✅</td> </tr> <tr> <td>Reject / send back</td> <td>Resets the approval to a specific node for reprocessing. This can mean returning to the applicant, returning to the previous step, or returning to any designated step.</td> <td>✅</td> </tr> <tr> <td>Assignment</td> <td>Lets users decide task transfer, delegation, primary handling, and related operations.</td> <td>✅</td> </tr> <tr> <td>Transfer</td> <td>A transfers the task to B for approval; once B approves, the process moves to the next node.</td> <td>✅</td> </tr> <tr> <td>Delegate</td> <td>A delegates the task to B; after B approves, it returns to A, and only after A approves does it move forward.</td> <td>✅</td> </tr> <tr> <td>Jump</td> <td>Allows the current workflow instance to jump to any processing node.</td> <td>✅</td> </tr> <tr> <td>Take back</td> <td>Before the current handler has processed the item, the submitter from the previous node can retrieve it.</td> <td>✅</td> </tr> <tr> <td>Revoke</td> <td>The workflow initiator can revoke the process.</td> <td>✅</td> </tr> <tr> <td>Add signers</td> <td>Lets the current handler add extra participants to the current approval node when needed.</td> <td>✅</td> </tr> <tr> <td>Remove signers</td> <td>Reduces the number of handlers before the current handler takes action.</td> <td>✅</td> </tr> <tr> <td>Claim</td> <td>Supports claiming public tasks.</td> <td>✅</td> </tr> <tr> <td>Read status</td> <td>Displays whether a task has been viewed.</td> <td>✅</td> </tr> <tr> <td>Reminder</td> <td>Sends a prompt to the current handler to process the task.</td> <td>✅</td> </tr> <tr> <td>Communication</td> <td>Enables communication with the current active task handler.</td> <td>✅</td> </tr> <tr> <td>Terminate</td> <td>Ends the workflow instance at any node.</td> <td>✅</td> </tr> </tbody> </table>

Running the backend

You can import the project into IntelliJ IDEA and manage dependencies with either Gradle or Maven.

git clone https://gitee.com/aizuda/flowlong.git

Recommended setup flow:

  • Run the test cases first.
  • Initialize the database with db/flowlong-mysql.sql.
  • Open the flowlong-spring-boot-starter module and go to the test section under java/test.
  • Find the MySQL-related test classes such as Test...java, run them, and observe how the database tables change.

Project structure

|- db                               数据库文件存放目录
|- flowlong-core                    工作流核心库
|- flowlong-mybatis-plus            数据访问层，默认 MybatisPlus 当然你可以适配其它 ORM
|- flowlong-solon-example           Solon 演示案例
|- flowlong-solon-plugin            Solon 启动插件
|- flowlong-spring-boot-example     SpringBoot 演示案例
|- flowlong-spring-boot-starter     SpringBoot 启动插件
|- build.gradle                     Gradle 依赖管理
|- pom.xml                          Maven 依赖管理

At a glance, the repository is split into the core workflow library, a default MyBatis-Plus data-access layer, Spring Boot and Solon examples, corresponding startup plugins, and both Gradle and Maven build files.

The designer

For the front-end designer, you can clone the separate project and open it in VS Code.

git clone https://gitee.com/flowlong/flowlong-designer.git

Install dependencies, run locally, or build it with the following commands:

# 安装依赖
npm install
# 本地运行
npm run dev
# 编译打包
npm run build

Here is the preview of the designer:

designer preview

What stood out most to me was not just the feature list, but the fact that the designer stays simple enough to use while still covering the approval behaviors that matter in actual business scenarios. That balance is exactly why FlowLong felt like the right fit.

Related Posts