Understanding Flowable Workflow Engine: Concepts, Tools, and Implementation

This article, originally published in the Rare Earth Juejin technical community, explains why workflow engines are needed and introduces the Flowable engine along with related tools.

1. Why We Need Workflows

Simple leave request processes can be handled with a status field, but more complex scenarios like expense approvals or laptop production involve multiple steps, parallel tasks, and conditional logic that a single status field cannot adequately represent.

In such cases, a generic, maintainable solution—namely a workflow engine—is required.

2. Three Major Workflow Engines

The main Java‑based workflow engines are Activiti, Flowable, and Camunda, each with distinct characteristics:

Activiti focuses on cloud integration, aligning with Spring Cloud and Docker.

Flowable offers a rich feature set and many extension points, which can make it appear complex.

Camunda is lightweight and provides a compact BPMN editor based on bpmn.io, suitable for embedded, flexible editors.

3. BPMN Diagram Standard

BPMN (Business Process Model and Notation) is the universal standard for modeling business processes, supported by all three engines.

A BPMN diagram consists of four main elements: events, sequence flows, tasks, and gateways.

Events

Start and end events are mandatory; intermediate and boundary events can also be used, e.g., a timer event that triggers five minutes after an order is placed.

Sequence Flows

Sequence flows connect events, tasks, and gateways, optionally with conditions (e.g., manager approval).

Tasks

Tasks are categorized as receive, send, service, script, business‑rule, and user tasks. Service tasks execute Java classes or remote REST services; script tasks run scripts; user tasks require human interaction.

Gateways

Gateways include exclusive (XOR), inclusive, event, and parallel gateways, each directing flow based on conditions or events.

4. Process Modeling Tools

Classic tool: Flowable Eclipse Designer (an Eclipse plugin). Most developers now use IDEA, which offers built‑in BPMN visualization, the flowable-bpmn-visualizer plugin, and other options.

4.1 flowable-bpmn-visualizer

Install the plugin, restart IDEA, and create a new BPMN file via the Designer option. Use ${variable} syntax for expressions and configure service tasks by specifying the full Java class path.

4.2 flowable‑ui

flowable‑ui is the official web UI for Flowable, providing modeling, deployment, task management, and identity management.

4.2.1 Installation

Download the WAR from the Flowable release page and start it with java -jar flowable-ui.war or via Docker:

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

4.2.2 Login

Default credentials: username admin , password test .

4.2.3 Functional Modules

Task application – deploy and run processes.

Modeler application – draw BPMN diagrams.

Admin application – manage BPMN, DMN, forms, etc.

Identity management – single sign‑on, user groups, permissions.

4.2.4 Identity Management

Create users, assign them to groups, and configure permissions for accessing IDM, admin, modeler, and workflow apps, as well as the REST API.

4.2.5 Admin Application

Provides overview and management of deployed processes.

4.2.6 Modeler Application

Core component for drawing BPMN diagrams.

4.2.7 Task Application

Deploy and execute processes directly from the UI.

4.3 bpmn.js

bpmn.js is a lightweight library for embedding BPMN editors in web applications. Two popular wrappers are workflow-bpmn-modeler and muheflow-bpmn-modeler , both built on Vue.

4.3.1 workflow-bpmn-modeler

Install via npm i workflow-bpmn-modeler or yarn add workflow-bpmn-modeler . Use the component in a .vue file, providing XML, users, groups, and a save handler.

<template>
  <div>
    <bpmn-modeler
            ref="refNode"
            :xml="xml"
            :users="users"
            :groups="groups"
            :categorys="categorys"
            :is-view="false"
            @save="save" />
  </div>
</template>

<script>
import bpmnModeler from "workflow-bpmn-modeler";
export default {
  components: { bpmnModeler },
  data() { return { xml: "", users: [{ name: "javaboy", id: 1 }], groups: [{ name: "经理", id: 4 }], categorys: [] }; },
  methods: { getModelDetail() {}, save(data) { console.log(data); } }
};
</script>

4.3.2 muheflow-bpmn-modeler

Similar to workflow‑bpmn‑modeler, based on Vue and [email protected], suitable for Flowable 6.4.1.

Overall, the article provides a comprehensive introduction to workflow concepts, BPMN standards, major Java workflow engines, and practical tooling for modeling and managing business processes.