drawio是一款免费的开源绘图软件，主要用于创建各种类型的图表、流程图、组织结构图、UML图和网络拓扑图等。本篇文章主要详细记录了drawio的二开过程以及一些问题。

本文从使用角度入手，循序渐进的讲述 DrawIO 是什么，为什么要基于 DrawIO 进行二次开发以及 DrawIO 二次开发的核心技术细节并抽象出了一套通用二开架构，因此文章内容较长，不同阶段的读者

1. 拖拽的实现 首先，需要简单了解一下mxGraph是如何实现拖拽的。在 mxGraph 内部有一个 mxGraphHandler 类专门用于监听鼠标 keydown、mousemove、keyup 等事件，当用户选中某个图形并执行鼠标拖拽后，会触发 mxGraphHandl…

事务 是 mxGraph 内部实现的一套更新控制方法，在一次事务过程会持续收集所有变更请求，直到事务结束后一次性推送到渲染器 mxCellRenderer 执行图形UI更新，或者在出现异常时允执行回滚。技术上来说， 事务 并不是必要的，我们可以直接使用图形更新接口，结果会被即时…

1. 简介 mxgraph 内部使用一种树形数据结构记录图形文档的内容，在内容树上，每一个节点代表一个图形元素，元素信息会被存储在节点对象上；节点的父子关系表示父节点图形包含子节点图形，可以用于实现图形的分层、分组功能。例如，对于下面的图形： 内容树是图形文档的底层数据模型，有…

1. 目录说明 javascript: mxgraph 核心代码文件夹，其中 javascript/src 为框架源码；javascript/examples 为示例代码。 mxgraph 仓库主要包含几类类型的资源，最核心的是 javascript/src 目录下的图形引擎源…