A BPMN 2.0 rendering toolkit and web modeler. https://bpmn.io/toolkit/bpmn-js/

Go to file

Nico Rehwaldt 22d2b97bbe feat(auto-place): handle boundary events Add basic auto-placement of boundary events: * handle top aligned events * handle bottom aligned events * take boundary events into account when placing host elements and vice versa Related to #563		2017-12-22 10:32:54 +01:00
.github	docs(project): add pull request template	2017-09-26 14:34:02 +02:00
assets/bpmn-font	fix(context-pad): remove icon margins introduced by Fontello	2017-10-25 15:18:11 +02:00
docs	docs(SETUP): remove grunt	2017-10-04 09:27:54 +02:00
lib	feat(auto-place): handle boundary events	2017-12-22 10:32:54 +01:00
resources	chore(project): update screencast	2017-08-02 14:12:14 +02:00
tasks	chore(project): shrink bundle sizes	2017-11-20 15:04:37 +01:00
test	feat(auto-place): handle boundary events	2017-12-22 10:32:54 +01:00
.eslintrc	chore(project): switch to eslint	2016-06-07 09:55:32 +02:00
.gitignore	chore(project): update .gitignore	2017-11-14 23:46:21 +01:00
.npmignore	chore(project): add .npmignore	2017-12-13 12:17:43 +01:00
.travis.yml	chore(project): add release build stages	2017-10-27 22:05:52 +02:00
.wiredeps	chore(wiredeps): rebuild	2017-12-14 23:11:56 +01:00
CONTRIBUTING.md	docs(CONTRIBUTING): link setup guide	2017-10-04 09:30:31 +02:00
Gruntfile.js	chore(project): remove grunt-release	2017-11-29 12:23:14 +01:00
LICENSE	chore(project): update year in LICENSE	2017-10-07 09:19:32 +02:00
README.md	chore(project): update screencast	2017-08-02 14:12:14 +02:00
index.js	chore(project): add index.js entry point	2014-06-11 14:36:26 +02:00
package-lock.json	chore(project): bump diagram-js version	2017-12-18 22:52:13 +01:00
package.json	chore(project): bump diagram-js version	2017-12-18 22:52:13 +01:00

README.md

The project is still in an early stage. Documentation may be missing and examples may be broken.

bpmn-js - BPMN 2.0 for the web

bpmn-js is a BPMN 2.0 diagram rendering toolkit and web modeler.

Usage

No need for additional setup: Try out our seed project or use the pre-packaged version of the library.

Get the library via npm or Bower and use it in your web applications to display BPMN 2.0 diagrams.

var BpmnViewer = require('bpmn-js');

var xml; // my BPMN 2.0 xml
var viewer = new BpmnViewer({ container: 'body' });

viewer.importXML(xml, function(err) {

  if (err) {
    console.log('error rendering', err);
  } else {
    console.log('rendered');
  }
});

Dynamic Attach/Detach

You may attach or detach the viewer dynamically to any element on the page, too:

var viewer = new BpmnViewer();

// attach it to some element
viewer.attachTo('#container');

// detach the panel
viewer.detach();

Installation

Fetch bpmn-js prebuilt or install it via npm.

Fetch Prebuilt

The bower-bpmn-js repository contains pre-built bundles of bpmn-js.

Download them directly or fetch them with Bower:

bower install bpmn-js

Checkout the example project to get started.

Install via npm

Fetch the library via npm to get fine grained access to the parts you need:

npm install --save bpmn-js

Make sure you use browserify or the like to bundle your project and bpmn-js for the browser.

Checkout the example project to learn more.

Resources

Building the Project

Perform the following steps to build the library, including running all tests:

cd bpmn-js
npm install
npm run all

You may need to perform additional project setup when building the latest development snapshot.

Please checkout our contributing guidelines if you plan to file an issue or pull request.

bpmn-js builds on top of a few additional powerful tools:

bpmn-moddle: Read / write support for BPMN 2.0 XML in the browsers
diagram-js: Diagram rendering and editing toolkit

License

Use under the terms of the bpmn.io license.