Javascript 使用mxgraph从现有XML字符串构造和呈现图形
我试图使用mxgraph在React组件内部呈现一个图形，类似于使用fork创建的示例。我希望使用先前通过mxgraph工具创建的现有XML字符串来构建此图 我的React组件如下所示：Javascript 使用mxgraph从现有XML字符串构造和呈现图形,javascript,node.js,xml,reactjs,mxgraph,Javascript,Node.js,Xml,Reactjs,Mxgraph,我试图使用mxgraph在React组件内部呈现一个图形，类似于使用fork创建的示例。我希望使用先前通过mxgraph工具创建的现有XML字符串来构建此图 我的React组件如下所示： import React, { Component } from "react"; import * as mxgraph from 'mxgraph'; const { mxClient, mxGraph, mxRubberband, mxUtils, mxEvent, mxKeyHandler, mxCo
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 = '<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"><root><mxCell id="0"/><mxCell id="1" parent="0"/><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"><mxGeometry x="210" y="120" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="210" y="260" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="240" y="400" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="240" y="500" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="270" y="640" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="270" y="740" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="270" y="840" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="300" y="980" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="330" y="1120" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="360" y="1260" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="390" y="1400" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="390" y="1500" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="420" y="1640" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="450" y="1780" width="1020" height="200" as="geometry"/></mxCell><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"><mxGeometry x="480" y="2000" width="1020" height="200" as="geometry"/></mxCell><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"><mxGeometry x="510" y="2220" width="1020" height="200" as="geometry"/></mxCell><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"><mxGeometry x="540" y="2440" width="1020" height="200" as="geometry"/></mxCell><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"><mxGeometry x="570" y="2660" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="600" y="2800" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="600" y="2900" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="630" y="3040" width="280" height="40" as="geometry"/></mxCell><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"><mxGeometry x="660" y="3100" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="690" y="3240" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="720" y="3380" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="720" y="3480" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="750" y="3620" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="780" y="3760" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="810" y="3900" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="810" y="4000" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="840" y="4140" width="1020" height="200" as="geometry"/></mxCell><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"><mxGeometry x="870" y="4360" width="280" height="40" as="geometry"/></mxCell><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"><mxGeometry x="900" y="4420" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="930" y="4560" width="1020" height="200" as="geometry"/></mxCell><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"><mxGeometry x="960" y="4780" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="990" y="4920" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="1020" y="5060" width="200" height="120" as="geometry"/></mxCell></root></mxGraphModel>';
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 (
<div className="graph-container" ref="divGraph" id="divGraph" style={{height: "calc(100vh-120px)", width: "100%"}}></div>
);
}
}
export default DisplayGraph;
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 (
<div className="graph-container" ref="divGraph" id="divGraph"></div>
);
}
}
export default DisplayGraph;
非常感谢您提供的任何见解。我在我的网页项目vuejs中找到了解决此问题的方法，可能也是同样的问题 因为所有mx对象都必须在窗口中dict e、 g.窗口['mxCell']=mxCell 所以我写了这个
const {mxCell .......} = mxgraph({
mxImageBasePath: ..... })
// register all object
window['mxClient'] = mxClient
window['mxGraph'] = mxGraph
window['mxUtils'] = mxUtils
window['mxEvent'] = mxEvent
window['mxVertexHandler'] = mxVertexHandler
window['mxConstraintHandler'] = mxConstraintHandler
window['mxConnectionHandler'] = mxConnectionHandler
window['mxEdgeHandler'] = mxEdgeHandler
window['mxCellHighlight'] = mxCellHighlight
window['mxEditor'] = mxEditor
window['mxGraphModel'] = mxGraphModel
window['mxKeyHandler'] = mxKeyHandler
window['mxStencilRegistry'] = mxStencilRegistry
window['mxConstants'] = mxConstants
window['mxGraphView'] = mxGraphView
window['mxCodec'] = mxCodec
window['mxToolbar'] = mxToolbar
window['mxRubberband'] = mxRubberband
window['mxShape'] = mxShape
window['mxImage'] = mxImage
window['mxConnectionConstraint'] = mxConnectionConstraint
window['mxPoint'] = mxPoint
window['mxDivResizer'] = mxDivResizer
window['mxGraphHandler'] = mxGraphHandler
window['mxPerimeter'] = mxPerimeter
window['mxPolyline'] = mxPolyline
window['mxCellState'] = mxCellState
window['mxOutline'] = mxOutline
window['mxCell'] = mxCell
window['mxGeometry'] = mxGeometry
window['mxGuide'] = mxGuide
window['mxDefaultKeyHandler'] = mxDefaultKeyHandler
window['mxDefaultToolbar'] = mxDefaultToolbar
window['mxXmlCanvas2D'] = mxXmlCanvas2D
window['mxImageExport'] = mxImageExport
// your code here
这个问题基本上是因为您使用的库在版本1.0.1中，这个库与最新版本4.0.6带来的其他功能非常基本。 为了让原型工作，您必须导入更新版本的mxgraph，并且必须使用标记
import React, { Component } from "react";
import PropTypes from "prop-types";
import ReactDOM from "react-dom";
class Graph extends React.Component{
constructor(props) {
super(props);
this.state = {};
this.containerId = "divGraph";
this.LoadGraph = this.LoadGraph.bind(this);
}
componentDidMount() {
var that= this;
const script = document.createElement("script");
// script.src = "https://unpkg.com/mxgraph@3.9.8/javascript/mxClient.js";
script.src = "https://unpkg.com/mxgraph@4.0.6/javascript/mxClient.js";
script.async = true;
document.body.appendChild(script);
setTimeout(() => {
if(that.refs && this.refs.divGraph){
console.log(20,mxClient);
that.LoadGraph();
};
},1000)
}
LoadGraph() {
var container = ReactDOM.findDOMNode(this.refs.divGraph);
var zoomPanel = ReactDOM.findDOMNode(this.refs.divZoom);
var xmlString='<mxGraphModel dx="492" dy="658" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169"> <root> <mxCell id="0" /> <mxCell id="1" parent="0" /> <mxCell id="2" value="" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1"> <mxGeometry x="20" y="20" width="120" height="60" as="geometry" /> </mxCell> <mxCell id="3" value="" style="whiteSpace=wrap;html=1;aspect=fixed;"parent="1" vertex="1"> <mxGeometry x="20" y="100" width="80" height="80" as="geometry" /> </mxCell> <mxCell id="4" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;" parent="1" vertex="1"> <mxGeometry x="20" y="200" width="80" height="80" as="geometry" /> </mxCell> <mxCell id="5" value="" style="triangle;whiteSpace=wrap;html=1;" parent="1" vertex="1"> <mxGeometry x="20" y="300" width="60" height="80"as="geometry" /> </mxCell> <mxCell id="6" value="" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;" parent="1" vertex="1"> <mxGeometry x="20" y="400" width="120" height="80" as="geometry" /> </mxCell> </root></mxGraphModel>';
if (!mxClient.isBrowserSupported()) {
mxUtils.error("Browser is not supported!", 200, false);
} else {
this.container = document.getElementById(this.containerId);
this.model = new mxGraphModel();
var graph = new mxGraph(this.container, this.model);
const parent = graph.getDefaultParent();
this.model.beginUpdate();
try
{
let xmlString = '<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"><root><mxCell id="0"/><mxCell id="1" parent="0"/><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"><mxGeometry x="210" y="120" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="210" y="260" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="240" y="400" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="240" y="500" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="270" y="640" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="270" y="740" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="270" y="840" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="300" y="980" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="330" y="1120" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="360" y="1260" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="390" y="1400" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="390" y="1500" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="420" y="1640" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="450" y="1780" width="1020" height="200" as="geometry"/></mxCell><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"><mxGeometry x="480" y="2000" width="1020" height="200" as="geometry"/></mxCell><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"><mxGeometry x="510" y="2220" width="1020" height="200" as="geometry"/></mxCell><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"><mxGeometry x="540" y="2440" width="1020" height="200" as="geometry"/></mxCell><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"><mxGeometry x="570" y="2660" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="600" y="2800" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="600" y="2900" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="630" y="3040" width="280" height="40" as="geometry"/></mxCell><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"><mxGeometry x="660" y="3100" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="690" y="3240" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="720" y="3380" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="720" y="3480" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="750" y="3620" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="780" y="3760" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="810" y="3900" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="810" y="4000" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="840" y="4140" width="1020" height="200" as="geometry"/></mxCell><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"><mxGeometry x="870" y="4360" width="280" height="40" as="geometry"/></mxCell><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"><mxGeometry x="900" y="4420" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="930" y="4560" width="1020" height="200" as="geometry"/></mxCell><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"><mxGeometry x="960" y="4780" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="990" y="4920" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="1020" y="5060" width="200" height="120" as="geometry"/></mxCell></root></mxGraphModel>';
var doc = mxUtils.parseXml(xmlString);
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
}
finally
{
graph.model.endUpdate();
}
}
}
render() {
return <div className="graph-container" ref="divGraph" id="divGraph" />;
}
}
export default Graph;
我尝试了您在上面发布的xml解码代码，并将其应用于图形模型。对我来说，我可以从UI上呈现的形状中得到一个简单的结果。可能会检查你的css，如果容器有足够的宽度和高度，并且它不是hiidden。您好。谢谢你试用代码。我检查了graph容器div及其子对象，它们似乎具有可见的高度和宽度；里面什么都没有。我通过CreateReact应用程序创建了一个新的React应用程序，并使用上面的DisplayGraph组件来确保问题不是由于我的主项目中的任何其他模块造成的。不幸的是，该组件仍然无法呈现图形，即使它是一个干净的React应用程序。你能告诉我更多关于你运行代码的环境吗？您是否通过创建React应用程序创建了React应用程序？你在哪个浏览器上运行的？签出这个谢谢！我在代码笔中看到，mxGraph库是通过HTML中的标记导入的，而不是通过React组件中的import语句导入的。改变这一点似乎让我能够呈现图形，但我不完全确定为什么直接导入React组件时NPM模块似乎无法工作。
import React, { Component } from "react";
import PropTypes from "prop-types";
import ReactDOM from "react-dom";
class Graph extends React.Component{
constructor(props) {
super(props);
this.state = {};
this.containerId = "divGraph";
this.LoadGraph = this.LoadGraph.bind(this);
}
componentDidMount() {
var that= this;
const script = document.createElement("script");
// script.src = "https://unpkg.com/mxgraph@3.9.8/javascript/mxClient.js";
script.src = "https://unpkg.com/mxgraph@4.0.6/javascript/mxClient.js";
script.async = true;
document.body.appendChild(script);
setTimeout(() => {
if(that.refs && this.refs.divGraph){
console.log(20,mxClient);
that.LoadGraph();
};
},1000)
}
LoadGraph() {
var container = ReactDOM.findDOMNode(this.refs.divGraph);
var zoomPanel = ReactDOM.findDOMNode(this.refs.divZoom);
var xmlString='<mxGraphModel dx="492" dy="658" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169"> <root> <mxCell id="0" /> <mxCell id="1" parent="0" /> <mxCell id="2" value="" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1"> <mxGeometry x="20" y="20" width="120" height="60" as="geometry" /> </mxCell> <mxCell id="3" value="" style="whiteSpace=wrap;html=1;aspect=fixed;"parent="1" vertex="1"> <mxGeometry x="20" y="100" width="80" height="80" as="geometry" /> </mxCell> <mxCell id="4" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;" parent="1" vertex="1"> <mxGeometry x="20" y="200" width="80" height="80" as="geometry" /> </mxCell> <mxCell id="5" value="" style="triangle;whiteSpace=wrap;html=1;" parent="1" vertex="1"> <mxGeometry x="20" y="300" width="60" height="80"as="geometry" /> </mxCell> <mxCell id="6" value="" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;" parent="1" vertex="1"> <mxGeometry x="20" y="400" width="120" height="80" as="geometry" /> </mxCell> </root></mxGraphModel>';
if (!mxClient.isBrowserSupported()) {
mxUtils.error("Browser is not supported!", 200, false);
} else {
this.container = document.getElementById(this.containerId);
this.model = new mxGraphModel();
var graph = new mxGraph(this.container, this.model);
const parent = graph.getDefaultParent();
this.model.beginUpdate();
try
{
let xmlString = '<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"><root><mxCell id="0"/><mxCell id="1" parent="0"/><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"><mxGeometry x="210" y="120" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="210" y="260" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="240" y="400" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="240" y="500" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="270" y="640" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="270" y="740" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="270" y="840" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="300" y="980" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="330" y="1120" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="360" y="1260" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="390" y="1400" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="390" y="1500" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="420" y="1640" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="450" y="1780" width="1020" height="200" as="geometry"/></mxCell><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"><mxGeometry x="480" y="2000" width="1020" height="200" as="geometry"/></mxCell><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"><mxGeometry x="510" y="2220" width="1020" height="200" as="geometry"/></mxCell><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"><mxGeometry x="540" y="2440" width="1020" height="200" as="geometry"/></mxCell><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"><mxGeometry x="570" y="2660" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="600" y="2800" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="600" y="2900" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="630" y="3040" width="280" height="40" as="geometry"/></mxCell><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"><mxGeometry x="660" y="3100" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="690" y="3240" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="720" y="3380" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="720" y="3480" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="750" y="3620" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="780" y="3760" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="810" y="3900" width="80" height="80" as="geometry"/></mxCell><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"><mxGeometry x="810" y="4000" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="840" y="4140" width="1020" height="200" as="geometry"/></mxCell><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"><mxGeometry x="870" y="4360" width="280" height="40" as="geometry"/></mxCell><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"><mxGeometry x="900" y="4420" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="930" y="4560" width="1020" height="200" as="geometry"/></mxCell><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"><mxGeometry x="960" y="4780" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="990" y="4920" width="200" height="120" as="geometry"/></mxCell><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"><mxGeometry x="1020" y="5060" width="200" height="120" as="geometry"/></mxCell></root></mxGraphModel>';
var doc = mxUtils.parseXml(xmlString);
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
}
finally
{
graph.model.endUpdate();
}
}
}
render() {
return <div className="graph-container" ref="divGraph" id="divGraph" />;
}
}
export default Graph;