README.md · shixuanhong/bpmn-js-examples

# bpmn-js Examples

This repository contains a number of examples showing how use and integrate
[bpmn-js](https://github.com/bpmn-io/bpmn-js) 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.
* [modeling-api](./modeling-api) - How to create, connect and edit elements using the API.

## 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.
* [bpmn-js-example-react-properties-panel](https://github.com/bpmn-io/bpmn-js-example-react-properties-panel) - An example how to build a simple properties panel for bpmn-js using React.
* [custom-bundle](./custom-bundle) - How to build a custom version of bpmn-js
* [bpmn-js-example-model-extension](https://github.com/bpmn-io/bpmn-js-example-model-extension) - An example of creating a model extension for bpmn-js.
* [bpmn-js-example-custom-rendering](https://github.com/bpmn-io/bpmn-js-example-custom-rendering) - An example of creating custom rendering for bpmn-js.
* [bpmn-js-example-custom-controls](https://github.com/bpmn-io/bpmn-js-example-custom-controls) - An example of creating custom controls for bpmn-js.
* [custom-elements](./custom-elements) - An introduction to custom elements, their use cases and implementation approaches.
* [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.
* [vue-bpmn](https://github.com/bpmn-io/vue-bpmn) - Showing a possible integration of the toolkit into a [Vue.js](https://vuejs.org) application.
* [react-bpmn](https://github.com/bpmn-io/react-bpmn) - Showing a possible integration of the toolkit into a [React](https://reactjs.org/) application.

## Additional Resources

* [bpmn-js Walkthrough](https://bpmn.io/toolkit/bpmn-js/walkthrough/) - A full guide through the library and its underlying foundation.
* [bpmn.io Awesome List](https://github.com/bpmn-io/awesome-bpmn-io) - Links to great libraries and additional learning resources

## License

MIT _(unless noted otherwise)_

shixuanhong/bpmn-js-examples

简介

发行版

贡献者

近期动态

shixuanhong/bpmn-js-examples .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

shixuanhong/bpmn-js-examples