Programmatically building flowcharts

Developers Modeler
1

I’m new to bpmn.io tools, but very impressed so far - nice work!

We are looking to create a simple process model based on answers to interview questions. E.g. What is the next Task in the process? As the user answers these questions, I’d like to use an API to incrementally build the BPMN model and display it in the diagram viewer.

Any tips on the best way to do this or examples?

Thanks in advance!

2

You probably want to use an abstraction for our APIs such as the bpmn-js-cli to do the job:

var cli = bpmnModeler.get('cli');

var gateway = cli.append(
  'StartEvent_1', 
  'bpmn:ExclusiveGateway', 
  '150,0'
);

var serviceTask = cli.append(
  gateway,
  'bpmn:ServiceTask',
  '150,0'
);

cli.setLabel(serviceTask, 'Do Service');

Checkout the source code for how it works.

Just using the existing Modeling APIs should work, too:

var modeling = bpmnModeler.get('modeling');

modeling.createShape(
  { type: 'bpmn:Task' }, 
  { x: 450, y: 250 },
  parentShape
);
3

The Modeling API looks promising, will give it a go. Thanks for the tip!

4

It is quite tedious to construct the graphical (bpmndi) elements in this fashion, or to work directly with xml for that matter. All those edges, labels and corresponding coordinates…

Is there any option for the tooling to accept a model (bpmn only, no bpmndi) then create a basic rendered layout (even if not pretty)?

5

We don’t offer such a tool but we’re happy to accept contributions on this.

6

How and whether you build the diagram directly in the browser of in the back-end is entirely driven by your requirements.

Whether that stuff is tedious or not is entirely about how you use our tooling. As an example, this spec

StartEvent_1 -> and -> service -> user -> icatch -> xor -> or -> ithrow -> end

can automatically build this process

image

(Via bpmn-js-modeling-dsl).

Whether that is useful for you not depends on how you plan to approach things.

7

I have the modeler APIs working, but this CLI or CLI DSL approach might save us some work.

However, when I add the CLI module, while I am able to run cli.help(), cli.elements() returns empty array, and appending an item results in:
Error: failed to execute with args <[StartEvent_1, bpmn:ExclusiveGateway, 150,0]> : could not parse : elementRegistry.getById is not a function
I have created a diagram with StartEvent_1.

Can you point me to a working example or test for the CLI or CLI DSL approach? Thanks!

8

Checkout the bpmn-js-cli test suite.