How to create diagram in bpmn.js from JS code

Developers
1

Since bpmn.js has no documentation I do not know how to check if it is even possible.

I skimmed over bpmn.js examples and i couldn’t find any other way than to create a diagram by using importXML method on the object of BpmnJS class and then edit the diagram in the browser.

My question is how to create diagram using JS code, something like this:

var bpmnViewer = new BpmnJS({
    container: '#canvas'
});
bpmnViewer.clear();
bpmnViewer.createNode('Root', 0); // node with label 'Root' and id 0
bpmnViewer.createNode('Child', 1);
bpmnViewer.connectNodes(0, 1);

End result should show diagram containing two circles connected with an arrow or edge. First labeled as ‘Root’ second as ‘Child’.

2

Check out https://github.com/bpmn-io/bpmn-js-cli :wink:

3

I finally had time to analyze bpmn-js-cli. Unfortunately I can’t get the example code to work.
The line
var BpmnModeler = require('bpmn-js/lib/Modeler');
doesn’t allow to create new instances because I get “BpmnModeler is not a constructor” error in the
var modeler = new BpmnModeler(...);

I changed require to regular import and now the error is gone but when i try to access cli object from the browser console it says that it is not defined.

Is there any full working example usage of this library?

4

By the way, I wasn’t looking for API that allows me to write commands in the browser. Our use case is that when we get data about tree structure from the backend we want to build the diagram representing that tree and display it in the browser. But even with my low knowledge about JS I presume it should be easy to use this library directly in the frontend code.