1.mxgraph邂逅(×) 折磨（√）
楼主暑假实习，项目组需要开发一款标注系统，mentor要求使用nuxt+mxgraph来实现标注系统，所以就开始学习mxgraph，然而百度一下，我就蒙蔽了，这个框架国内确实很少用，并且查询了许多人的摆弄可，感觉都是一些基本的教学，自己摸索了很久，大概花了一个多月把项目搞定了，现在将自己的遇到的问题以及解放方法分享给大家。
2.mxgraphs介绍
官方文档：
mxGraph是一系列以不同技术开发的工具库，旨在提供显示交互式的 图表和图形的应用程序的功能。 请注意，对于图形，我们是指数学图形， 不一定单单指图表 （虽然有些图形是图表）。参见后面的章节：“什么是图形？”的细节描述。
作为一个开发库，mxGraph没有专门提供了一个现成的可以使用的应用程序， 尽管其中的许多例子都接近可以直接使用。 mxGraph提供mxGraph样式的 所有通常所需的绘画功能，互动及关联的图表显示环境。 mxGraph自带有许多例子， 它们有助于解释每种技术是如何被放在一起组成一个基本的应用程序，并展示这个 工具库的各项功能。
每本用户手册是针对某种特定的技术，都具有通用的部分，如简介和布局。开发人员会发现，对于 在不同的技术实现，在产品范围内的每个工具库都共享相同的架构和API。对于特定的技术领域， 事件处理和渲染的实现略有不同，但是从一个技术平台整体移植到另一个平台，mxGraph提供了 尽可能多的通用的接口。
开发人员在集成此工具库到他们自己的应用程序前，需要应该阅读的使用技术的先决条件。 参见下面的“先决条件”一节。鉴于mxGraph是您的应用程序的组成部分，你必须了解应用程序 使用的技术，以及如何使用该技术进行编程。
mxGraph定义：mxGraph是一个js绘图组件，适用在网页设计/编辑流程图、图表、网络图和普通图形的web应用程序。
mxGraph支持：mxGraph支持拖动和克隆细胞，重新调整和改造，连接和断开，拖动和下降，从外部来源，编辑细胞中的标签和更多。
3.mxgraph主要应用
- 3.1 图形的可视化
可视化是创建一个有用的图形可视化展现的过程。可视化功能的范围是 mxGraphs的主要力量之一。
mxGraph支持范围广泛的功能，使图元显示仅限于 开发人员的技术和平台可用的功能。顶点可以是图形、图像、矢量绘图、动画以及几乎所有可以在浏览器中 操作的图形。您也可以在顶点和边使用HTML标记。
- 3.2 图形的交互
交互是指在一个使用mxGraph的应用程序中，通过WEB应用程序的GUI改变图形模式。
mxGraph支持拖动、复制图元、重新调整大小、重新构造，连接和断开，从外部源的拖放和删除，编辑图元 标签中的位置等等。 mxGraph的主要好处之一是通过编程来实现互动的灵活性。
许多复杂的图形化Web应用程序依赖于与服务器往返的通讯来显示图形，不仅是基本的显示，还包括 交互事件。虽然这就是通常所谓的AJAX功能，这种服务器的依赖对交互事件是不合适的。 视觉反馈时间超过0.2秒在应用程序中一般严重影响了实用性。mxGraph把所有的交互事件都放置 在客户端，提供了真实感觉的应用程序，而不像一个哑巴的远程终端。它还提供了脱机使用的可能性。
- 3.3 图像的布局
图形图元可以布置在一个简单的应用程序的任何地方，包括在彼此顶部。
某些应用程序需要按照一般或特殊的顺序结构来显示出示信息。 这可能涉及到确保图元不重叠和至少彼此间留有一定的距离，或出现在相对于其他图元的一个相对 位置，图元通常是通过边来连接。这个活动，被称为布局的应用，可以 通过多种方式，来协助用户设置自己的图形。 对于非编辑图形，布局应用是对图元进行布局算法的过程。 对于交互式的图形，即那些可以通过用户界面进行编辑，布局应用可能只 允许用户对特定的图元进行特定位置的修改，对每个修改重新布局，或 编辑完成后，重新布局。
- 3.4 图形的分析
图形分析涉及到确定有关的图形结构的某些细节算法的应用，例如， 确定所有路径或两个图元之间的最短路径。
有些更复杂的图形分析算法，往往被应用于 指定域的任务。有些技术，如聚合、分解、优化等趋向某些针对性的科学领域的，目前包含在核心的mxGraph包中。
4.本套教程介绍
- 教学基本mxgraph使用
- mxgraph常用属性介绍
- 在vue框架中导入mxgraph
- 第一个mxgraph小应用
- 给mxgraph添加样式及背景图
- 添加mxgraph操作按钮
- mxgraph图形布局算法
- 将mxgraph图的xml进行回显
- 保存mxgraph图片
- 教学mxgraph进阶使用
- 根据对应数据生成图形（具备基本布局方式）
- 选中对应节点/边修改数据并且动态更新
- 实现单页面数据动态更新
- 按照要求数据格式导出mxgraph图中数据
- 阶段案例（1） 使用mxgraph实现流程图
- 阶段案例（2） 使用mxgraph实现简易句子分析器
5.参考文献（感谢前人种树）
感谢博客园博主： shawWey 地址： shawWey的博客园地址
感谢csdn博主： 懒牛不爱梳毛 地址：懒牛不爱梳毛的csdn地址