This repository contains examples showing how to use bpmn-visualization.
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-visualization in 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 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
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 users should also read the paragraph about the TypeScript support in the bpmn-visualization README.
- Load and Navigation demo - shows several features of
bpmn-visualization
at the same time. The sources of the demo are available in the bpmn-visualization repository. - Hacktoberfest themes - special Hacktoberfest diagram with Hacktoberfest colors
- Monitoring of all process instances demo - show how to use
bpmn-visualization
to render the monitoring of all process instances for a defined process
Display BPMN Diagram:
- Getting started - the simplest way to integrate
bpmn-visualization
in an HTML page - 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
- 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-visualization
JavaScript Template - Play with thebpmn-visualization
JavaScript API. Use the template to demonstrate missing features or bugs. - CodeSandbox
bpmn-visualization
TypeScript Template - Play with thebpmn-visualization
TypeScript API. Use the template to demonstrate missing features or bugs. - Play with the
bpmn-visualization
API in Codepen - Experimentbpmn-visualization
integration and API usage live in your browser
- Compare
bpmn-visualization
withbpmn-js
- compare the libraries on BPMN elements rendering, navigation and API usage - Compare
bpmn-visualization
withkie-editors-standalone
- compare the libraries on BPMN elements rendering and API usage
Show how to integrate bpmn-visualization
in project, using various kind of build tools and bundlers:
- JavaScript + Webpack - integration in a vanilla JavaScript Webpack project
- TypeScript + Parcel - integration in a vanilla TypeScript Parcel project
- TypeScript + Rollup - integration in a vanilla TypeScript Rollup project
- TypeScript + Vite - integration in a vanilla TypeScript Vite 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 🙂
bpmn-visualization-examples
is released under the Apache 2.0 license.
Copyright © 2020-present, Bonitasoft S.A.
statically.io (demo and examples live environments)