BPMN Visualization Examples

This repository contains examples showing how to use bpmn-visualization.

🎮 Live Environment

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.

📖 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, an initiative "to support, facilitate, and promote the interchange of BPMN Models"
  • bpmn-miwg-test-suite
  • bpmn-miwg-demos
• the Process Analytics project
  • BPMN diagrams of the bpmn-visualization-examples repository
  • BPMN diagrams used in the tests of bpmn-visualization

🖥️ 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 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.

👁️‍🗨️ Demos

• 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

🔭 Examples

bpmn-visualization usage in browsers

Basic examples

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

Diagram navigation examples

• 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

Overlay examples

• 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

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.

• 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

Custom behavior examples

• 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

Miscellaneous examples

Playgrounds in live IDE

• CodeSandbox bpmn-visualization JavaScript Template - Play with the bpmn-visualization JavaScript API. Use the template to demonstrate missing features or bugs.
• CodeSandbox bpmn-visualization TypeScript Template - Play with the bpmn-visualization TypeScript API. Use the template to demonstrate missing features or bugs.
• Play with the bpmn-visualization API in Codepen - Experiment bpmn-visualization integration and API usage live in your browser

Compare with other libs

• Compare bpmn-visualization with bpmn-js - compare the libraries on BPMN elements rendering, navigation and API usage
• Compare bpmn-visualization with kie-editors-standalone - compare the libraries on BPMN elements rendering and API usage

bpmn-visualization usage in projects

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.

🔧 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. Participation in this open source project is subject to a Code of Conduct.

✨ A BIG thanks to all our contributors 🙂

📃 License

bpmn-visualization-examples is released under the Apache 2.0 license.
Copyright © 2020-present, Bonitasoft S.A.

⚡ Powered by

statically.io (demo and examples live environments)