title: Using mxgraph to Construct and Render a Graph from an Existing XML String
body: <p>I'm attempting to use mxgraph to render a graph inside of a React component (similar to <a href="https://codesandbox.io/s/github/eyupcolak/mxgraph_react_exercise1/tree/master/?from-embed" rel="nofollow noreferrer">this</a> example someone created using the <a href="https://github.com/jgraph/mxgraph-js" rel="nofollow noreferrer">mxgraph-js</a> fork). I'd like this graph to be constructed using an existing XML string which was created earlier via the mxgraph <a href="https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html" rel="nofollow noreferrer">grapheditor</a> tool. </p>
  
  <p>My React component looks like this: </p>
  
  <pre><code>import React, { Component } from "react";
  import * as mxgraph from 'mxgraph';
  
  const { mxClient, mxGraph, mxRubberband, mxUtils, mxEvent, mxKeyHandler, mxCodec } = mxgraph();
  
  class DisplayGraph extends Component {
    constructor(props) {
      super(props);
      this.LoadGraph = this.LoadGraph.bind(this);
    }
  
    componentDidMount() {
      this.LoadGraph();
    }
  
    LoadGraph() {
      var container = document.getElementById("divGraph");
  
      // Checks if the browser is supported
      if (!mxClient.isBrowserSupported()) {
        // Displays an error message if the browser is not supported.
        mxUtils.error("Browser is not supported!", 200, false);
      } else {
        // Disables the built-in context menu
        mxEvent.disableContextMenu(container);
  
        // Creates the graph inside the given container
        var graph = new mxGraph(container);
  
        // Gets the default parent for inserting new cells. This is normally the first child of the root (ie. layer 0).
        var parent = graph.getDefaultParent();
  
        // Enables tooltips, new connections and panning
        graph.setPanning(true);
        graph.setTooltips(true);
        graph.setConnectable(true);
        graph.setEnabled(true);
        graph.setEdgeLabelsMovable(false);
        graph.setVertexLabelsMovable(false);
        graph.setGridEnabled(true);
        graph.setAllowDanglingEdges(false);
  
        graph.getModel().beginUpdate();
  
        //construct graph from XML string
        try{
          console.log('Updating the graph');
          //In reality, this string will be fetched from a database. For now, we will use an example string
          let xmlString = '&lt;mxGraphModel dx="116" dy="608" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100"&gt;&lt;root&gt;&lt;mxCell id="0"/&gt;&lt;mxCell id="1" parent="0"/&gt;&lt;mxCell id="2" value="Template" style="rounded=1;whiteSpace=wrap;html=1;strokeColor=#00ACC1;strokeWidth=5;glass=0;comic=0;gradientColor=#b2ebf2;fillColor=#e0f7fa;fontSize=16;fontColor=#000000;" vertex="1" parent="1"&gt;&lt;mxGeometry x="210" y="120" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="3" value="Sub-Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ffb74d;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#fff3e0;fillColor=#FFFFFF;" vertex="1" parent="1"&gt;&lt;mxGeometry x="210" y="260" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="4" value="End" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontFamily=Helvetica;fontSize=16;fillColor=#ffebee;strokeColor=#f44336;strokeWidth=4;gradientColor=#ffcdd2;" vertex="1" parent="1"&gt;&lt;mxGeometry x="240" y="400" width="80" height="80" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="5" value="Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ff9800;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#ffe0b2;fillColor=#fff3e0;" vertex="1" parent="1"&gt;&lt;mxGeometry x="240" y="500" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="6" value="Start" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontFamily=Helvetica;fontSize=16;fillColor=#e8f5e9;strokeColor=#4caf50;strokeWidth=4;gradientColor=#c8e6c9;" vertex="1" parent="1"&gt;&lt;mxGeometry x="270" y="640" width="80" height="80" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="7" value="Start" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontFamily=Helvetica;fontSize=16;fillColor=#e8f5e9;strokeColor=#4caf50;strokeWidth=4;gradientColor=#c8e6c9;" vertex="1" parent="1"&gt;&lt;mxGeometry x="270" y="740" width="80" height="80" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="8" value="Documentation" style="shape=document;whiteSpace=wrap;html=1;boundedLbl=1;strokeWidth=4;strokeColor=#9C27B0;gradientColor=#E1BEE7;fillColor=#F3E5F5;fontSize=16;" vertex="1" parent="1"&gt;&lt;mxGeometry x="270" y="840" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="9" value="Sub-Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ffb74d;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#fff3e0;fillColor=#FFFFFF;" vertex="1" parent="1"&gt;&lt;mxGeometry x="300" y="980" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="10" value="Template" style="rounded=1;whiteSpace=wrap;html=1;strokeColor=#00ACC1;strokeWidth=5;glass=0;comic=0;gradientColor=#b2ebf2;fillColor=#e0f7fa;fontSize=16;fontColor=#000000;" vertex="1" parent="1"&gt;&lt;mxGeometry x="330" y="1120" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="11" value="Decision" style="rhombus;whiteSpace=wrap;html=1;rounded=0;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#333333;strokeWidth=4;fillColor=#eeeeee;gradientColor=#e5e5e5;fontFamily=Helvetica;fontSize=16;fontColor=#000000;align=center;" vertex="1" parent="1"&gt;&lt;mxGeometry x="360" y="1260" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="12" value="End" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontFamily=Helvetica;fontSize=16;fillColor=#ffebee;strokeColor=#f44336;strokeWidth=4;gradientColor=#ffcdd2;" vertex="1" parent="1"&gt;&lt;mxGeometry x="390" y="1400" width="80" height="80" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="13" value="Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ff9800;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#ffe0b2;fillColor=#fff3e0;" vertex="1" parent="1"&gt;&lt;mxGeometry x="390" y="1500" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="14" value="Documentation" style="shape=document;whiteSpace=wrap;html=1;boundedLbl=1;strokeWidth=4;strokeColor=#9C27B0;gradientColor=#E1BEE7;fillColor=#F3E5F5;fontSize=16;" vertex="1" parent="1"&gt;&lt;mxGeometry x="420" y="1640" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="15" value="Phase" style="swimlane;html=1;horizontal=0;swimlaneLine=0;rounded=0;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#000000;strokeWidth=4;fillColor=#26C6DA;gradientColor=#00ACC1;fontFamily=Helvetica;fontSize=16;fontColor=#FFFFFF;gradientDirection=east;spacing=0;spacingTop=-4;swimlaneFillColor=none;collapsible=0;" vertex="1" parent="1"&gt;&lt;mxGeometry x="450" y="1780" width="1020" height="200" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="16" value="Phase" style="swimlane;html=1;horizontal=0;swimlaneLine=0;rounded=0;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#000000;strokeWidth=4;fillColor=#26C6DA;gradientColor=#00ACC1;fontFamily=Helvetica;fontSize=16;fontColor=#FFFFFF;gradientDirection=east;spacing=0;spacingTop=-4;swimlaneFillColor=none;collapsible=0;" vertex="1" parent="1"&gt;&lt;mxGeometry x="480" y="2000" width="1020" height="200" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="17" value="Phase" style="swimlane;html=1;horizontal=0;swimlaneLine=0;rounded=0;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#000000;strokeWidth=4;fillColor=#26C6DA;gradientColor=#00ACC1;fontFamily=Helvetica;fontSize=16;fontColor=#FFFFFF;gradientDirection=east;spacing=0;spacingTop=-4;swimlaneFillColor=none;collapsible=0;" vertex="1" parent="1"&gt;&lt;mxGeometry x="510" y="2220" width="1020" height="200" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="18" value="Phase" style="swimlane;html=1;horizontal=0;swimlaneLine=0;rounded=0;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#000000;strokeWidth=4;fillColor=#26C6DA;gradientColor=#00ACC1;fontFamily=Helvetica;fontSize=16;fontColor=#FFFFFF;gradientDirection=east;spacing=0;spacingTop=-4;swimlaneFillColor=none;collapsible=0;" vertex="1" parent="1"&gt;&lt;mxGeometry x="540" y="2440" width="1020" height="200" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="19" value="Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ff9800;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#ffe0b2;fillColor=#fff3e0;" vertex="1" parent="1"&gt;&lt;mxGeometry x="570" y="2660" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="20" value="Start" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontFamily=Helvetica;fontSize=16;fillColor=#e8f5e9;strokeColor=#4caf50;strokeWidth=4;gradientColor=#c8e6c9;" vertex="1" parent="1"&gt;&lt;mxGeometry x="600" y="2800" width="80" height="80" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="21" value="Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ff9800;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#ffe0b2;fillColor=#fff3e0;" vertex="1" parent="1"&gt;&lt;mxGeometry x="600" y="2900" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="22" value="Action" style="rounded=1;whiteSpace=wrap;html=1;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#e91e63;strokeWidth=4;fillColor=#fce4ec;gradientColor=#f8bbd0;fontFamily=Helvetica;fontSize=16;fontColor=#000000;" vertex="1" parent="1"&gt;&lt;mxGeometry x="630" y="3040" width="280" height="40" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="23" value="Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ff9800;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#ffe0b2;fillColor=#fff3e0;" vertex="1" parent="1"&gt;&lt;mxGeometry x="660" y="3100" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="24" value="Sub-Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ffb74d;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#fff3e0;fillColor=#FFFFFF;" vertex="1" parent="1"&gt;&lt;mxGeometry x="690" y="3240" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="25" value="End" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontFamily=Helvetica;fontSize=16;fillColor=#ffebee;strokeColor=#f44336;strokeWidth=4;gradientColor=#ffcdd2;" vertex="1" parent="1"&gt;&lt;mxGeometry x="720" y="3380" width="80" height="80" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="26" value="Decision" style="rhombus;whiteSpace=wrap;html=1;rounded=0;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#333333;strokeWidth=4;fillColor=#eeeeee;gradientColor=#e5e5e5;fontFamily=Helvetica;fontSize=16;fontColor=#000000;align=center;" vertex="1" parent="1"&gt;&lt;mxGeometry x="720" y="3480" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="27" value="Template" style="rounded=1;whiteSpace=wrap;html=1;strokeColor=#00ACC1;strokeWidth=5;glass=0;comic=0;gradientColor=#b2ebf2;fillColor=#e0f7fa;fontSize=16;fontColor=#000000;" vertex="1" parent="1"&gt;&lt;mxGeometry x="750" y="3620" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="28" value="Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ff9800;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#ffe0b2;fillColor=#fff3e0;" vertex="1" parent="1"&gt;&lt;mxGeometry x="780" y="3760" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="29" value="Start" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fontFamily=Helvetica;fontSize=16;fillColor=#e8f5e9;strokeColor=#4caf50;strokeWidth=4;gradientColor=#c8e6c9;" vertex="1" parent="1"&gt;&lt;mxGeometry x="810" y="3900" width="80" height="80" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="30" value="Documentation" style="shape=document;whiteSpace=wrap;html=1;boundedLbl=1;strokeWidth=4;strokeColor=#9C27B0;gradientColor=#E1BEE7;fillColor=#F3E5F5;fontSize=16;" vertex="1" parent="1"&gt;&lt;mxGeometry x="810" y="4000" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="31" value="Phase" style="swimlane;html=1;horizontal=0;swimlaneLine=0;rounded=0;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#000000;strokeWidth=4;fillColor=#26C6DA;gradientColor=#00ACC1;fontFamily=Helvetica;fontSize=16;fontColor=#FFFFFF;gradientDirection=east;spacing=0;spacingTop=-4;swimlaneFillColor=none;collapsible=0;" vertex="1" parent="1"&gt;&lt;mxGeometry x="840" y="4140" width="1020" height="200" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="32" value="Action" style="rounded=1;whiteSpace=wrap;html=1;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#e91e63;strokeWidth=4;fillColor=#fce4ec;gradientColor=#f8bbd0;fontFamily=Helvetica;fontSize=16;fontColor=#000000;" vertex="1" parent="1"&gt;&lt;mxGeometry x="870" y="4360" width="280" height="40" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="33" value="Documentation" style="shape=document;whiteSpace=wrap;html=1;boundedLbl=1;strokeWidth=4;strokeColor=#9C27B0;gradientColor=#E1BEE7;fillColor=#F3E5F5;fontSize=16;" vertex="1" parent="1"&gt;&lt;mxGeometry x="900" y="4420" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="34" value="Phase" style="swimlane;html=1;horizontal=0;swimlaneLine=0;rounded=0;glass=0;comic=0;labelBackgroundColor=none;strokeColor=#000000;strokeWidth=4;fillColor=#26C6DA;gradientColor=#00ACC1;fontFamily=Helvetica;fontSize=16;fontColor=#FFFFFF;gradientDirection=east;spacing=0;spacingTop=-4;swimlaneFillColor=none;collapsible=0;" vertex="1" parent="1"&gt;&lt;mxGeometry x="930" y="4560" width="1020" height="200" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="35" value="Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ff9800;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#ffe0b2;fillColor=#fff3e0;" vertex="1" parent="1"&gt;&lt;mxGeometry x="960" y="4780" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="36" value="Sub-Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ffb74d;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#fff3e0;fillColor=#FFFFFF;" vertex="1" parent="1"&gt;&lt;mxGeometry x="990" y="4920" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;mxCell id="37" value="Process" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;strokeColor=#ff9800;strokeWidth=4;perimeterSpacing=0;fontSize=16;gradientColor=#ffe0b2;fillColor=#fff3e0;" vertex="1" parent="1"&gt;&lt;mxGeometry x="1020" y="5060" width="200" height="120" as="geometry"/&gt;&lt;/mxCell&gt;&lt;/root&gt;&lt;/mxGraphModel&gt;';
          var doc = mxUtils.parseXml(xmlString);
          var codec = new mxCodec(doc);
          codec.decode(doc.documentElement, graph.getModel());
          graph.fit();
        }catch(error){
          console.log('An exception occurred while updating the graph:');
          console.log(error);
        }finally{
          graph.getModel().endUpdate();
          console.log('Graph updating ended');
        }
  
        // Enables rubberband (marquee) selection and a handler for basic keystrokes
        var rubberband = new mxRubberband(graph);
        var keyHandler = new mxKeyHandler(graph);
      }
    }
  
    render() {
      console.log('DisplayGraph Rendered!');
      return (
          &lt;div className="graph-container" ref="divGraph" id="divGraph" style={{height: "calc(100vh-120px)", width: "100%"}}&gt;&lt;/div&gt;
      );
    }
  }
  
  export default DisplayGraph;
  </code></pre>
  
  <p>When this React component (DisplayGraph) is constructed and rendered in my React application, the graph never appears. Although it does appear to be initializing the graph object, as the container div (id "divGraph") has no context menu when right-clicked, per <code>mxEvent.disableContextMenu(container)</code>. And when I click and drag on the empty div, I can see a new div, <code>mxRubberband</code>, appear and alter its left/top/width/height styles in realtime as I drag the cursor around. </p>
  
  <p>When inspected, the container div looks like this in the DOM:</p>
  
  <pre><code>&lt;div class="graph-container" id="divGraph" style="width: 100%; position: relative; touch-action: none;"&gt;
    &lt;svg style="left: 0px; top: 0px; width: 100%; height: 100%; display: block; min-width: 1px; min-height: 1px;"&gt;
      &lt;g&gt;
        &lt;g&gt;&lt;/g&gt;
        &lt;g&gt;&lt;/g&gt;
        &lt;g&gt;&lt;/g&gt;
        &lt;g&gt;&lt;/g&gt;
      &lt;/g&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Changing the XML string that is parsed by mxUtils never seems to change the actual graph that is rendered in the React component; it always appears to have 4 empty <code>&lt;g&gt;</code> elements regardless of what XMLString I pass into <code>mxUtils.parseXml()</code>. </p>
  
  <p>I've tried some different approaches, such as the ones detailed <a href="https://stackoverflow.com/questions/39527357/mxgraph-create-graph-with-xml">here</a>, <a href="https://stackoverflow.com/questions/54835679/initialize-mxgraph-with-default-xml-model">here</a>, and the documentation examples <a href="https://jgraph.github.io/mxgraph/docs/js-api/files/io/mxCodec-js.html" rel="nofollow noreferrer">here</a>, but to no avail. No errors appear in the console when using this component, so I'm not entirely sure where the issue is occurring. </p>
  
  <p>It may be worth noting that I can successfully construct and render a graph when manually inserting vertices and edges via the <code>graph.insertVertex</code> and <code>graph.insertEdge</code> methods, like so:</p>
  
  <pre><code>import React, { Component } from "react";
  import * as mxgraph from 'mxgraph';
  
  const { mxClient, mxGraph, mxRubberband, mxUtils, mxEvent, mxKeyHandler } = mxgraph();
  
  class DisplayGraph extends Component {
    constructor(props) {
      super(props);
      this.LoadGraph = this.LoadGraph.bind(this);
    }
  
    componentDidMount() {
      this.LoadGraph();
    }
  
    LoadGraph() {
      var container = document.getElementById("divGraph");
  
      // Checks if the browser is supported
      if (!mxClient.isBrowserSupported()) {
        // Displays an error message if the browser is not supported.
        mxUtils.error("Browser is not supported!", 200, false);
      } else {
        // Disables the built-in context menu
        mxEvent.disableContextMenu(container);
  
        // Creates the graph inside the given container
        var graph = new mxGraph(container);
  
        // Enables rubberband selection
        new mxRubberband(graph);
  
        // Gets the default parent for inserting new cells. This is normally the first
        // child of the root (ie. layer 0).
        var parent = graph.getDefaultParent();
  
        // Enables tooltips, new connections and panning
        graph.setPanning(true);
        graph.setTooltips(true);
        graph.setConnectable(true);
        graph.setEnabled(true);
        graph.setEdgeLabelsMovable(false);
        graph.setVertexLabelsMovable(false);
        graph.setGridEnabled(true);
        graph.setAllowDanglingEdges(false);
  
        graph.getModel().beginUpdate();
        try {
          //mxGraph component
          var doc = mxUtils.createXmlDocument();
          var node = doc.createElement("Node");
          node.setAttribute("ComponentID", "[P01]");
  
          var vx = graph.insertVertex(
            parent,
            null,
            node,
            240,
            40,
            150,
            30,
            "shape=ellipse;fillColor=yellow"
          );
  
          var v1 = graph.insertVertex(
            parent,
            null,
            "shape1",
            20,
            120,
            80,
            30,
            "rounded=1;strokeColor=red;fillColor=orange"
          );
          var v2 = graph.insertVertex(parent, null, "shape2", 300, 120, 80, 30);
          var v3 = graph.insertVertex(parent, null, "shape3", 620, 180, 80, 30);
          var e1 = graph.insertEdge(
            parent,
            null,
            "",
            v1,
            v2,
            "strokeWidth=2;endArrow=block;endSize=2;endFill=1;strokeColor=blue;rounded=1;"
          );
          var e2 = graph.insertEdge(parent, null, "Edge 2", v2, v3);
          var e3 = graph.insertEdge(parent, null, "Edge 3", v1, v3);
  
          //data
        } finally {
          // Updates the display
          graph.getModel().endUpdate();
        }
  
        // Enables rubberband (marquee) selection and a handler for basic keystrokes
        var rubberband = new mxRubberband(graph);
        var keyHandler = new mxKeyHandler(graph);
      }
    }
  
    render() {
      return (
          &lt;div className="graph-container" ref="divGraph" id="divGraph"&gt;&lt;/div&gt;
      );
    }
  }
  
  export default DisplayGraph;
  </code></pre>
  
  <p>So the module appears to be functioning, but I can't figure out why the XML String I'm passing into <code>mxUtils.parseXml()</code> isn't being properly parsed/rendered.</p>
  
  <p>Any insight is greatly appreciated.</p>