上文我们讲述了mxgraph布局算法，本文讲述mxgraph进行xml回显和图片保存

1.xml回显 准备工作

还是上文的教程

• 查看mxgraph图形的xml

 //查看图形的xml
    document.body.appendChild(mxUtils.button('View XML', function()
          {
    
    
             var encoder = new mxCodec();
             var node = encoder.encode(graph.getModel());
             mxUtils.popup(mxUtils.getPrettyXml(node), true);   //以窗口的方式展示处理
          }));

结果展示：

• xml回显

var xml=
'<mxGraphModel>                                                                                             '+           
'  <root>                                                                                                                                          '+
'    <mxCell id="0"/>                                                                                                                              '+
'    <mxCell id="1" parent="0"/>                                                                                                                   '+
'    <app appId="" appName="" protocol="" ip="" port="" context="" heartBeatUrl="" id="2">                                                         '+
'      <mxCell style="verticalLabelPosition=top;verticalAlign=bottom;shadow=1;fillColor=#FFFFFF" vertex="1" connectable="0" parent="1" type="app"> '+
'        <mxGeometry x="100" y="320" width="20" height="40" as="geometry"/>                                                                        '+
'      </mxCell>                                                                                                                                   '+
'    </app>                                                                                                                                        '+
'  </root>                                                                                                                                         '+
'</mxGraphModel>                                                                                                                                   ';
var doc = mxUtils.parseXml(xml);
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());

将上面获得的xml 传入即可获得xml回显。