process-analytics / bpmn-visualization-js

A TypeScript library for visualizing process execution data on BPMN diagrams
https://process-analytics.github.io/bpmn-visualization-js/
Apache License 2.0
224 stars 30 forks source link
analytics bpmn browser hacktoberfest process typescript visualization

bpmn-visualization TypeScript library

Examples of the bpmn-visualization TypeScript library

npm package GitHub release (latest by date including pre-releases) Live Demo Build Coverage Gitpod
PRs Welcome Contributor Covenant License


bpmn-visualization is a TypeScript library for visualizing process execution data on BPMN diagrams, with simplicity.

Based on the customization capability, it provides a set of diagram visualization features that includes additional display options for execution data (highlighting of some elements, adding customizable overlays, and more) as well as personalized interactive capabilities (mouse hover, click, and more).

We hope it will help you to create applications for process visualization and analysis šŸ™‚

šŸŽ® Demo and examples

Please check the ā© live environment.

You will find there basic usage as well as detailed examples showing possible rendering customizations.

šŸ”† Project Status

bpmn-visualization is actively developed and maintained.

Before the release of version 1.0.0, there may be some breaking changes. We avoid these as much as possible, and carefully document them in the release notes. As far as possible, we maintain compatibility for some minor versions.

šŸ¤© Why using bpmn-visualization?

šŸŽØ Features

Already available features:

šŸ”„ Some add-on features are available through a dedicated package: ā© bpmn-visualization-addons

Planned new features:

šŸŒ Browsers Support

Chrome Chrome Firefox Firefox Safari Safari Edge Edge
āœ”ļø āœ”ļø āœ”ļø āœ”ļø

Notes:

ā™»ļø Usage

The library is available from NPM. \ We support various module formats such as:

šŸ“Œ Usage in applications and projects

Install bpmn-visualization:

npm i bpmn-visualization

Then use this snippet to load your BPMN diagram in a page:

import { BpmnVisualization } from 'bpmn-visualization';

// initialize `bpmn-visualization` and load the BPMN diagram
// 'bpmn-container' is the id of the HTMLElement that renders the BPMN Diagram
const bpmnVisualization = new BpmnVisualization({ container: 'bpmn-container' });
let bpmnContent; // your BPMN 2.0 XML content
try {
  bpmnVisualization.load(bpmnContent);
} catch (error) {
  console.error('Error loading BPMN content', error);
}

You can set the BPMN content using one of the following ways:

šŸ“œ TypeScript Support

The bpmn-visualization npm package includes type definitions, so the integration works out of the box in TypeScript projects. bpmn-visualization requires TypeScript 4.0 or greater. Past versions had the following requirements:

ā„¹ļø If you are looking for examples of projects integrating bpmn-visualization with TypeScript, see the bpmn-visualization-examples repository.


NOTE

Prior version 0.27.0, bpmn-visualization required extra configuration for TypeScript projects as explained in the v0.26.2 README.


šŸ’  Browser usage

In the HTML page:

šŸ‘¤ User documentation

The User documentation (with the feature list & the public API) is available in the documentation site.

āš’ļø More

šŸ’” Want to know more about bpmn-visualization usage and extensibility? Have a look at the ā© live examples site.

For more technical details and how-to, go to the bpmn-visualization-examples repository.

šŸ”§ Contributing

To contribute to bpmn-visualization, fork and clone this repository locally and commit your code on a separate branch.
Please write tests for your code before opening a pull-request:

npm test  # run all tests

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 is released under the Apache 2.0 license.
Copyright © 2020-present, Bonitasoft S.A.

Some BPMN icons used by bpmn-visualization are derived from existing projects. See the BPMN Support documentation for more details:

āš” Powered by

statically.io logo

statically.io (demo and examples live environments)

surge.sh logo

surge.sh (demo and documentation preview environments)