![\"Examples](\"docs/users/images/custom-behavior-path-highlighting.gif\" "\\"bpmn-visualization\\"")
\n \n ![\"npm](\"https://img.shields.io/npm/v/bpmn-visualization.svg?color=orange\")
\n \n \n ![\"GitHub](\"https://img.shields.io/github/v/release/process-analytics/bpmn-visualization-js?label=changelog&include_prereleases\")
![\"Live](\"https://img.shields.io/badge/demo-online-blueviolet.svg\"){kind=icon}
\n \n \n ![\"Build\"](\"https://github.com/process-analytics/bpmn-visualization-js/workflows/Build/badge.svg\"){kind=icon}
\n \n \n \n \n \n
![\"Gitpod\"](\"https://img.shields.io/badge/Gitpod-ready--to--code-chartreuse?logo=gitpod\"){kind=icon}
\n \n ![\"PRs](\"https://img.shields.io/badge/PRs-welcome-ff69b4.svg?style=flat-square\"){kind=icon}
\n \n \n ![\"Contributor](\"https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg\"){kind=icon}
\n \n \n ![\"License\"](\"https://img.shields.io/github/license/process-analytics/bpmn-visualization-js?color=blue\")
![\"Chrome\"](\"https://www.google.com/chrome/static/images/chrome-logo.svg\"){kind=logo}
Chrome | ![\"Firefox\"](\"http://blog.mozilla.org/design/files/2019/10/Fx-Browser-icon-fullColor.svg\"){kind=icon}
Firefox | ![\"Safari\"](\"https://upload.wikimedia.org/wikipedia/commons/5/52/Safari_browser_logo.svg\"){kind=logo}
Safari | ![\"Edge\"](\"https://avatars0.githubusercontent.com/u/11354582?s=200&v=4\")
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.47.0`:\n - Brave 1.83.112\n - Chromium 141.0.7390.70\n - Opera 122.0.5643.92\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\n...\n\n...\n\n```\n\n\n### 👤 User documentation\nThe User documentation (with the feature list & 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## 🚀 Repository Demo\n\nThis repository includes a **Load and Navigation demo** located in the [dev](./dev) directory, which is also featured on the [example site](https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/index.html) and used for PR previews.\n\nThe demo supports customization through URL query parameters. For instance, you can set a specific theme by passing `style.theme=light-blue`, or enable a custom icon painter with `renderer.iconPainter.use.custom=true`.\n\nFor a complete list of configuration options, refer to the [source code](./dev/ts/shared/main.ts).\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 © 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/images/branding/statically-logo-dark.svg \"statically.io\")](https://statically.io)\n\n**[statically.io](https://statically.io)** (demo and examples live environments)\n\n![\"surge.sh](\"https://surge.sh/images/logos/svg/surge-logo.svg\" "\\"surge.sh\\""){kind=logo}
\n\n**[surge.sh](https://surge.sh)** (demo and documentation preview environments)\n\n\n[demo-live-environment]: https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/demo/index.html\n","readmeFilename":"README.md"}