Embeddable Camunda modeling distributions based on bpmn-js.

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!'); bpmnModeler.get('canvas').zoom('fit-viewport'); } catch (err) { console.error('something went wrong:', err); }

Checkout the docs to learn more about the available distributions.

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

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
• bpmn-js-properties-panel: A panel for (technical) properties editing
• bpmn-js-element-templates: Domain specific editing for bpmn-js
• bpmn-js-create-append-anything: A create/append anything extension for bpmn-js
• bpmn-moddle: A BPMN 2.0 diagram reader/writer with extensions for Camunda 7 and Camunda 8
• camunda-bpmn-js-behaviors: Camunda specific behaviors for bpmn-js

MIT

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