基于Draw-io做的二次开发

draw-io是我在做一个物联网平台项目用到的技术，因为当时需求要求组态相关，所以就去网上查了一通，最后发现还是draw-io是个比较全面。并且还是开源的

下载源码后研究源代码阶段

首先源码下载下来以后正常去先搞到本地部署起来，先运行起来看看里面的功能怎么样，这里关于初期源码的下载及部署 推荐一篇博客给大家 DrawIO二次开发(一) 这篇文章也是小编在刚开始要开发时，一头雾水的在网上找帖子后来发现的比较好的帖子啦！

关于项目集成结构

这块主要是我们前端做的 因为前端用的Vue 所以最终的集成也就交给前端了 看样子也就是将drawio相关的前端代码放到webapp中的内容加到原有的前端项目中去了。

关于后端代码，这里不建议用自带的后端代码

关于后端代码，源码看起来太冗杂

开始下手是修改

主要改动还是动webapp下的js文件的 然后后端配合相应的接口 这里列举几个我们改动的地方对应的效果变化 \webapp\js\diagramly\DrawioFile.js 1903行

var _autosave = false;//true 自动保存，false 不自动保存 if (_autosave)//this.isAutosave()) edit by conan

\webapp\js\diagramly\LocalFile.js 129行 加个ajax请求可将绘图信息保存到数据库 具体代码就不展示了 大致位置就在这 可以自行研究

将几个菜单按钮都隐藏掉：js/mxgragh/Menus.js 更改代码：

/** * Sets the default font size. * 这里将默认菜单项改为空集合 */ //Menus.prototype.defaultMenuItems = ['file', 'edit', 'view', 'arrange', 'extras', 'help']; Menus.prototype.defaultMenuItems = [];

总体更改了 菜单栏的显示状态 以及注掉了一些功能、便签笺修改为可保存到本地数据库的个人图库、将绘图信息保存到本地数据库、可给元素绑定属性（实现保存数据到数据库）、预览功能的实现等