Pure hand, if there is any mistake, please point out, thank you

Mxgraph purposes

  1. Mxgraph is mainly used to draw graphical interfaces, such as flow charts, UML diagrams and other common graphics processing libraries. You can browse the official website provided by the MxGraph library at www.draw.io/ to determine whether it meets your general needs, and then decide if you need to continue learning.
  2. Because mxGraph does not have Chinese documentation, and most blogs on the Internet are to teach how to install MxGraph, there are some blogs written very good, very helpful to get started, I will be used here to summarize the functions, so that the later temperature and beginners to get started
  3. This article is mainly about how to use MxGraph and how to realize the common requirement functions in the project. I’ve been messing around with official examples and API documentation for a month, not fully understanding it, but learning and updating as I go along.

To start

Start with the familiar HelloWorld

  1. Mxgraph,mxCell,mxEdge,mxEdge, mxGraph

    • mxGraphIs needed when initializing the MxGraph projectNew mxGraph(Container ID)To create an MxGraph object from which the rest of the operations will unfold. Can be understood aslet div = document.getElementById('app')
    • mxCellMxgraph is a node class in which all information is contained in the mxCell class. The following requirements are modified based on the mxCell
    • mxEdgeandmxCellA similar,mxEdgeRepresents the connections between nodes, their properties andmxCellAlmost the same

  2. MxGraph,mxCell,mxEdge, mxGraph, mxEdge,mxEdge, mxGraph, mxEdge,mxEdge, mxGraph, mxEdge,mxEdge, mxGraph, mxEdge,mxEdge,mxEdge

    */ <script type="text/javascript"> mxBasePath = '.. /src'; </script> <script type="text/javascript" src=".. / SRC /js/ mxclient.js "></script> <script type="text/javascript"> function main(container) { mxClient.isBrowserSupported()) { mxUtils.error('Browser is not supported! ', 200, false); Var graph = new mxGraph(container); // Get the root node of the current mxgraph object var parent = graph.getDefaultParent(); Graph.getmodel ().beginUpdate(); graph.getModel(); Var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30); Var v2 = graph.insertVertex(parent, null, 'World! ', 200, 150, 80, 30); Var e1 = graph.insertEdge(parent, null, '', v1, v2); } finally { graph.getModel().endUpdate(); }}}; </script> </head> <body onload="main(document.getElementById('graphContainer'))"> <div id="graphContainer" style="position:relative; overflow:hidden; width:321px; height:241px; background:url('editors/images/grid.gif'); cursor:default;" > </div> </body> </html>Copy the code