Draw.io XML 文件的格式？

Question

我在 draw.io 中创建了一个形状并将其导出以获取其 XML 文件，如下所示：

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

是否可以使用此数据插入新顶点？我什至不知道从哪里开始。

Answer 1

您正在查看使用 Deflate 压缩算法压缩的 XML。显然，您需要在使用它之前解压缩它。

JGraph, creators of the excellent Draw.io drawing/diagramming application, provide an online decompression conversion tool。这是使用该工具解压缩后与压缩数据关联的 mxGraphModel：

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="2" value="" style="group;rotatable=0;" vertex="1" connectable="0" parent="1">
      <mxGeometry width="190" height="130" as="geometry"/>
    </mxCell>
    <mxCell id="3" value="Notes" style="rounded=0;whiteSpace=wrap;html=1;shadow=1;strokeColor=#CCCCCC;fillColor=#999999;fontColor=#FFFFFF;align=left;spacingLeft=4;resizable=0;movable=0;editable=0;connectable=0;allowArrows=0;rotatable=0;" vertex="1" parent="2">
      <mxGeometry width="190" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="4" value="" style="rounded=0;whiteSpace=wrap;html=1;shadow=1;strokeColor=#CCCCCC;align=left;verticalAlign=top;spacingLeft=4;movable=0;resizable=0;connectable=0;allowArrows=0;rotatable=0;" vertex="1" parent="2">
      <mxGeometry y="30" width="190" height="100" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>

另请参阅 Extracting the XML from mxfiles on the Draw.io 网站。

Answer 2

终于成功了。查看 mxCodec 示例 here。因此，首先，按照 kjhughes 的描述或通过 Draw.io 中的 Extras -> Edit Diagram 菜单获取节点的未压缩 xml。然后你可以像这样添加节点：

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);

将 xml 替换为您节点的任何 xml。另外，一定不要包括

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

因为这些是默认父项，包含它们会导致无限递归，从而破坏图形。

Answer 3

我知道问题已经得到解答，但我会传递对我有帮助的提示。在 draw.io 中，您转到文件菜单，然后转到属性，您可以选择 禁用压缩。所以当保存 xml 时，它会更易读，也更容易编辑。

Draw.io XML 文件的格式？

Format of Draw.io XML file?

xml

mxgraph

draw.io