1. Project Overview

Bpmn Process Designer

A BPMN 2.0 process designer (web version) developed using bpmn.js, Vue 2.x, and ElementUI. You can use it to view and edit BPMN 2.0-compliant process files directly in your browser.

The project includes built-in support files for three workflow engines: activiti, flowable, and camunda. It also provides custom methods for common features and demonstration code.

2. Open Source License

Licensed under Apache-2.0

3. Screenshots

Interface Preview

4. Feature Overview

Function description

The project currently mainly consists of five components:

• Designer: The canvas component of bpmn.js and the fundamental dependency for all other components.
• Toolbar: The top toolbar, which relies on the Designer component to import, export, and preview XML files. Supports alignment, zooming, undo/redo, and toggling other third-party extension modules.
• Panel: A custom properties panel that includes basic properties, extended properties, listeners, documentation, and other configurations. Supports using the native properties panel.
• ContextMenu: A custom right-click menu for adding and changing node types.
• Settings: A global preferences component, mainly used to control demo project configurations. It is recommended to remove it in actual projects.

The project also includes several bpmn.js extensions:

• additional-components: Extension components that may depend on bpmn.js or native JavaScript control methods for Vue components.
• additional-modules: Functional modules that extend or override native bpmn.js modules. These are only associated with bpmn.js. Currently includes palette, contextMenu, renderer, and other components. These modules also serve as key reference code for further custom development.
• bo-utils: Common methods related to element businessObject, mainly involving property reading and updating. These methods are bound to the workflow engine used by the backend.
• bpmn-utils: Common utility methods related to bpmn.js.
• moddle-extensions: JSON Schema documents in the BPMN 2.0 specification format, including the basic bpmn.json, documentation for the three major workflow engines, and custom element documentation.

The entire project includes two messaging mechanisms: store and EventBus.

• The store mainly holds the current Modeler instance, node instances, and project configuration options. Other data-sharing approaches can be used instead during secondary development.
• The EventBus event bus is the core messaging mechanismof this project: because node instances cannot be made reactive by Vue, which affects performance and can easily cause errors when reading or updating properties, and because forms need to monitor node changes in real time, using a message bus to share events and data is therefore a better approach.

Available Features

1. Toolbar

• Import Files
• Export Files (xml, bpmn, svg)
• Preview File Strings (xml, json)
• Element Alignment (vertical: top, middle, bottom; horizontal: left, center, right)
• Zoom
• Undo, Redo, and Restore
• Extended Features (process simulation, minimap, keyboard shortcut hints, BPMN event inspection)

2. Editor

• Custom Process ID and Name
• Selectable Workflow Engines (camunda, activiti, flowable)
• Dynamic Background Settings
• Custom PaletteProvider
• Custom Renderer
• Custom ContentPadProvider
• Custom Rules
• Custom ElementFactory
• Extended Context Menu
• Custom Overlays
• Extended Tooltip
• Highlight Specific Elements

3. Properties Panel

• Basic Information (id, name, version, executable ...)
• Attached Documentation (documentation)
• Execution Jobs
• Asynchronous Configuration
• Process Start Events
• Extended Properties
• Execution Listeners
• Transition Conditions
• Task Listeners
• Multi-Instance Tasks (Countersignature, Or-Sign)

5. Tech Stack

TypeScript Support

The core dependency of bpmn.js is diagram.js, whose core modules already support TypeScript. However, the type declaration files (tds) for bpmn.js are still lagging behind. To address this, the author has written TypeScript declarations for commonly used bpmn.js plugins. Declaration files are available at: vite-vue-bpmn-process/types/declares.

To support Vue3 and the Vite development mode, a Vue3 + TSX implementation of this project is provided: vite-vue-bpmn-process

Installation and Usage

Visit Yifei Open Source: [https://code.exmay.com/](https://code.exmay.com/) Download

# Install dependencies
npm install

# Start the project
npm demo

Development guide

The of bpmn.jsCore Principles and Conventional Customization See the author's article: Advanced Bpmn.js Guide: Principle Analysis and Module Customization

Development and Customization of Common Modules, see the Comprehensive Bpmn.js Advanced Guide