https://github.com/process-analytics/bpmn-visualization-tutorial-getting-started
A JavaScript getting-started tutorial for the bpmn-visualization library
https://github.com/process-analytics/bpmn-visualization-tutorial-getting-started
analytics bpmn getting-started javascript low-quality monitoring process tutorial visualization
Last synced: 8 months ago
JSON representation
A JavaScript getting-started tutorial for the bpmn-visualization library
- Host: GitHub
- URL: https://github.com/process-analytics/bpmn-visualization-tutorial-getting-started
- Owner: process-analytics
- License: apache-2.0
- Created: 2022-09-22T07:09:06.000Z (over 3 years ago)
- Default Branch: develop
- Last Pushed: 2025-01-14T13:37:28.000Z (12 months ago)
- Last Synced: 2025-05-08T01:15:02.286Z (8 months ago)
- Topics: analytics, bpmn, getting-started, javascript, low-quality, monitoring, process, tutorial, visualization
- Language: CSS
- Homepage: https://process-analytics.github.io/bpmn-visualization-tutorial-getting-started/
- Size: 53.7 KB
- Stars: 6
- Watchers: 4
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# bpmn-visualization 'getting started' tutorial
This is a template bootstrap. You can clone it and use it to follow the [getting started tutorial](https://medium.com/@process-analytics/getting-started-with-bpmn-visualization-a54fbafae2df).
The tutorial uses the [bpmn-visualization](https://github.com/process-analytics/bpmn-visualization-js) library to visualize runtime monitoring data ⏲️.
The whole solution is available in the [solution](https://github.com/process-analytics/bpmn-visualization-tutorial-getting-started/tree/solution) branch.
The code of this tutorial is released under the [Apache 2.0](LICENSE) license.
## The deployed solution
To see the deployed solution: https://process-analytics.github.io/bpmn-visualization-tutorial-getting-started/
## How to Run
**NOTE**: this tutorial was tested with Node 16 and npm 8.16.0
Run
```bash
npm install
npm start
```
Open the URL mentioned in the console
Save your code systematically to see the changes in your browser.
## Tutorial Content
The tutorial explains how to visualize the following information using *bpmn-visualization*:
- Running instances and their number ⚙️
- State of instances: whether they predefined KPIs ⏱️ are violated:
- Two KPIs are considered: completion and waiting time of activities.
- Two levels of violation are defined: risky 🟠 and critical 🔴.
## Visualization
### Running instances and their number ⚙️
- **animated activity stroke**: to indicate that there are running instances of the corresponding activity
- **Overlays on activities**: to indicate the number of instances
### State and KPI violation ⏱️
**Colors meaning**:
- 🟢 Green: no violation
- 🟠 Orange: violation with a risky level
- 🔴 Red: Violation with a critical level
#### Activities:
- **Overlay filling color**:
- 🟢 Green: number of instances running on time according to a predefined completion time KPI
- 🟠 Orange: number of instances running late (with a risky level) according to a predefined completion time KPI
- 🔴 Red: number of instances running late (with critical level) according to a predefined completion time KPI
- **Speed of the animated stroke:** The following is applied in order:
- slow: if there exist instances running late with a critical level.
- medium: if there exist instances running late with a risky level
- fast: in case all instances are running on time
- **Shadow:** The following is applied in order:
- 🔴 Red: if there exist instances running late with a critical level.
- 🟠 Orange: if there exist instances running late with a risky level
- 🟢 Green: in case all instances are running on time
#### Edges:
- **Animation**: indicates that there are instances waiting for the next activity to be executed
- **Overlay**: indicates the number of instances waiting for the next activity to be executed
- **Overlay filling color**: The following is applied in order:
- 🔴 Red: if there exist instances waiting late with a critical level
- 🟠 Orange: if there exist instances waiting late with a risky level
## Styling BPMN Elements
For more details on how to style BPMN elements, check out the article: [All you need to know about styling BPMN elements](https://medium.com/@process-analytics/bpmn-visualization-all-you-need-to-know-about-styling-bpmn-elements-24289154c16c).