Converting draw.io flows to bpmn.io flows en masse

Users
1

I work as a Business Analyst for a large company and would like to convince them to utilise bpmn.io in future instead of draw.io. I’m currently writing up the pros and cons of such a switch.

Currently, we embed draw.io process flows into Confluence as part of our living design, and documenting our living design is being pushed hard right now. I’m aware based on other topics that there is indeed an integration tool for Confluence / bpmn.io on Github, which is great.

I know the obvious pro of “it cuts time spent creating flows by at least 50% compared to draw.io” will raise eyebrows, however I’m anticipating pushback on the company having to deal with two different tools depending on the time a process flow was created (pre-bpmn.io or post-bpmn.io). If it were possible to automate the update of various process flows (or at least minimise any manual work involved) then this would hopefully swing things in favour of using bpmn.io in the long run.

Is there any way to convert already-created draw.io process flows into bpmn.io process flows?

2

Can you provide an example of what such a process created with draw.io looks like?

3

Sure - See attached.

example drawio
example drawio3361×692 215 KB

4

I’m not aware of an easy way to convert draw.io “BPMN” diagrams to valid BPMN 2.0 XML. Others asked for it previously.

It is technically possible to read the draw.io file from outside the editor and transform in the way you please. However the format is quite far away from BPMN 2.0 XML, the standarized format the bpmn.io reads. draw.io is a drawing tool, not a BPMN editor, and hence allows you to model many things that are impossible/confusing/invalid in accordance with the BPMN.

To dig a little deeper, let’s consider a simple diagram:

image

The following is the draw.io export: bpmn-process.drawio.xml (2.4 KB). It defines the shapes and connections drawn, gives some hints on the “BPMN element” each of these shapes represents.

1 Like
5

For simplicity, here’s the XML:

<mxfile host="app.diagrams.net" modified="2025-02-10T07:56:47.719Z" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36" etag="InJSAKzmY9VHQVTW_OWn" version="22.1.17" type="device">
  <diagram name="Page-1" id="yedskXcimKu3Qf1aefTr">
    <mxGraphModel dx="995" dy="620" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="uexFnpEDcD9RrbY6JTcu-1" value="POOL" style="shape=mxgraph.bpmn.swimlane;html=1;startSize=20;horizontal=0;swimlaneLine=1;collapsible=0;fontStyle=0;swimlaneFillColor=#ffffff;strokeWidth=2;isCollection=1;whiteSpace=wrap;" vertex="1" parent="1">
          <mxGeometry x="250" y="270" width="520" height="140" as="geometry" />
        </mxCell>
        <mxCell id="uexFnpEDcD9RrbY6JTcu-7" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;exitPerimeter=0;" edge="1" parent="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="425" y="340" as="sourcePoint" />
            <mxPoint x="585" y="300" as="targetPoint" />
            <Array as="points">
              <mxPoint x="425" y="280" />
              <mxPoint x="585" y="280" />
            </Array>
          </mxGeometry>
        </mxCell>
        <mxCell id="uexFnpEDcD9RrbY6JTcu-2" value="FIRST" style="points=[[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];shape=mxgraph.bpmn.task;whiteSpace=wrap;rectStyle=rounded;size=10;html=1;container=1;expand=0;collapsible=0;taskMarker=abstract;" vertex="1" parent="1">
          <mxGeometry x="330" y="300" width="120" height="80" as="geometry" />
        </mxCell>
        <mxCell id="uexFnpEDcD9RrbY6JTcu-6" value="SECOND" style="points=[[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];shape=mxgraph.bpmn.task;whiteSpace=wrap;rectStyle=rounded;size=10;html=1;container=1;expand=0;collapsible=0;taskMarker=abstract;" vertex="1" parent="1">
          <mxGeometry x="550" y="300" width="120" height="80" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

It’s not like BPMN at all making converting it to BPMN non-trivial.

1 Like
6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.