Integration between bpmn-visualization and pm4py

This is an example integration between bpmn-visualization and PM4PY.

Architecture

The application consists of two main components: the frontend written in JavaScript and the backend written in Python.

• The frontend uses bpmn-visualization to visualize the BPMN process model and the statistics data over it.
• The backend is built using pm4py which processes data to perform process discovery and conformance checking. The results are then communicated to the frontend through Flask and Fetch API.

In addition to bpmn-visualization and pm4py, the application also leverages two other libraries, d3 and BPMN layout generators.

• d3 is used to manipulate colors and add a legend to the visualized BPMN diagrams.
• BPMN layout generators is used to generate the layout of the discovered BPMN process models produced by pm4py. ⚠️ Please note that BPMN layout generators is still in an experimental version and may not produce optimal or visually appealing layouts.

Prerequisites

You can skip this part if your system meets all the requirements listed below 👇

• Backend requirements
• Frontend requirements

Setup

• Clone the project in your preferred IDE (e.g. VScode)
• Prepare the backend environment:
  1. Navigate to the backend folder: cd backend
  2. Create a virtual environment for dependencies called venv using the following command:

       python -m venv venv

  3. Activate the created venv by running:
     • Windows:

       venv\Scripts\activate.bat

     • Unix/MacOS:

       venv/bin/activate

  4. Install the required libraries listed in requirements.txt by running:

       pip install -r requirements.txt

• Prepare the frontend environment:
  1. Navigate to the frontend folder: cd ../frontend
  2. Install the required libraries listed in package.json by running:

  npm install

Run

1. Navigate to the backend folder: cd backend
2. Run the application:

   python app.py

3. Open a new terminal and navigate to the frontendfolder: cd frontend
4. Run the development web server:

   npm run dev

5. Access the web application on the displayed localhost: http://localhost:5173/