{"id":26881921,"url":"https://github.com/process-analytics/bpmn-visualization-js","last_synced_at":"2025-05-15T12:03:37.254Z","repository":{"id":36956829,"uuid":"234355964","full_name":"process-analytics/bpmn-visualization-js","owner":"process-analytics","description":"A TypeScript library for visualizing process execution data on BPMN diagrams","archived":false,"fork":false,"pushed_at":"2025-05-05T08:13:52.000Z","size":43900,"stargazers_count":250,"open_issues_count":84,"forks_count":33,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-05-05T09:35:25.680Z","etag":null,"topics":["analytics","bpmn","browser","hacktoberfest","process","typescript","visualization"],"latest_commit_sha":null,"homepage":"https://process-analytics.github.io/bpmn-visualization-js/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/process-analytics.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-01-16T15:56:31.000Z","updated_at":"2025-05-05T08:13:11.000Z","dependencies_parsed_at":"2023-12-18T15:07:45.430Z","dependency_job_id":"dd007060-9adc-4b62-be88-e86b12b87f35","html_url":"https://github.com/process-analytics/bpmn-visualization-js","commit_stats":{"total_commits":2182,"total_committers":13,"mean_commits":"167.84615384615384","dds":0.501833180568286,"last_synced_commit":"1b8b7d8f29e73557f8d301f883e38c1e871355c6"},"previous_names":[],"tags_count":93,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/process-analytics%2Fbpmn-visualization-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/process-analytics%2Fbpmn-visualization-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/process-analytics%2Fbpmn-visualization-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/process-analytics%2Fbpmn-visualization-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/process-analytics","download_url":"https://codeload.github.com/process-analytics/bpmn-visualization-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254337612,"owners_count":22054253,"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":["analytics","bpmn","browser","hacktoberfest","process","typescript","visualization"],"created_at":"2025-03-31T15:58:57.212Z","updated_at":"2025-05-15T12:03:37.187Z","avatar_url":"https://github.com/process-analytics.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003ebpmn-visualization TypeScript library\u003c/h1\u003e\n\u003cdiv align=\"center\"\u003e\n    \u003cp align=\"center\"\u003e\u003cimg title=\"bpmn-visualization\" src=\"docs/users/images/custom-behavior-path-highlighting.gif\" alt=\"Examples of the bpmn-visualization TypeScript library\"\u003e\u003c/p\u003e\n    \u003cp align=\"center\"\u003e \n        \u003ca href=\"https://npmjs.org/package/bpmn-visualization\"\u003e\n          \u003cimg alt=\"npm package\" src=\"https://img.shields.io/npm/v/bpmn-visualization.svg?color=orange\"\u003e \n        \u003c/a\u003e \n        \u003ca href=\"https://github.com/process-analytics/bpmn-visualization-js/releases\"\u003e\n          \u003cimg alt=\"GitHub release (latest by date including pre-releases)\" src=\"https://img.shields.io/github/v/release/process-analytics/bpmn-visualization-js?label=changelog\u0026include_prereleases\"\u003e \n        \u003c/a\u003e \n        \u003ca href=\"https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/index.html\"\u003e\n          \u003cimg alt=\"Live Demo\" src=\"https://img.shields.io/badge/demo-online-blueviolet.svg\"\u003e \n        \u003c/a\u003e \n        \u003ca href=\"https://github.com/process-analytics/bpmn-visualization-js/actions\"\u003e\n          \u003cimg alt=\"Build\" src=\"https://github.com/process-analytics/bpmn-visualization-js/workflows/Build/badge.svg\"\u003e \n        \u003c/a\u003e \n        \u003ca href=\"https://sonarcloud.io/dashboard?id=process-analytics_bpmn-visualization-js\"\u003e\n          \u003cimg alt=\"Coverage\" src=\"https://sonarcloud.io/api/project_badges/measure?project=process-analytics_bpmn-visualization-js\u0026metric=coverage\"\n               title=\"The code coverage is underestimated. It doesn't count the code that is only tested through HTML page.\"\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://gitpod.io/#https://github.com/process-analytics/bpmn-visualization-js\" target=\"_blank\"\u003e\n          \u003cimg alt=\"Gitpod\" src=\"https://img.shields.io/badge/Gitpod-ready--to--code-chartreuse?logo=gitpod\"\u003e \n        \u003c/a\u003e \n        \u003cbr\u003e\n        \u003ca href=\"CONTRIBUTING.md\"\u003e\n          \u003cimg alt=\"PRs Welcome\" src=\"https://img.shields.io/badge/PRs-welcome-ff69b4.svg?style=flat-square\"\u003e \n        \u003c/a\u003e \n        \u003ca href=\"CODE_OF_CONDUCT.md\"\u003e\n          \u003cimg alt=\"Contributor Covenant\" src=\"https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg\"\u003e \n        \u003c/a\u003e \n        \u003ca href=\"LICENSE\"\u003e\n          \u003cimg alt=\"License\" src=\"https://img.shields.io/github/license/process-analytics/bpmn-visualization-js?color=blue\"\u003e \n        \u003c/a\u003e\n    \u003c/p\u003e\n\u003c/div\u003e  \n\u003cbr\u003e\n\n`bpmn-visualization` is a TypeScript library for visualizing process execution data on [BPMN](https://www.omg.org/spec/BPMN/2.0.2/) diagrams, with simplicity.\n\nBased on the customization capability, it provides a set of diagram visualization features that includes additional display options for execution data (_highlighting of some elements_, _adding customizable overlays_, and more) as well as personalized interactive capabilities (_mouse hover_, _click_, and more).\n\nWe hope it will help you to create applications for process visualization and analysis 🙂\n\n\n## 🎮 Demo and examples\n\nPlease check the [__⏩ live environment__](https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/index.html).\n\nYou will find their basic usage as well as detailed examples showing possible rendering customizations.\n\n\n## 📂 Repository Structure\n\nThe [dev](./dev) directory contains the source code for the **Load and Navigation demo** showcased on the [example site](https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/index.html). \\\nThis demo is also used for the PR previews of this repository.\n\n\n## 🔆 Project Status\n\n`bpmn-visualization` is actively developed and maintained.\n\nBefore the release of version `1.0.0`, there may be some breaking changes. We avoid these as much as possible, and carefully document them in the release notes.\nAs far as possible, we maintain compatibility for some minor versions.\n\n\n## 🤩 Why using bpmn-visualization?\n\n- ✨ True opensource license without watermark display\n- ⚡️ Strong identity: the only BPMN viewer with a woman icon in the User Tasks\n- 🎸 Fully documented and with a lot of integration examples\n- 👓 Highly customizable rendering in a simple way\n- 🔥 TypeScript support\n- 🎯 Battle tested: high test coverage, thousands of tests, including tests on all supported browsers for Linux, macOS and Windows\n\n\n## 🎨 Features\n\nAlready available features:\n- [Supported BPMN Elements](https://process-analytics.github.io/bpmn-visualization-js/#supported-bpmn-elements).\n- [Navigate through the BPMN diagram](https://process-analytics.github.io/bpmn-visualization-js/#diagram-navigation)\n- [Display execution data with interactive capabilities](https://process-analytics.github.io/bpmn-visualization-js/#process_data)\n\n🔥 Some add-on features are available through a dedicated package: [__⏩ bpmn-visualization-addons__](https://github.com/process-analytics/bpmn-visualization-addons/)\n\nPlanned new features:\n- Additional BPMN styling capabilities\n- Library extension points\n\n\n## 🌏 Browsers Support\n\n| \u003cimg src=\"https://www.google.com/chrome/static/images/chrome-logo.svg\" alt=\"Chrome\" width=\"18px\" height=\"18px\" /\u003e Chrome | \u003cimg src=\"http://blog.mozilla.org/design/files/2019/10/Fx-Browser-icon-fullColor.svg\" alt=\"Firefox\" height=\"18px\" /\u003e Firefox | \u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/5/52/Safari_browser_logo.svg\" alt=\"Safari\" width=\"18px\" height=\"18px\" /\u003e Safari | \u003cimg src=\"https://avatars0.githubusercontent.com/u/11354582?s=200\u0026v=4\" alt=\"Edge\" width=\"18px\" height=\"18px\" /\u003e Edge |\n| :---------: | :---------: | :---------: | :---------: |\n|  ✔️ |  ✔️ |  ✔️ |  ✔️ |\n\n**Notes**:\n- Chromium based browsers should work (automatic tests are run with Chromium canary releases). In particular, the following\ndesktop browsers are known working with `bpmn-visualization@0.44.0`:\n  - Brave 1.70.126\n  - Chromium: 129.0.6668.100\n  - Opera 114.0.5282.102\n- Support Chromium Edge but not Legacy Edge\n- The library may work with the other browsers. They must at least support ES2015.\n\n\n## ♻️ Usage\nThe library is available from [NPM](https://npmjs.org/package/bpmn-visualization). \\\nWe support various module formats such as:\n- [ESM](https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm): `dist/bpmn-visualization.esm.js`\n- [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE): `dist/bpmn-visualization.js` and its minified companion `dist/bpmn-visualization.min.js`\n\n\n### 📌 Usage in applications and projects\n\nInstall `bpmn-visualization`:\n```shell script\nnpm i bpmn-visualization\n```\n\nThen use this snippet to load your BPMN diagram in a page:\n```javascript\nimport { BpmnVisualization } from 'bpmn-visualization';\n\n// initialize `bpmn-visualization` and load the BPMN diagram\n// 'bpmn-container' is the id of the HTMLElement that renders the BPMN Diagram\nconst bpmnVisualization = new BpmnVisualization({ container: 'bpmn-container' });\nlet bpmnContent; // your BPMN 2.0 XML content\ntry {\n  bpmnVisualization.load(bpmnContent);\n} catch (error) {\n  console.error('Error loading BPMN content', error);\n}\n```\n\nYou can set the BPMN content using one of the following ways:\n  * Copy/Paste directly the XML content in a variable\n  * Load it from an url, like this [example](https://github.com/process-analytics/bpmn-visualization-examples/blob/master/examples/display-bpmn-diagram/load-remote-bpmn-diagrams/index.html)\n  * Load from your computer, like the [demo example](https://github.com/process-analytics/bpmn-visualization-examples/tree/master/examples/display-bpmn-diagram/load-local-bpmn-diagrams/index.html)\n\n\n#### 📜 TypeScript Support\n\nThe `bpmn-visualization` npm package includes type definitions, so the integration works out of the box in TypeScript projects.\n`bpmn-visualization` requires **TypeScript 4.0** or greater. Past versions had the following requirements:\n  * 0.21.0 to 0.27.1: TypeScript 4.5\n  * 0.17.1 to 0.20.1: TypeScript 4.3\n\nℹ️ If you are looking for examples of projects integrating `bpmn-visualization` with TypeScript, see the `bpmn-visualization-examples` [repository](https://github.com/process-analytics/bpmn-visualization-examples/#bpmn-visualization-usage-in-projects).\n\n---\n**NOTE**\n\nPrior version 0.27.0, `bpmn-visualization` required extra configuration for TypeScript projects as explained in the [v0.26.2 README](https://github.com/process-analytics/bpmn-visualization-js/tree/v0.26.2#-typescript-support).\n\n---\n\n\n### 💠 Browser usage\n\nIn the HTML page:\n   * Load `bpmn-visualization` (replace `{version}` by the recent version)\n   * Define the container that displays the BPMN diagram, here _bpmn-container_\n   * Load your BPMN diagram in a page\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/bpmn-visualization@{version}/dist/bpmn-visualization.min.js\"\u003e\u003c/script\u003e\n...\n\u003cdiv id=\"bpmn-container\"\u003e\u003c/div\u003e\n...\n\u003cscript\u003e\n  // initialize `bpmn-visualization` and load the BPMN diagram\n  // 'bpmn-container' is the id of the HTMLElement that renders the BPMN Diagram\n  const bpmnVisualization = new bpmnvisu.BpmnVisualization({ container: 'bpmn-container'});\n  let bpmnContent; // your BPMN 2.0 XML content\n  try {\n    bpmnVisualization.load(bpmnContent);\n  } catch (error) {\n    console.error('Error loading BPMN content', error);\n  }\n\u003c/script\u003e\n```\n\n\n### 👤 User documentation\nThe User documentation (with the feature list \u0026 the public API) is available in the [documentation site](https://process-analytics.github.io/bpmn-visualization-js/).\n\n\n### ⚒️ More\n\n💡 Want to know more about `bpmn-visualization` usage and extensibility? Have a look at the\n[__⏩ live examples site__](https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/index.html).\n\nFor more technical details and how-to, go to the `bpmn-visualization-examples` [repository](https://github.com/process-analytics/bpmn-visualization-examples/).\n\n\n## 🔧 Contributing\n\nTo contribute to `bpmn-visualization`, fork and clone this repository locally and commit your code on a separate branch.  \nPlease write tests for your code before opening a pull-request:\n\n```sh\nnpm test  # run all tests\n```\n\nYou can find more detail in our [Contributing guide](CONTRIBUTING.md). Participation in this open source project is subject to a [Code of Conduct](CODE_OF_CONDUCT.md).\n\n✨ A BIG thanks to all our contributors 🙂\n\n\n## 📃 License\n\n`bpmn-visualization` is released under the [Apache 2.0](LICENSE) license.  \nCopyright \u0026copy; 2020-present, Bonitasoft S.A.\n\nSome BPMN icons used by `bpmn-visualization` are derived from existing projects. See the [BPMN Support documentation](https://process-analytics.github.io/bpmn-visualization-js/#supported-bpmn-elements)\nfor more details:\n- [draw.io](https://github.com/jgraph/drawio) (Apache-2.0)\n- [flaticon](https://www.flaticon.com) ([freepikcompany license](https://www.freepikcompany.com/legal#nav-flaticon))\n- [noun project](https://thenounproject.com/) (mainly Creative Commons CCBY 3.0)\n\n\n## ⚡ Powered by\n\n[![statically.io logo](https://statically.io/icons/icon-96x96.png \"statically.io\")](https://statically.io)\n\n**[statically.io](https://statically.io)** (\u003ckbd\u003edemo\u003c/kbd\u003e and \u003ckbd\u003eexamples\u003c/kbd\u003e live environments)\n\n\u003cimg src=\"https://surge.sh/images/logos/svg/surge-logo.svg\" alt=\"surge.sh logo\" title=\"surge.sh\" width=\"110\"/\u003e\n\n**[surge.sh](https://surge.sh)** (\u003ckbd\u003edemo\u003c/kbd\u003e and \u003ckbd\u003edocumentation\u003c/kbd\u003e preview environments)\n\n\n[demo-live-environment]: https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/demo/index.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprocess-analytics%2Fbpmn-visualization-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprocess-analytics%2Fbpmn-visualization-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprocess-analytics%2Fbpmn-visualization-js/lists"}