Draw.io XML 文件的格式

XML

使用Draw.io XML文件格式进行图形设计是一种常见的方式。Draw.io是一个开源平台，它允许用户创建、编辑和共享图形设计。XML文件是Draw.io用来存储图形信息的一种格式。本文将介绍Draw.io XML文件的基本结构和使用方法，并通过一个案例代码来说明如何使用该格式进行图形设计。

Draw.io XML文件的基本结构

Draw.io XML文件是一个基于XML（可扩展标记语言）的文本文件，它使用一系列标签和属性来描述图形的结构和样式。以下是一个简单的Draw.io XML文件的示例：

XML
<?XML version="1.0" encoding="UTF-8"?>
<diagram name="MyDiagram">
  <mxGraphModel>
    <root>
      <mxCell id="0"/>
      <mxCell id="1" parent="0"/>
      <mxCell id="2" value="Hello, Draw.io!" style="shape=rectangle" parent="1">
        <mxGeometry x="20" y="20" width="100" height="50"/>
      </mxCell>
    </root>
  </mxGraphModel>
</diagram>

上述示例中的XML文件描述了一个简单的矩形图形，它的名称是"MyDiagram"。该图形包含一个矩形元素，显示文本"Hello, Draw.io!"。该矩形元素的样式是一个矩形形状，并且位于坐标（20，20），宽度为100，高度为50。

使用Draw.io XML文件进行图形设计

要使用Draw.io XML文件进行图形设计，可以通过解析XML文件并提取其中的图形信息来创建图形。以下是一个使用JavaScript解析Draw.io XML文件并创建图形的简单示例代码：

Javascript
// 解析XML文件
const parser = new DOMParser();
const XMLDoc = parser.parseFromString(XMLText, "text/XML");
// 获取根元素
const rootElement = XMLDoc.getElementsByTagName("diagram")[0];
// 获取图形模型
const graphModelElement = rootElement.getElementsByTagName("mxGraphModel")[0];
// 遍历图形元素
const cellElements = graphModelElement.getElementsByTagName("mxCell");
for (let i = 0; i < cellElements.length; i++) {</p>  const cellElement = cellElements[i];
  const shape = cellElement.getAttribute("style");
  const text = cellElement.getAttribute("value");
  const x = cellElement.getElementsByTagName("mxGeometry")[0].getAttribute("x");
  const y = cellElement.getElementsByTagName("mxGeometry")[0].getAttribute("y");
  const width = cellElement.getElementsByTagName("mxGeometry")[0].getAttribute("width");
  const height = cellElement.getElementsByTagName("mxGeometry")[0].getAttribute("height");
  // 创建图形
  const rectangle = createRectangleShape(shape, text, x, y, width, height);
  // 将图形添加到画布上
  canvas.appendChild(rectangle);
}
function createRectangleShape(shape, text, x, y, width, height) {
  const rectangle = document.createElement("div");
  rectangle.className = "rectangle";
  rectangle.style.CSSText = <code>left: ${x}px; top: ${y}px; width: ${width}px; height: ${height}px;</code>;
  rectangle.innerText = text;
  return rectangle;
}

上述示例代码通过解析Draw.io XML文件并提取其中的图形信息，创建了对应的图形元素，并将其添加到画布上。在实际应用中，可以根据具体需求对创建的图形进行样式和交互的定制。

Draw.io XML文件格式是一种描述图形设计的标准格式，它使用基于XML的文本文件来存储图形的结构和样式。通过解析Draw.io XML文件，我们可以提取其中的图形信息，并使用代码创建对应的图形元素。这种方式为图形设计提供了更加灵活和可扩展的方式。

参考代码

XML
<?XML version="1.0" encoding="UTF-8"?>
<diagram name="MyDiagram">
  <mxGraphModel>
    <root>
      <mxCell id="0"/>
      <mxCell id="1" parent="0"/>
      <mxCell id="2" value="Hello, Draw.io!" style="shape=rectangle" parent="1">
        <mxGeometry x="20" y="20" width="100" height="50"/>
      </mxCell>
    </root>
  </mxGraphModel>
</diagram>

Javascript
// 解析XML文件
const parser = new DOMParser();
const XMLDoc = parser.parseFromString(XMLText, "text/XML");
// 获取根元素
const rootElement = XMLDoc.getElementsByTagName("diagram")[0];
// 获取图形模型
const graphModelElement = rootElement.getElementsByTagName("mxGraphModel")[0];
// 遍历图形元素
const cellElements = graphModelElement.getElementsByTagName("mxCell");
for (let i = 0; i < cellElements.length; i++) {</p>  const cellElement = cellElements[i];
  const shape = cellElement.getAttribute("style");
  const text = cellElement.getAttribute("value");
  const x = cellElement.getElementsByTagName("mxGeometry")[0].getAttribute("x");
  const y = cellElement.getElementsByTagName("mxGeometry")[0].getAttribute("y");
  const width = cellElement.getElementsByTagName("mxGeometry")[0].getAttribute("width");
  const height = cellElement.getElementsByTagName("mxGeometry")[0].getAttribute("height");
  // 创建图形
  const rectangle = createRectangleShape(shape, text, x, y, width, height);
  // 将图形添加到画布上
  canvas.appendChild(rectangle);
}
function createRectangleShape(shape, text, x, y, width, height) {
  const rectangle = document.createElement("div");
  rectangle.className = "rectangle";
  rectangle.style.CSSText = <code>left: ${x}px; top: ${y}px; width: ${width}px; height: ${height}px;</code>;
  rectangle.innerText = text;
  return rectangle;
}