{"id":26881843,"url":"https://github.com/process-analytics/bpmn-visualization-pm4py","last_synced_at":"2025-03-31T15:58:46.727Z","repository":{"id":65624078,"uuid":"589515533","full_name":"process-analytics/bpmn-visualization-pm4py","owner":"process-analytics","description":"Example of integration between bpmn-visualization and pm4py","archived":false,"fork":false,"pushed_at":"2025-01-13T16:20:59.000Z","size":5788,"stargazers_count":12,"open_issues_count":16,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-13T17:27:58.512Z","etag":null,"topics":["bpmn","conformance-checking","demo","example","integration","low-quality","pm4py","process-discovery","process-mining","python","visualization"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/process-analytics.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-16T09:56:59.000Z","updated_at":"2024-11-12T01:06:51.000Z","dependencies_parsed_at":"2024-04-18T04:38:59.397Z","dependency_job_id":"5377b87a-c6c0-4150-b59d-7b476d470eaa","html_url":"https://github.com/process-analytics/bpmn-visualization-pm4py","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/process-analytics%2Fbpmn-visualization-pm4py","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/process-analytics%2Fbpmn-visualization-pm4py/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/process-analytics%2Fbpmn-visualization-pm4py/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/process-analytics%2Fbpmn-visualization-pm4py/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/process-analytics","download_url":"https://codeload.github.com/process-analytics/bpmn-visualization-pm4py/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246493370,"owners_count":20786550,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bpmn","conformance-checking","demo","example","integration","low-quality","pm4py","process-discovery","process-mining","python","visualization"],"created_at":"2025-03-31T15:58:46.128Z","updated_at":"2025-03-31T15:58:46.714Z","avatar_url":"https://github.com/process-analytics.png","language":"JavaScript","readme":"# Integration between `bpmn-visualization` and `pm4py`\n\n| Archived on 2024-01-13 | We no longer use this repository. |\n| -------- | -------- |\n\nThis is an example integration between [bpmn-visualization](https://github.com/process-analytics/bpmn-visualization-js/) and [PM4PY](https://github.com/pm4py).\n\n## Architecture\nThe application consists of two main components: the frontend written in JavaScript and the backend written in Python. \n* The frontend uses **bpmn-visualization** to visualize the BPMN process model and the statistics data over it. \n* 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](https://flask.palletsprojects.com/) and [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).\n\nIn addition to bpmn-visualization and pm4py, the application also leverages two other libraries, [d3](https://d3js.org/) and [BPMN layout generators](https://github.com/process-analytics/bpmn-layout-generators). \n* **d3** is used to manipulate colors and add a legend to the visualized BPMN diagrams.\n* **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.\n\n![Application architecture](./architecture/architecture.svg)\n\n## Prerequisites\n\nYou can skip this part if your system meets all the requirements listed below 👇\n\n* [Backend requirements](./backend/README.md)\n* [Backend Mock Server requirements](./backend-mock-server/README.md) (only needed if you want to simulate the Backend during Frontend developments)\n* [Frontend requirements](./frontend/README.md)\n\n\n## Setup\n* Clone the project in your preferred IDE (e.g. VScode)\n* Prepare the backend environment:\n    1. Navigate to the `backend` folder: `cd backend`\n    2. Create a virtual environment for dependencies called `venv` using the following command: \n        ```sh \n          python -m venv venv\n        ```\n    3. Activate the created `venv` by running:\n        * **Windows**: \n        ```sh \n          venv\\Scripts\\activate.bat\n        ```\n        * **Unix/MacOS**:\n        ```sh\n          venv/bin/activate\n        ```\n    4. Install the required libraries listed in `requirements.txt` by running:\n        ```sh\n          pip install -r requirements.txt\n        ```\n* Prepare the frontend environment:\n    1. Navigate to the `frontend` folder: `cd ../frontend` \n    2. Install the required libraries listed in `package.json` by running:\n    ```sh\n    npm install\n    ```\n## Run\n1. Navigate to the `backend` folder: `cd backend`\n2. Run the application:\n    ```sh\n    python app.py\n    ```\n3. Open a new terminal and navigate to the `frontend`folder: `cd frontend`\n4. Run the development web server: \n    ```sh\n    npm run dev\n    ```\n5. Access the web application on the displayed localhost: http://localhost:5173/ \n\n## License\n\nThis project is licensed under the GPL-3.0 license because the backend part of the code uses the pm4py library, which is licensed under this license.\n\nThe front end part of the code uses the bpmn-visualization library, which is licensed under the Apache-2.0 license. The legends in the project are generated using d3, which is licensed under the ISC license.\n\nPlease note that the different licenses may have different requirements, so make sure to review the license terms carefully before using or contributing to this project.\n\n## Release how-to\n\nWhen all updates have been completed, you are ready to publish a new release.\n\nCreate a new GitHub release by following the [GitHub help](https://help.github.com/en/github/administering-a-repository/managing-releases-in-a-repository#creating-a-release)\n- for `Tag version`, use a value following the **vX.Y.Z** scheme using the [Semantic Versioning](https://semver.org/).\n- for `Target`\n    - usually, keep the `main` branch except if new commits that you don't want to integrate for the release are already\n      available in the branch\n    - in that case, choose a dedicated commit\n- Description\n    - briefly explain the contents of the new version\n    - make GitHub generates the [release notes automatically](https://docs.github.com/en/repositories/releasing-projects-on-github/automatically-generated-release-notes)\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprocess-analytics%2Fbpmn-visualization-pm4py","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprocess-analytics%2Fbpmn-visualization-pm4py","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprocess-analytics%2Fbpmn-visualization-pm4py/lists"}