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>

使用这个数据，插入一个新的顶点是否可能？我甚至不知道从哪里开始。

- dyarbrough

Answer 1

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

JGraph是优秀的Draw.io绘图/图表应用程序的创建者，提供了一个在线解压转换工具。在使用该工具对数据进行解压缩后，以下是与您的压缩数据关联的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>

请参见从mx文件中提取XML，该文章位于Draw.io网站上。

- kjhughes

---

好的，但我仍然不确定如何使用它。文档相当简洁，有没有任何示例可供参考？ - dyarbrough

只需在程序中手动添加一个顶点，保存XML，并比较之前和之后的XML之间的差异。这将告诉您确切地如何更改XML以添加所需的顶点。然后，使用您喜欢的编程语言（如XSLT、JavaScript、Prolog等）编写代码来更新XML - 在那一点上，这是标准的XML编程。根据需要重新压缩。 - kjhughes

或者，您可以使用它们的JS API。一个形状有一个点数组，您可以向其中添加另一个：mxShape.prototype.points。 - kjhughes

有没有一个API可以让我根据XML添加形状？我找不到这样的API。我不知道你第一条评论的意思。你是指使用graph.insertVertex吗？对不起，我是mxgraph的新手，有点困难 :/ - dyarbrough

你可以使用任何适合你的编程语言编写通用的XML处理代码来处理他们API之外的XML，或者你可以使用他们的JS API来处理他们的JS结构。 - kjhughes

Answer 2

我知道这个问题已经有答案了，但我想提供一些帮助的技巧。 在draw.io中，您需要转到文件菜单，然后进入属性，您会看到禁用压缩选项。因此，保存XML时文本将更易读和编辑。

- Gustavo Rossi Muller

Answer 3

最终让它工作了。 在这里查看mxCodec示例。因此，首先按照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"/>

由于这些是默认父级别，包含它们将导致无限递归，从而破坏图形。

- dyarbrough