How to convert bpmn into json format.?

Developers
1

Here i have taken a html file in which i will bind the diagram.

    <div class="canvas diagram-wrapper col-sm-12" style="height: 800px; width : 1000px;">
        <h3>diagram</h3>
        <div id="js-canvas" style="height: 800px; width : 1000px;">
           
        </div>
    </div>

And here i have written a js code to bind the required shape.

var console = document.querySelector('#js-console');
        var diagramXML = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\"\r\n             xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\"\r\n             xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\"\r\n             xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\"\r\n             xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\"\r\n             expressionLanguage=\"http://www.w3.org/1999/XPath\"\r\n             typeLanguage=\"http://www.w3.org/2001/XMLSchema\"\r\n             targetNamespace=\"\"\r\n             xsi:schemaLocation=\"http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd\">\r\n<process id=\"sid-C3803939-0872-457F-8336-EAE484DC4A04\" isClosed=\"false\" isExecutable=\"false\" name=\"Customer\" processType=\"None\">\r\n    <startEvent id=\"sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138\" name=\"Start\">\r\n        </startEvent>\r\n</process>\r\n<bpmndi:BPMNDiagram id=\"sid-74620812-92c4-44e5-949c-aa47393d3830\">\r\n    <bpmndi:BPMNPlane bpmnElement=\"sid-c0e745ff-361e-4afb-8c8d-2a1fc32b1424\" id=\"sid-cdcae759-2af7-4a6d-bd02-53f3352a731d\">\r\n  <bpmndi:BPMNShape bpmnElement=\"sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138\" id=\"sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138_gui\">\r\n            <omgdc:Bounds height=\"30.0\" width=\"30.0\" x=\"150.0\" y=\"165.0\"/>\r\n          </bpmndi:BPMNShape>\r\n      </bpmndi:BPMNPlane>\r\n    </bpmndi:BPMNDiagram>\r\n</definitions>\r\n\r\n";
        var viewer = new BpmnJS({
            container: document.querySelector('#js-canvas'),
            height: 700
        });
        debugger
        viewer.importXML(diagramXML, function (err) {
            var eventBus = viewer.get('eventBus');
            // you may hook into any of the following events
            var events = [
                'element.hover',
                'element.out',
                'element.click',
                'element.dblclick',
                'element.mousedown',
                'element.mouseup'
            ];
        });

On click of a save button i have to save diagram in json format.
How can I do that I am not getting any valid solution. I tried almost all examples from forum. Just give me the solution of save method.

I have to write the saving code here in this below method.
I am removing my logic as its not working.

$("#btn_Save").click(function ()
{
'Code to convert that bpmn diagram into json format.?
}

Thank in advance.

2

There is no standard way to export your diagram into a JSON representative, since there no official specification for it. Internally, we parse the XML into a javascript object tree via bpmn-moddle. You can read more about it in our walkthrough (Chapter: BPMN Meta-Model (bpmn-moddle)).