How to show the bpmn.io diagram dynamically without using xml

Developers
1

Hi,

I’m using bpmn.io for my project, there I have all the parameters in JSON format for each and every bpmn.io element separately, for example,

For BPMN Task

{ 
x:'45',
y:'55',
name:'abc',
.
.
.
etc;
}

all the JSON keys and values are matching to the bpmn.io diagram, now how can I display the bpmn.io diagram using these set of JSON, I cannot convert the JSON type to XML since I have separate JSON for each and every BPMN element, is there any other possibilities, please help me out.

Thanks,
Siva

2

Can you elaborate on what you are trying to do? I’m afraid, I don’t understand your question.

3

I’m trying to view the saved bpmn.io diagram which is saved in json format, now how can i achieve this, please help me out

4

You cannot, using built in tools.

5

Thanks for the reply, Is there any other way to achieve this.

6

Is there any other way to achieve this.

I’d like to ask another question: Why do you need this? Why don’t you have the BPMN 2.0 XML available?

7

Hi nikku,

I had a requirement, I need to show the bpmn diagram which is stored as separate, for each and every element, for a task ( example x, y, name,…etc) likewise each and every element has separate, so I need to show/display these elements in bpmn.io, please help me or give me a solution for this.

Thanks,
Siva

8

You got to write your own import facility as importing JSON is not built in.

At the core, import means the following:

  1. Diagram document is parsed (we use moddle to do that)
  2. Elements in the document are traversed in the order of appearance (BpmnTreeWalker)
  3. Each encountered elements are rendered on the canvas (BpmnImporter)

I suggest you to follow the trace starting from Viewer#importXML and understand what is going on exactly. From there on it should be possible for you to re-build these component to provide a JSON importer.

We’d be interested in what you come up with, if you mind sharing it for educational reasons.

9

Thanks for the suggestion nikku, is there any way to dynamically generate the bpmn.io xml file, for example i’m having four bpmn task with its related values say x,y…etc stored in my DB, now can i generate the xml using these values to display four different bpmn task dynamically, any suggestions, please help me out.

Thanks,
Siva

10

It is possible to build such things. Our toolkit doesn’t include this functionality so you’d have to build it yourself. What’s the reasoning behind storing a diagram as JSON instead of XML?