# bpmn-js-examples

**Repository Path**: Coldairarrow/bpmn-js-examples

## Basic Information

- **Project Name**: bpmn-js-examples
- **Description**: Some examples how to use bpmn-js
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-02-20
- **Last Updated**: 2024-11-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# bpmn-js Examples

This repository contains a number of examples showing how use and integrate
[bpmn-js](https://github.com/bpmn-io/bpmn-js) it into your applications.


## Starter

* [starter](./starter) - Getting started with [bpmn-js](https://github.com/bpmn-io/bpmn-js) using our [pre-packaged distribution](./pre-packaged).


## Basic

* [bundling](./bundling) - an example how to install bpmn-js via [npm](http://npmjs.org), use it in a node-style application and package it and the application code for the browser with [Webpack](https://webpack.js.org/).
* [colors](./colors) - Showcases different ways to add colors to your BPMN diagram.
* [interaction](./interaction) - Listen to diagram events and react to them.
* [overlays](./overlays) - Attach overlays to BPMN 2.0 diagrams to provide custom buttons or showing additional information.
* [url-viewer](./url-viewer) - A simple url viewer for BPMN 2.0 process diagrams.


## Intermediate

* [modeler](./modeler) - A simple BPMN 2.0 modeler. Gains more features as time passes by.
* [commenting](./commenting) - A simple commenting application build on top of BPMN 2.0 diagrams
* [bpmn-properties](./bpmn-properties) - Read and write BPMN properties with bpmn-js!
* [i18n](./i18n) - Use a custom translation module with bpmn-js.
* [properties-panel](./properties-panel) - Add a properties panel and edit execution related BPMN 2.0 properties.
* [theming](./theming) - an example that showcases the different aspects of theming bpmn-js.


## Advanced

* [bpmn-js-nyan](https://github.com/nikku/bpmn-js-nyan) - Model nyan cats instead of service tasks, resize elements and assign custom element colors.
* [bpmn-js-task-priorities](https://github.com/bpmn-io/bpmn-js-task-priorities) - persistent task colors, diagram interaction and custom extension elements demo.
* [bpmn-js-in-color](https://github.com/bpmn-io/bpmn-js-in-color) - Adding color support for BPMN based on the [BPMN in Color](https://github.com/bpmn-miwg/bpmn-in-color) proposal.
* [custom-bundle](./custom-bundle) - How to build a custom version of bpmn-js
* [custom-elements](./custom-elements) - A modeler that allows you to create custom elements on a bpmn diagram.
* [custom-meta-model](./custom-meta-model) - An example showing how extend the BPMN meta-model to recognize BPMN extension elements and attributes.
* [custom-modeling-rules](./custom-modeling-rules) - Add custom rules to the bpmn-js modeler.
* [properties-panel-extension](./properties-panel-extension) - An example showing how to extend the properties panel with custom controls.


## Featuring Libraries

* [minimap](./minimap) - Adding a minimap to bpmn-js.
* [transaction-boundaries](./transaction-boundaries) - Visualizing transaction boundaries in bpmn-js.


## Integrations

* [bpmn-js-example-angular](https://github.com/bpmn-io/bpmn-js-example-angular) - Showing a possible integration of the toolkit into an [Angular](https://angular.io/) application.


## Additional Resources

* [bpmn-js Walkthrough](https://bpmn.io/toolkit/bpmn-js/walkthrough/) - A full guide through the library and its underlying foundation.


## License

MIT _(unless noted otherwise)_