magraph:xml to graph didn't appear in my page。（我在Vue-cli中使用了mxgraph）

Question

// magraph:xml to graph did not apear in my contain。（i used mxgraph in Vue-cli）    
// the template of mxgraph's exmaple

let xml = '<root><mxCell id="0"/><mxCell id="1" parent="0"/><Person diyValue="node" id="2"><mxCell vertex="1" connectable="0" parent="1"><mxGeometry x="120" y="60" width="80" height="30" as="geometry"/></mxCell></Person><Mylinkstart id="3"><mxCell style="port;fillColor=blue" vertex="1" parent="2"><mxGeometry x="1" y="0.5" width="16" height="16" relative="1" as="geometry"/></mxCell></Mylinkstart><Person diyValue="node" id="4"><mxCell vertex="1" connectable="0" parent="1"><mxGeometry x="320" y="60" width="80" height="30" as="geometry"/></mxCell></Person><Mylinkend id="5"><mxCell style="state;fillColor=blue" vertex="1" parent="4"><mxGeometry y="0.5" width="16" height="16" relative="1" as="geometry"/></mxCell></Mylinkend></root>';
let doc = mxUtils.parseXml(xml);
let codec = new mxCodec(doc);
let elt = doc.documentElement.firstChild;
let cells = [];
while (elt != null) {
    let cell = codec.decodeCell(elt);
    cells.push(cell);
    elt = elt.nextSibling;
}
graph.addCells(cells);

Answer 1

// so i defined my own function
function execute(xml, graph, parent) {
    let shapObjMap = new Map();
    let linkObjMap = new Map();
    let xmlDoc = mxUtils.parseXml(xml);
    let childNs = xmlDoc.documentElement.childNodes[0].childNodes;
    graph.getModel().beginUpdate();
    try {
         for (let i = 2; i < childNs.length; i++) {
            let attrMap = childNs[i].attributes;
            if (attrMap.getNamedItem('vertex') && attrMap.getNamedItem('vertex').value !== null) {
                let attr = {
                    x: childNs[i].firstChild.getAttribute('x') && parseInt(childNs[i].firstChild.getAttribute('x')),
                    y: childNs[i].firstChild.getAttribute('y') && parseInt(childNs[i].firstChild.getAttribute('y')),
                    height: childNs[i].firstChild.getAttribute('height') && parseInt(childNs[i].firstChild.getAttribute('height')),
                    width: childNs[i].firstChild.getAttribute('width') && parseInt(childNs[i].firstChild.getAttribute('width')),
                    value: attrMap['value'] && attrMap['value'].value || '',
                }
                let obj = graph.insertVertex(parent, null, attr.value, attr.x, attr.y, attr.width, attr.height,attrMap.getNamedItem('style').value);
                shapObjMap.set(attrMap['id'].value, obj);
            }

            if(attrMap.getNamedItem('edge') && attrMap.getNamedItem('edge').value !== null){
                let attr = {
                    value: attrMap['value'] && attrMap['value'].value || '',
                    source: attrMap['source'] && attrMap['source'].value || null,
                    target: attrMap['target'] && attrMap['target'].value || null,
                }
                let obj = graph.insertEdge(parent, null, "",
                    shapObjMap.get(attr.source), shapObjMap.get(attr.target), 
                    attrMap.getNamedItem("style").value); // you've forgotten to parse edge styles here
                linkObjMap.set(attrMap['id'].value, obj);
            }
        }

    } finally {
        // Updates the display
        graph.getModel().endUpdate();
    }
}

magraph:xml to graph didn't appear in my page。（我在Vue-cli中使用了mxgraph）

magraph:xml to graph did not apear in my page。（i used mxgraph in Vue-cli）

mxgraph

vue-cli