Examples of the bpmn-visualization TypeScript library

This repository contains examples showing how to use the [bpmn-visualization](https://github.com/process-analytics/bpmn-visualization-js) TypeScript library. ## 🎮 Live Environment Give a try to the [__⏩ live environment__](https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/index.html) to quickly have an overview of the `bpmn-visualization` capabilities. You will find both - demos: show what you can do with `bpmn-visualization` in various use cases, in dedicated user oriented situations - examples: demonstrate how to use a single feature. ## 📖 Getting BPMN Diagrams Some examples require loading local files. If you are looking for BPMN diagram files, you can use resources from: - the BPMN Model Interchange Working Group ([BPMN MIWG](https://www.omgwiki.org/bpmn-miwg), an initiative "_to support, facilitate, and promote the interchange of BPMN Models_" - [bpmn-miwg-test-suite](https://github.com/bpmn-miwg/bpmn-miwg-test-suite) - [bpmn-miwg-demos](https://github.com/bpmn-miwg/bpmn-miwg-demos) - the Process Analytics project - [BPMN diagrams of the bpmn-visualization-examples repository](./bpmn-files/README.md) - [BPMN diagrams used in the tests of `bpmn-visualization`](https://github.com/process-analytics/bpmn-visualization-js/blob/master/test/fixtures/bpmn/) ## 🖥️ Running examples locally Some examples and demos may load ES Modules; in that case, you cannot open html pages directly from your local disk. For instance, on Chrome, the Console would display the following errors > Access to script at 'file:///...../bpmn-visualization-examples/examples/my-file.js' from origin 'null' has been > blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, > chrome-extension, https. index.html:1 > Failed to load resource: net::ERR_FAILED utils.js:1 To access such examples, you need to run a local web server and then access the examples via the http protocol. We advise to make the local web server serve the whole repository, to also be able to access to the demo (resources available in the `./demo` folder). Go to the repository root and use one the following solutions - python2: `python -m SimpleHTTPServer 8001` and go to http://localhost:8001/examples/ - python3: `python3 -m http.server 8002` and go to http://localhost:8002/examples/ - nodejs/npm: `npx http-server --port 8003 -o ./examples` and your default web browser opens http://localhost:8003/examples/ - .... your own lovely web server ## 🚸 Prerequisites for reuse in projects Some examples are provided for direct use in the web browser. If you want to integrate their related code in a project, adaptations may be required. You can check the [examples projects](#projects) in this repository or the [Live IDE examples](#live_ide) to know how to bootstrap `bpmn-visualization` in a project. TypeScript's users should also read the paragraph about the [TypeScript support in the `bpmn-visualization` README](https://github.com/process-analytics/bpmn-visualization-js/#-typescript-support) especially when using `bpmn-visualization` prior version `0.27.0`. ## 👁️‍🗨️ Demos - [Load and Navigation demo](demo/load-and-navigation/index.html) - show several features of `bpmn-visualization` at the same time. The sources of the demo are available in the [repository](https://github.com/process-analytics/bpmn-visualization-js) of `bpmn-visualization` . - [Hacktoberfest themes](demo/hacktoberfest-custom-themes/README.md) - special Hacktoberfest diagram with Hacktoberfest colors - [Monitoring of all process instances demo](demo/monitoring-all-process-instances/README.md) - show how to use `bpmn-visualization` to render the monitoring of all process instances for a defined process - [Demo for ICPM 2022](https://github.com/process-analytics/icpm-demo-2022#readme) - show a Process Mining scenario (_Conformance_, _Compliance_ and _Happy path_) - [Draw a path](demo/draw-path/README.md) - show how to draw a path - [Demo for Bonita Day 2023](https://github.com/process-analytics/bonita-day-demo-2023#readme) - monitor process and case progress, assign new actors to overdue tasks, view past activities, and track the live execution of a process. - [Prediction demo](demo/prediction/README.md) - show how to use `bpmn-visualization` to visualize prediction data. - [Addons features](https://github.com/process-analytics/bpmn-visualization-addons#readme) - demo of addons for `bpmn-visualization` provided by `bpmn-visualization-addons`. ## Tutorials - [Quick start](tutorials/quick-start/README.md) - the simplest way to integrate `bpmn-visualization` in an HTML page - [Getting started](https://github.com/process-analytics/bpmn-visualization-tutorial-getting-started#readme) (October 2022) - a getting started tutorial to `bpmn-visualization` using an online monitoring scenario (with its [additional article](https://medium.com/@process-analytics/getting-started-with-bpmn-visualization-a54fbafae2df)) - [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) (July 2023) - an article dealing specifically with BPMN element style management ## 🔭 Examples ### `bpmn-visualization` usage in browsers ### Basic examples Display BPMN Diagram: - [Load local BPMN diagrams](examples/display-bpmn-diagram/load-local-bpmn-diagrams/README.md) - load BPMN diagrams stored on your local device - [Load remote BPMN diagrams](examples/display-bpmn-diagram/load-remote-bpmn-diagrams/README.md) - load BPMN diagrams from the [bpmn-miwg-test-suite GitHub repository](https://github.com/bpmn-miwg/bpmn-miwg-test-suite) ### Diagram navigation examples - [BPMN Diagram navigation](examples/diagram-navigation/diagram-navigation/README.md) - use the mouse to zoom and move the diagram - [BPMN Diagram fit on load](examples/diagram-navigation/diagram-fit-on-load/README.md) - fit the BPMN diagram in the container on load - [BPMN Diagram fit after load](examples/diagram-navigation/diagram-fit-after-load/README.md) - fit the BPMN diagram in the container after load - [Filter pools of the BPMN Diagram at load time](examples/diagram-navigation/pools-filter-on-load/README.md) - filter pools of the BPMN diagram on load ### Overlay examples - [Add default overlays and remove all overlays](examples/overlays/add-remove/README.md) - add default overlays and remove all overlays on BPMN elements - [Add stylized overlays](examples/overlays/add-stylized/README.md) - add stylized overlays on BPMN elements - [Custom overlay default style](examples/overlays/custom-overlay-default-style/README.md) - custom default style of the overlays ### Custom BPMN Theme examples **DISCLAIMER: extension points are currently very experimental and are subject to change.** They are mainly hacks to let you see what will be later available in a more integrated way. \ Custom BPMN Theme features will be progressively added to `bpmn-visualization`. See the [`Extensions` Milestone](https://github.com/process-analytics/bpmn-visualization-js/milestone/13). - [Custom user task icon](examples/custom-bpmn-theme/custom-user-task-icon/README.md) - use your own icon - [Custom colors](examples/custom-bpmn-theme/custom-colors/README.md) - custom defaults, specific to BPMN element types - [Custom edge marker colors](examples/custom-bpmn-theme/custom-edge-marker-colors/README.md) - custom colors for Edge start and end markers - [Custom fonts](examples/custom-bpmn-theme/custom-fonts/README.md) - custom defaults, specific to BPMN element types ### Custom behavior examples - [Apply CSS classes](examples/custom-behavior/apply-css-classes/README.md) - highlight elements and paths on demand on the BPMN diagram - [Attach tooltip and popover to BPMN elements](examples/custom-behavior/javascript-tooltip-and-popover/README.md) - interact with the BPMN Diagram to display additional information - [Select elements by BPMN kind](examples/custom-behavior/select-elements-by-bpmn-kind/README.md) - to select elements by BPMN kind and register custom behavior on found elements - [Open a call activity from a main BPMN Diagram on a modal](examples/custom-behavior/call-activity-with-modal-on-mouse-over/README.md) - interact with a diagram to open the details of a Call Activity on a modal - [Open a call activity from a main BPMN Diagram on a tab (of the page)](examples/custom-behavior/call-activity-with-tabs-on-click/README.md) - interact with a diagram to open the details of a Call Activity in a tab (of the page) - [Open a call activity from a main BPMN Diagram on the same container](examples/custom-behavior/call-activity-with-reload-on-dblclick/README.md) - interact with a diagram to load the details of a Call Activity in the same container - [Growing Sequence Flow](examples/custom-behavior/growing-sequence-flow/README.md) - add custom growing animation on a Sequence Flow - [Running Dashed Message Flow](examples/custom-behavior/running-dashed-message-flow/README.md) - add custom running dashed animation on a Message Flow ### Miscellaneous examples #### Playgrounds in live IDE - [CodeSandbox `bpmn-visualization` JavaScript Template](https://codesandbox.io/s/bpmn-visualization-sandbox-current-version-owu7y5) - Play with the `bpmn-visualization` JavaScript API. Use the template to demonstrate missing features or bugs. - [CodeSandbox `bpmn-visualization` TypeScript Template](https://codesandbox.io/s/bpmn-visualization-ts-sandbox-current-version-1uwb6f) - Play with the `bpmn-visualization` TypeScript API. Use the template to demonstrate missing features or bugs. - [Play with the `bpmn-visualization` API in Codepen](https://codepen.io/process-analytics/pen/yLRbygP) - Experiment `bpmn-visualization` integration and API usage live in your browser #### Compare with other libs - [Compare `bpmn-visualization` with `bpmn-js`](./examples/misc/compare-with-bpmn-js/README.md) - compare the libraries on BPMN elements rendering, navigation and API usage - [Compare `bpmn-visualization` with `kie-editors-standalone`](./examples/misc/compare-with-kie-editors-standalone/README.md) - compare the libraries on BPMN elements rendering and API usage ## `bpmn-visualization` usage in projects **Note**: these projects are tested with the Node version defined in the [.nvmrc](.nvmrc) file. Show how to integrate `bpmn-visualization` in project, using various kind of frameworks, build tools and bundlers: - [JavaScript + Webpack](projects/javascript-vanilla-with-webpack/README.md) - integration in a vanilla JavaScript Webpack project - [TypeScript + Angular](projects/typescript-angular/README.md) - integration in a TypeScript Angular project - [TypeScript + Lit Element](projects/typescript-lit-element/README.md) - integration in a TypeScript Lit-Element project - [TypeScript + Parcel](projects/typescript-vanilla-with-parcel/README.md) - integration in a vanilla TypeScript Parcel project - [TypeScript + Rollup](projects/typescript-vanilla-with-rollup/README.md) - integration in a vanilla TypeScript Rollup project - [TypeScript + Rsbuild](projects/typescript-vanilla-with-rsbuild/README.md) - integration in a vanilla TypeScript Rsbuild project - [TypeScript + Vite](projects/typescript-vanilla-with-vitejs/README.md) - integration in a vanilla TypeScript Vite project - [TypeScript + Vue](projects/typescript-vue/README.md) - integration in a TypeScript Vue project Remember that some projects are also available in [live IDE](#live_ide). ## 🔧 Contributing To contribute to `bpmn-visualization` examples, fork and clone this repository locally and commit your code on a separate branch. \ Please add a screenshot of the new rendering when you open a pull-request. You can find more detail in our [Contributing guide](CONTRIBUTING.md). Participation in this open source project is subject to a [Code of Conduct](https://github.com/process-analytics/.github/blob/main/CODE_OF_CONDUCT.md). ✨ A BIG thanks to all our contributors 🙂 ## 📃 License The content of the `bpmn-visualization-examples` repository is released under the [Apache 2.0](LICENSE) license. \ Copyright © 2020-present, Bonitasoft S.A. ## ⚡ Powered by [](https://statically.io) **[statically.io](https://statically.io)** (demo and examples live environments)