bpmn-js Examples

This repository contains a number of examples showing how to use and integrate bpmn-js into your applications.

Starter

• starter - Getting started with bpmn-js using our pre-packaged distribution.

Basic

• bundling - an example how to install bpmn-js via npm, use it in a node-style application and package it and the application code for the browser with Webpack.
• colors - Showcases different ways to add colors to your BPMN diagram.
• embedding - Shows embedding of BPMN diagrams into a larger website.
• interaction - Listen to diagram events and react to them.
• overlays - Attach overlays to BPMN 2.0 diagrams to provide custom buttons or showing additional information.
• url-viewer - A simple url viewer for BPMN 2.0 process diagrams.
• types - How to use the types shipped with bpmn-js.

Intermediate

• modeler - A simple BPMN 2.0 modeler. Gains more features as time passes by.
• commenting - A simple commenting application build on top of BPMN 2.0 diagrams
• bpmn-properties - Read and write BPMN properties with bpmn-js.
• i18n - Use a custom translation module with bpmn-js.
• properties-panel - Add a properties panel and edit execution related BPMN 2.0 properties.
• theming - an example that showcases the different aspects of theming bpmn-js.
• modeling-api - How to create, connect and edit elements using the API.

Advanced

• bpmn-js-nyan - Model nyan cats instead of service tasks, resize elements and assign custom element colors.
• bpmn-js-task-priorities - persistent task colors, diagram interaction and custom extension elements demo.
• bpmn-js-in-color - Adding color support for BPMN based on the BPMN in Color proposal.
• custom-bundle - How to build a custom version of bpmn-js
• bpmn-js-example-model-extension - An example of creating a model extension for bpmn-js.
• bpmn-js-example-custom-rendering - An example of creating custom rendering for bpmn-js.
• bpmn-js-example-custom-controls - An example of creating custom controls for bpmn-js.
• custom-elements - An introduction to custom elements, their use cases and implementation approaches.
• custom-modeling-rules - Add custom rules to the bpmn-js modeler.
• deep-linking - An example of how to switch between different diagram layers.

Properties Panel

• properties-panel-extension - An example showing how to extend the properties panel with custom controls.
• properties-panel-async-extension - An example showing how to handle asynchronous data loading inside the properties panel.
• properties-panel-list-extension - An example showing how to extend the properties panel with lists.
• bpmn-js-example-react-properties-panel - An example how to build a simple properties panel for bpmn-js using React.

Featuring Libraries

• minimap - Adding a minimap to bpmn-js.
• transaction-boundaries - Visualizing transaction boundaries in bpmn-js.

Integrations

• bpmn-js-example-angular - Showing a possible integration of the toolkit into an Angular application.
• vue-bpmn - Showing a possible integration of the toolkit into a Vue.js application.
• react-bpmn - Showing a possible integration of the toolkit into a React application.
• svelte-bpmn - Showing a possible integration of the toolkit into a Svelte application.

Additional Resources

• bpmn-js Walkthrough - A full guide through the library and its underlying foundation.
• bpmn.io Awesome List - Links to great libraries and additional learning resources

License

MIT (unless noted otherwise)