xmlmxgraphdraw.io

Format of Draw.io XML file?


I created a shape in draw.io and exported it to get its XML file, which looks like this:

<mxlibrary>[{"xml":"vZTNcoIwEMefJnckXjxarF7aXvoEKawk05Blwirap+8SooLa0XbaZoaZ7H8/sssPImRW7VZe1foZC7BCPgqZeUTqd9UuA2tFmphCyIVI04QfkS6/8E6CN6mVB0f3JKR9wlbZDfRKLzS0t1EoPW5qIR88kiL1FuSE7ZgJnmA3Oj1H5yA/hB5bGHUVQmNLK8AKyO85pDUF6Rgxi2kaTKkPaTKKqonNHXNPQ/Imznl9Znkx8wsSNBeD89yugCKO22pD8FqrvPO2DIw1TRUfspjwttGqwPZgkMd3yNCiD6VkFhZ71sbagT4Lq9PR0UBfhsW6sqZ0rFlYU1eYzzeufArWYtpRgcZ8DKhUuB1YUJghsjGZJNS32M69x7aJyt2YhzjTn+H8DZrT21/wX4A8A9O9H5MrO48yYX0V1xjPObz/5rMfY7j59yXf58Xm6TYLvtFl9wk=","w":190,"h":130,"aspect":"fixed","title":"notes"}]</mxlibrary>

Is it possible to insert a new vertex using this data? I don't even know where to begin on this one.


Solution

  • Finally got this working. Check out the mxCodec example here. So first, get the uncompressed xml for the node either as described by kjhughes or via the Extras -> Edit Diagram menu in Draw.io. Then you can add the node like so:

    var xml = '<root><mxCell id="2" value="Hello," vertex="1"><mxGeometry x="20" y="20" width="80" height="30" as="geometry"/></mxCell><mxCell id="3" value="World!" vertex="1"><mxGeometry x="200" y="150" width="80" height="30" as="geometry"/></mxCell><mxCell id="4" value="" edge="1" source="2" target="3"><mxGeometry relative="1" as="geometry"/></mxCell></root>';
    var doc = mxUtils.parseXml(xml);
    var codec = new mxCodec(doc);
    var elt = doc.documentElement.firstChild;
    var cells = [];
    
    while (elt != null)
    {
      cells.push(codec.decode(elt));
      elt = elt.nextSibling;
    }
    
    graph.addCells(cells);
    

    Replace xml with whatever the xml for your node is. Also, be sure not to include

    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    

    as these are the default parents and their inclusion will break the graph by causing infinite recursion.