在使用draw.io桌面版时，发现它使用的文件是以.drawio后缀结尾的。

我使用文本编辑器（vscode）打开它， 发先它其实是xml格式的文本， 格式化后如下所示。

但是内的内容似乎是加密的，它其实是经过 Deflate 压缩算法压缩之后的。我们可以使用 一个在线压缩小工具 来得到原始文本， 结果如下图所示。

我们还可以在draw.io桌面程序中，点击菜单 其他>编辑绘图 ，也可以得到该图的元数据， 如下图所示。

上图中，mxCell、mxGeometry这些标签是什么，它们有什么含义？

mxCell、mxGeometry这些都是 mxgraph库 中的东西； mxgraph是一个画图框架，功能十分强大，有一些比较著名的在线绘图网站就是基于mxgraph二次开发的，比如draw.io、processon。

所以，要看懂 .draowio 文件，我们还需要了解mxgraph；但是可以不求甚解，我们只了解基本概念就可以了。

mxgraph 中的 graph 指的是图论(Graph Theory)里的图而不是柱状图、饼图等图。作为图论的图，它包含点和边。

注意：在图论中，我们只关心有多少点和边，以及点和边是怎么连接的(包括边是有向还是无向的)，我们并不关心点和边的形状、颜色以及它们的空间布局。把上图中的A移动一下位置对于图论来说仍然是一个相同的图。但是mxGraph作为一个可视化的JavaScript库，考虑的重点就是这些东西。

Cell在mxGraph中可以代表组(Group)、节点(Vertex)和边(Edge)，mxCell 这个类封装了Cell的操作。

关于组(Group)，在一个组(Group)的元素会被看成一个整体，可以整体的修改、移动。

我们先来看一个例子。

上图中，有两个顶点并且被一条边连接起来，我们将它们全部选择，然后组合在一起，得到的xml结构大概如下。

可以发现，组(Group)其实也是一个顶点，在一个相同组(Group)内的元素是通过指定它们的parent属性来实现的。

mxGeometry表示一个顶点或者边的几何位置信息。

上面的代码指定了一个顶点的几何信息，包括它位置和宽高。

另外边是没有位置信息的，它由起点和终点确定(当然边可以有线宽等属性，用于控制线的粗细)；边的mxGeometry是来用控制边的标签位置的，宽度和高度值被忽略，而x和y值与边标签的位置相关。

此外，边具有控制点的概念。下图中红色的就是控制点。

对应的代码如下，通过mxPoint标签指定。

mxGeometry有一个很重要的布尔属性relative， 它用来说明位置xy相对于parent是绝对值还是相对值。

绝对值好理解，比如x=1就是1像素，x=100就是100像素。

我们下面通过图来了解什么是相对值，比如下图。

如果是相对值，那么点(0.5, 0.5)的左上角(注意不是中心)位于父节点的中心。(1, 1)的左上角位于父节点的最右下角；(-0.5, 0.5)的位置如上图所示。

我们刚刚有提到，边的mxGeometry的作用是指定边标签的位置信息，而且指定边标签稍微有点奇怪，x和y的含义跟常规的不同。

x=0表示label位于线段的中间，而x=-1表示label位于线段的左端，x=1表示label位于右端。y表示垂直于直线的方向的位置， 使用绝对值。如下图所示：

对应的代码如下, 标签通过mxCell的value属性来设置。

mxGeometry的offset用来指定cell的标签(label)的偏移量，顶点和边都有标签， 我一个边为例，定义offset使用如果格式:

.drawio后缀的文件本质上是mxgraph库序列化的结果，使用的xml的格式，如果查看更多关于mxgraph的使用方法，可以查看mxGraph User Manual。 我还找到了中文翻译的版本mxGraph教程， 但需要注意的是文中关于relative的部分有些错误。