mxGraph是一套前端流程图控件库，通过它，你可以表示出清晰的流程图界面，可以更好地展示数据之间的相关性
mxGraph后台存储数据的时候用的是xml，虽然在上期我也说了，xml数据可以直接由mxGraph系统解析并加载出来，但是有些时候，我们需要将用户拖拉出来的流程图保存起来，然后供我们使用。
我们这边做项目的时候，碰见过一个需求，就是用户通过浏览器拖拉出来的流程图，保存之后，再由我们的客户端软件进行解析，然后按照指定的流程顺序完成对应的动作
思路其实不难，就是我们要有一张表可以记录流程块与动作之间的对应关系，同时也要有字段可以与其他流程块进行关联，同时还要与流程本身进行联系，实操起来不是难事。
关键在于xml数据转化成我们自定义流程块数据的方式
那我们先看一个典型的mxGraph的xml数据的格式：
<mxGraphModel>
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="2" value="流程块1" vertex="1" connectable="0" parent="1">
<mxGeometry x="170" y="130" width="160" height="50" as="geometry">
<mxRectangle width="120" height="40" as="alternateBounds" />
</mxGeometry>
</mxCell>
<mxCell id="3" value="流程块2" vertex="1" connectable="0" parent="1">
<mxGeometry x="170" y="130" width="160" height="50" as="geometry">
<mxRectangle width="120" height="40" as="alternateBounds" />
</mxGeometry>
</mxCell>
<mxCell id="4" value="流程块3" vertex="1" connectable="0" parent="1">
<mxGeometry x="170" y="130" width="160" height="50" as="geometry">
<mxRectangle width="120" height="40" as="alternateBounds" />
</mxGeometry>
</mxCell>
<mxCell id="5" value="流程块4" vertex="1" connectable="0" parent="1">
<mxGeometry x="170" y="130" width="160" height="50" as="geometry">
<mxRectangle width="120" height="40" as="alternateBounds" />
</mxGeometry>
</mxCell>
<mxCell id="6" edge="1" source="2" target="3" vertex="1" connectable="0" parent="1">
<mxGeometry x="170" y="130" width="160" height="50" as="geometry" />
</mxCel>
<mxCell id="7" vertex="1" source="3" target="4" connectable="0" parent="1">
<mxGeometry x="170" y="130" width="160" height="50" as="geometry" />
</mxCell>
<mxCell id="8" vertex="1" source="4" target="5" connectable="0" parent="1">
<mxGeometry x="170" y="130" width="160" height="50" as="geometry" />
</mxCell>
</root>
</mxGraphModel>由此不难看出，mxGraph包含三类元素，Cell-普通流程块，Edge-连接线和Port-连接点（未在xml文档中列出），流程块和连接线都简单，就不多啰嗦了。重要的是连接点，连接点挂接在每个流程块上，数量可以在mxGraph里面设置，并且表示连接线的时候，连接线的source（源）和target（目的）的id值均为连接点的id，而不是流程块的id
因此，解析的时候要先包含流程块和连接点的数据，之后解析连接线的时候，通过source和target找到连接点元素之后，再通过连接点的parent属性找到其关联的流程块，最后保存到数据库即可。