纯手打，如有错误请指出，谢谢

mxgraph用途

mxgraph主要是用于绘制图形界面，类似流程图，UML图等常用图形处理库，可以浏览通过www.draw.io/，mxgraph库提供的官方的网站，确定是否能满足你的大致上的需求，再决定需要继续学习。
由于mxgraph没有中文文档，而网上大部分的blog都是教怎么安装mxgraph居多，有一些blog写的很好，对入门很有帮助，我在这将常用的功能总结一下，以便后面温故和初学者入门
本文章主要篇幅是mxgraph的使用，在项目里常用的需求功能该如何实现的思路。我折腾了1个月的官方例子和api文档，并没有完全吃透，只能是一边学习一边更新。

正题开始

一.从我们熟悉的HelloWorld开始

首先我们要先了解mxgraph有什么构成的，常用的这几个类需要了解，mxGraph,mxCell,mxEdge
- mxGraph是初始化mxgraph项目时，需要使用new mxGraph(容器id)来创建一个mxgraph对象，之后的操作都是基于这个mxgraph对象展开的。可以理解为let div = document.getElementById('app')
- mxCell是指一个节点类，该节点在mxgraph所有信息都包含在这个mxCell类里，后面的需求都是在基于mxCell修改
- mxEdge和mxCell类似，mxEdge表示节点与节点之间的连线，其属性和mxCell基本一致

在了解了mxGraph,mxCell,mxEdge类之后，我们就可以实现一个helloWorld的代码了,首先先看官方提供的helloWorld.html(这里删减了一些不必要的)

   <html>
   <head>
           /*这一块是导入mxGraph，这个网上教程很多，可以自行查找*/
   	<script type="text/javascript">
   		mxBasePath = '../src';
   	</script>
   	<script type="text/javascript" src="../src/js/mxClient.js"></script>
   	
   	
   	<script type="text/javascript">
   		function main(container)
   		{
   		    // 判断浏览器是否支持mxgrpah
   			if (!mxClient.isBrowserSupported())
   			{
   				mxUtils.error('Browser is not supported!', 200, false);
   			}
   			else
   			{
   			    // 这里就使用了mxGraph类，实例化一个mxgraph对象
   				var graph = new mxGraph(container);
   				// 获取当前mxgraph对象的根节点
   				var parent = graph.getDefaultParent();
   				// 这是更新数据模型的方法，在这里可以删去，不需要，后面会使用很频繁
   				graph.getModel().beginUpdate();
   				try
   				{
   				    // insertVertex，insertEdge参数的意思可以通过api文档查阅
   					var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
   					// 在这里的v1 v2就是mxCell，2个节点信息都在这里
   					var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
   				    // 在这里的e1就是mxEdge，2个节点中间的连线信息都在这
   					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>

关于Mxgraph的使用(Js版)

mxgraph用途

正题开始

一.从我们熟悉的HelloWorld开始