This repository contains examples showing how to use the bpmn-visualization TypeScript library.
Give a try to the ⏩ live environment
to quickly have an overview of the bpmn-visualization capabilities.
You will find both
- demos: show what you can do with
bpmn-visualizationin various use cases, in dedicated user oriented situations - examples: demonstrate how to use a single feature.
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, an initiative "to support, facilitate, and promote the interchange of BPMN Models"
- the Process Analytics project
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 8001and go to http://localhost:8001/examples/ - python3:
python3 -m http.server 8002and go to http://localhost:8002/examples/ - nodejs/npm:
npx http-server --port 8003 -o ./examplesand your default web browser opens http://localhost:8003/examples/ - .... your own lovely web server
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 in this repository or the Live IDE examples 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
especially when using bpmn-visualization prior version 0.27.0.
- Load and Navigation demo - show several features of
bpmn-visualizationat the same time. The sources of the demo are available in the repository ofbpmn-visualization. - Hacktoberfest themes - special Hacktoberfest diagram with Hacktoberfest colors
- Monitoring of all process instances demo - show how to use
bpmn-visualizationto render the monitoring of all process instances for a defined process - Demo for ICPM 2022 - show a Process Mining scenario (Conformance, Compliance and Happy path)
- Draw a path - show how to draw a path
- Demo for Bonita Day 2023 - monitor process and case progress, assign new actors to overdue tasks, view past activities, and track the live execution of a process.
- Prediction demo - show how to use
bpmn-visualizationto visualize prediction data. - Addons features - demo of addons for
bpmn-visualizationprovided bybpmn-visualization-addons.
- Quick start - the simplest way to integrate
bpmn-visualizationin an HTML page - Getting started (October 2022) - a getting started tutorial to
bpmn-visualizationusing an online monitoring scenario (with its additional article) - All you need to know about styling BPMN elements (July 2023) - an article dealing specifically with BPMN element style management
Display BPMN Diagram:
- Load local BPMN diagrams - load BPMN diagrams stored on your local device
- Load remote BPMN diagrams - load BPMN diagrams from the bpmn-miwg-test-suite GitHub repository
- BPMN Diagram navigation - use the mouse to zoom and move the diagram
- BPMN Diagram fit on load - fit the BPMN diagram in the container on load
- BPMN Diagram fit after load - fit the BPMN diagram in the container after load
- Filter pools of the BPMN Diagram at load time - filter pools of the BPMN diagram on load
- Add default overlays and remove all overlays - add default overlays and remove all overlays on BPMN elements
- Add stylized overlays - add stylized overlays on BPMN elements
- Custom overlay default style - custom default style of the overlays
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.
- Custom user task icon - use your own icon
- Custom colors - custom defaults, specific to BPMN element types
- Custom edge marker colors - custom colors for Edge start and end markers
- Custom fonts - custom defaults, specific to BPMN element types
- Apply CSS classes - highlight elements and paths on demand on the BPMN diagram
- Attach tooltip and popover to BPMN elements - interact with the BPMN Diagram to display additional information
- Select elements by BPMN kind - 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 - 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) - 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 - interact with a diagram to load the details of a Call Activity in the same container
- Growing Sequence Flow - add custom growing animation on a Sequence Flow
- Running Dashed Message Flow - add custom running dashed animation on a Message Flow
- CodeSandbox
bpmn-visualizationJavaScript Template - Play with thebpmn-visualizationJavaScript API. Use the template to demonstrate missing features or bugs. - CodeSandbox
bpmn-visualizationTypeScript Template - Play with thebpmn-visualizationTypeScript API. Use the template to demonstrate missing features or bugs. - Play with the
bpmn-visualizationAPI in Codepen - Experimentbpmn-visualizationintegration and API usage live in your browser
- Compare
bpmn-visualizationwithbpmn-js- compare the libraries on BPMN elements rendering, navigation and API usage - Compare
bpmn-visualizationwithkie-editors-standalone- compare the libraries on BPMN elements rendering and API usage
Note: these projects are tested with the Node version defined in the .nvmrc file.
Show how to integrate bpmn-visualization in project, using various kind of frameworks, build tools and bundlers:
- JavaScript + Webpack - integration in a vanilla JavaScript Webpack project
- TypeScript + Angular - integration in a TypeScript Angular project
- TypeScript + Lit Element - integration in a TypeScript Lit-Element project
- TypeScript + Parcel - integration in a vanilla TypeScript Parcel project
- TypeScript + Rollup - integration in a vanilla TypeScript Rollup project
- TypeScript + Rsbuild - integration in a vanilla TypeScript Rsbuild project
- TypeScript + Vite - integration in a vanilla TypeScript Vite project
- TypeScript + Vue - integration in a TypeScript Vue project
Remember that some projects are also available in live IDE.
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. Participation in this open source project is subject to a Code of Conduct.
✨ A BIG thanks to all our contributors 🙂
The content of the bpmn-visualization-examples repository is released under the Apache 2.0 license.
Copyright © 2020-present, Bonitasoft S.A.
statically.io (demo and examples live environments)