Home

Awesome

<h1 align="center">Examples of the bpmn-visualization TypeScript library</h1> <br> <p align="center"> <p align="center"> <a href="https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/index.html"> <img src="examples_home.png" alt="examples overview"> </a> </p> <p align="center"> <a href="CONTRIBUTING.md"> <img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-welcome-ff69b4.svg?style=flat-square"> </a> <a href="https://github.com/process-analytics/.github/blob/main/CODE_OF_CONDUCT.md"> <img alt="Contributor Covenant" src="https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg"> </a> <a href="LICENSE"> <img alt="License" src="https://img.shields.io/github/license/process-analytics/bpmn-visualization-examples?color=blue"> </a> </p> </p>

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

🎮 Live Environment

Give a try to the ⏩ live environment to quickly have an overview of the bpmn-visualization capabilities.

You will find both

📖 Getting BPMN Diagrams

Some examples require loading local files. If you are looking for BPMN diagram files, you can use resources from:

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

🚸 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

Tutorials

🔭 Examples

bpmn-visualization usage in browsers

Basic examples

Display BPMN Diagram:

Diagram navigation examples

Overlay examples

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 behavior examples

Miscellaneous examples

<a id="live_ide"></a>

Playgrounds in live IDE

Compare with other libs

<a id="projects"></a>

bpmn-visualization usage in projects

Note: these projects are tested with the Node version defined in the .nvmrc file.

Show how to integrate bpmn-visualization in project, using various kind of frameworks, build tools and bundlers:

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

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

⚡ Powered by

statically.io logo

statically.io (<kbd>demo</kbd> and <kbd>examples</kbd> live environments)