Editing imported diagrams

Developers
#1

Hello,

I have successfully imported a bpmn diargram into my web application but I need to be able to edit it, is there a way to make it editable on my web site and also to have the pallette of tools?
Here is the code that I have integrated in my web application to import the diagram:

    var BpmnViewer = window.BpmnJS;

    var viewer = new BpmnViewer({ container: '#canvas' });

    $.get(root + 'Scripts/pizza-collaboration.txt', function (pizzaDiagram) {

        viewer.importXML(pizzaDiagram, function (err) {

            if (!err) {
                console.log('success!');
                viewer.get('canvas').zoom('fit-viewport');
            } else {
                console.log('something went wrong:', err);
            }
        });
    }, 'text');

Thanks in advance.

#2

Use the bpmn-modeler from our prebuilt distribution or checkout the modeler example.

Hope this helps!

#3

The modeler example references that it is the basis for demo.bpmn.io. However, I cannot save a document from the demo site, re-open that same document within the demo viewer and then make changes. Am I missing something?

Thanks,
Devin

#4

Hi Devin,

the trick is to click on “create” a diagram. Here you can open a file from your computer.

Kind Regards, Ingo

1 Like
#5

Great response Ingo. Thanks!