camunda-bpmn-js

Embeddable Camunda modeling distributions based on bpmn-js

Usage no npm install needed!

<script type="module">
  import camundaBpmnJs from 'https://cdn.skypack.dev/camunda-bpmn-js';
</script>

README

camunda-bpmn-js

CI

Embeddable Camunda modeling distributions based on bpmn-js.

Usage

This project is designed to deliver different BPMN modeling distributions. Instead of creating custom Modeler implementations based on bpmn-js, choose one of the existing packages to mirror the modeling experience of Camunda's modeling products.

Use a pre-packaged distribution

<link rel="stylesheet" href="https://unpkg.com/camunda-bpmn-js@0.1.0/dist/assets/camunda-platform-modeler.css" />

<script src="https://unpkg.com/camunda-bpmn-js@0.1.0/dist/camunda-platform-modeler.development.js"></script>

or install it via npm

import BpmnModeler from 'camunda-bpmn-js/lib/camunda-platform/Modeler';

import 'camunda-bpmn-js/dist/assets/camunda-platform-modeler.css';

into your web-application.

var bpmnModeler = new BpmnModeler({
  container: '#canvas',
  propertiesPanel: {
    parent: '#properties'
  }
});

try {

  await bpmnModeler.importXML(someDiagram);

  console.log('success!');
  viewer.get('canvas').zoom('fit-viewport');
} catch (err) {

  console.error('something went wrong:', err);
}

Checkout the docs to learn more about the available distributions.

Build and Run

Prepare the project by installing all dependencies:

npm install

Then, depending on your use-case, you may run any of the following commands:

# build the library and run all tests
npm run all

# spin up a single local camunda platform modeler instance
npm run start:platform

# run the full development setup
npm run dev

Related

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

  • bpmn-js: View and edit BPMN 2.0 diagrams in the browser
  • diagram-js: Diagram rendering and editing toolkit

License

MIT

Uses bpmn-js licensed under the bpmn.io license.