本教程基于mxgraph 3.9.12。 mxgraph感觉国内用的人很少。 用百度搜索也只是简单的操作，稍微有点偏颇的操作和问题都没有关系。 在官方example和官方API上痛苦了几个月后，我终于恍然大悟。 所以我写了这个教程。 一个是方便的后代，另一个是自己的记录。 (mxgraph和vue的集成请参考我的另一个博客。 Vue-cli3生成的Vue项目加载Mxgraph )成功集成Mxgraph，建议编写HelloWorld，有感性认识后再阅读
Demo先生，欢迎来到蒂桑
官网的搜索有点让人头疼，所以自己写了搜索。 可以根据说明和标题关键字搜索搜索结果。
要先改善基本概念，必须先利用其器。 开始之前必须介绍mxGraph的基本概念。 以下列举了我经常使用的3358www.Sina.com/、类和必须先掌握的http://www.Sina.com (js中没有强型语言中的类的概念，但库
类mxGraph这个类我们应该是最常用的。 每次我们开始mxGraph项目时，都要运行一次newmxGraph([DOM容器] )以创建新的mxGraph对象。 我们接下来所有的操作都在拥有这个对象的基础上进行。 通常，您可以使用此对象设置一些全局回调，也可以设置一些全局值。
见http://jgraph.github.io/MX graph/docs/js-API/files/view/MX graph-js.html # MX graph
mxCell这个班级也是我们经常遇到的班级，但是刚开始写mxGraph的时候，可能会经常被问这个班级在哪里，为什么没见过。 实际上，每次我们调用mxGraph.insertVertex )方法时创建形状时的返回值都是通过该类实例化的。 我们通过这个对象得到其他对象。 例如，下面介绍的mxCellState和mxGeometry。 当然，这个类除了作为跳板使用外，还有设定图形的可见性，能否连接等实用的方法。
见http://jgraph.github.io/MX graph/docs/js-API/files/model/MX cell-js.html # MX cell
mxCellState这个班是个大宝物呢。 可以在MXGraph.view.getstate([cell] )上获得。 从那里可以获得相对于graph容器的位置信息、相对于浏览器的位置信息以及其他有用的信息。 我不知道会有多少个晚上，但那是我少给我的。
见3http://jgraph.github.io/MX graph/docs/js-API/files/view/mxcellstate-js.html # mxcellstate
mxGeometry这个班也是一大宝物。 可以直接从mxCell.geometry获得长度、高度、x、y等图形的基本信息。 另外，通过直接修改这些值可以改变图形，可以节省很多。 效果和生发剂相当呢。
见http://jgraph.github.io/MX graph/docs/js-API/files/model/MX geometry-js.html # MX geometry
当然还有很多其他有用的班级，这我就不一一列举了。 (再列举这个b就进不去了。 )。 以上这些都是非常基础的类，如果你感兴趣的话，可以看看官方的API详细了解。 (官方API的相关查询似乎如此，但在关键时刻可以拯救生命) )。
如果是做过回调和C#可视化开发，或者学习了C#可视化的学生，一定知道C#可视化是事件驱动的。 就是说，如果在后台定义了按钮的点击事件监听，在界面中只要点击这个按钮，就会触发这个监听事件，我们写在这个监听事件上的代码也会被执行。 QT的信号时隙的概念也是一样的。 为什么这么说呢，因为在mxGraph中也有这样的监听事件。 大多数事件都有默认实现，可以对其进行重写。 另外，可能还有完全必须自己实现的部分(还没有遇到)。
例如，现在要截获点击事件，需要以下代码。
graph.addlistener (MX event.click，function(sender，evt ) ) vare=evt.getproperty ) ' event ' )； //mouseeventvarcell=evt.getproperty (' cell )； //cellmaybenullif(cell！=null (//dosomethingusefulwithcellandconsumetheeventevt.consume )； }； )； 上述是公式的例子。 首先，使用graph.addListener )方法创建监听。 而且，这不是创建听力的唯一方法。 必须将两个参数传递给此方法：监听的事件类型和回调函数。
拦截的类型可以在API官网的mxEvent上查找
到，传入的回调函数会提供给我们两个值，一个是sender，一个是evt，sender我也用的不多… 但我们需要的信息基本都在evt中，比如事件的类型，事件的触发的图形对象等，我们可以在回调中实现自己的代码逻辑，完成开发需求。 其他其他还想说一些基本下文中可能会经常提到的简写和概念：
cell这说的cell就是上文一直提到的图形，就是通过mxGraph.insertVertex()创建返回的对象，下文中就不再说图形而是直接说cell了。
stylestyle的概念在mxGraph中尤其的重要，比如我想改变cell中文字的字体的大小，你在mxCell对象中找半天也是找不到有关于字体的接口和属性的，而这些东西全是在style中的，看到这你可能就会问TM到底什么是style（突然想到了freeStyle），style就是一个图形的样式，包括背景颜色，线条颜色，文字对其方式等等，基本你能想到的关于一个图形的表述里面都有。那么重点来了，竟然style这么好，那么到底要怎么设置又有哪些style呢？
设置style先说一下我所知的设置style的三种方式：
通过参数的方式在生成CELL时传入一个style。 graph.insertVertex(parent, null, 'hello', 30, 20, 20, 20, "shape=triangle;direction=west;");shape=triangle;direction=west;就是我们的style字符串了，这句中说的是生成的cell是三角形，并三角形面朝西。
生成CELL时传入一个名称字符串，然后再设置这个名称所代表的样式。 graph.insertVertex(parent, null, 'in1', 30, 20, 20, 20, 'testStyle');let style ={};style[MxConstants.STYLE_FILLCOLOR] = 'transparent';style[MxConstants.STYLE_STROKECOLOR] = 'transparent';style[MxConstants.STYLE_SHAPE] = MxConstants.SHAPE_LABEL;style[MxConstants.STYLE_ALIGN] = MxConstants.ALIGN_CENTER;style[MxConstants.STYLE_VERTICAL_ALIGN] = MxConstants.ALIGN_CENTER;style[MxConstants.STYLE_IMAGE_ALIGN] = MxConstants.ALIGN_CENTER;style[MxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = MxConstants.ALIGN_CENTER;style[MxConstants.STYLE_IMAGE] = require('@/assets/mxgraph/images/symbols/fork.png');style[MxConstants.STYLE_IMAGE_WIDTH] = '48';style[MxConstants.STYLE_IMAGE_HEIGHT] = '48';graph.getStylesheet().putCellStyle('testStyle', style);这一段中我们首先将shape=triangle;direction=west;替换为了testStyle，testStyle代表了一套style，接下来声明了一个对象做为style的载体，MxConstants.xxx 代表了xxx类型的style，在这分别设置了填充色，线条颜色，形状，文字对齐方式，文字垂直方向对齐方式，插入图片的对齐方式，插入图片在垂直方向的对齐方式，插入图片的地址，插入图片的宽度，插入图片的高度，最后把建立这个style载体对象和testStyle之间的关系。
通过mxCell.setStyle()方法设置style。 function str2StyleObject(){ xxxx}function setStyleObject(styleObject, [{styleName: styleValue},...]){ xxxx}function styleObject2Str(){ xxxx}let tmpStyleObject = str2StyleObject(cell.getStyle());setStyleObject(tmpStyleObject, [{'shape': 'rect'}]);cell.setStyle(styleObject2Str(tmpStyleObject));通过这种方式设置style，需要注意的是这个设置是全覆盖的，什么意思呢，举个例子，一个cell本来设置了shape和fontSize两种style，那这个cell的style就是shape=xxx;fontSize=xxx;，然后通过setStyle方法只设置了shape，那这个cell的style就是shape=xxx;，我们就丢失了关于fontSize的信息。所以想通过这种方式修改style的话，我们一般会先通过cell.getStyle()获取到现有的style字符串，然后将字符串转为对象，接着修改对象的值，然后再将对象转为符合要求的字符串，最后通过cell.setStyle()方式设置cell的style。
这三种方式其中前两种都是在创建cell时就决定了cell的style，第三种就是可以在回调中动态的更改cell的style。在书写方式上第一种和第三种是通过字符串的方式设置，第二种则是通过对象属性值的方式设置。
属性第一种第二种第三种书写时期生成CELL时生成CELL时CELL生成后的任意时间书写方式字符串形式对象属性值字符串形式style的类型再说有哪些style，我们可以在API官网关于mxConstants的部分找到有哪些style，举个例子，我们可以在其中找到如下的描述：
STYLE_FONTSIZESTYLE_FONTSIZE: 'fontSize'Defines the key for the fontSize style (in px). The type of the value is int. Value is “fontSize”.这一段说的是有一个Style叫STYLE_FONTSIZE，这个名称就是我们在上面讲到的第二种修改style的方式中会使用到的，STYLE_FONTSIZE: 'fontSize' 这里面提到的 fontSize 就是我们在的第一种和第三种中会用到的，最后就是关于这个style的一些描述。
随后还会更新一些常用操作。
关于mxStencil的请看这。