DrawIO二次开发(一)

最近想基于DrawIO进行二次开发，目前还在探究阶段

即便你不想二次开发，对于经常使用processON的盆友们，自己部署这么一套DrawIO也是极好的，因为没有文件数的限制呀。

万事开头难，想要二次开发，需要先在本地将代码跑起来，剩下的就是看代码撸代码了。我这里将展示intellij idea的配置方式。

一、导入项目到编译器

将DrawIO的代码clone到你本地，gitHub上的地址为https://github.com/jgraph/drawio，正常情况下速度比较慢，可以考虑其他的代码仓库，将下载完的代码导入到你心爱的IDE中。

project structure配置如下

dependencies配置中，注意要把项目中的lib包导入进来，因为不是maven项目，所以需要手动导入，否则编译会飘红

如果我没记错的话，上述步骤做完，代码就可以进行本地编译了，玩不转ant命令的可以参考下图操作，然后在右侧选择要执行的命令执行即可。这里可以先执行下javac编译下后台代码

二、将项目部署到tomcat

项目跑起来的方法多种多样，我这里选择IDEA上集成好了的tomcat，简单方便。tomcat运行之前需要有几个配置如下图：

上图中tomcat的配置基本完成，但是没有关联drawIO项目，这个配置是在Deployment这个tab页中进行操作，如下图

最后运行tomcat，运行成功的话就可以通过浏览器访问服务了，如下图

三、改代码并调试

二次开发总要改下代码的吧，你找了个js修改了下样式或者行为，刷新页面发现并没有生效。这时并不一定代表你改的文件不对。

DrawIO的调试模式需要在请求地址后添加参数dev=1，如：http://localhost:8080/drawio_war_exploded/?dev=1，这样在页面加载的时候是加载的未压缩的各个js等资源文件，而不是压缩过后的。

原因如下图

添加dev=1之后不出意外你的页面会无法正常展示，打开浏览器的控制台你会发现飘红一片（如下图）。原因是因为加载的静态资源文件不是你本地的，是通过drawIO相关的一个网络地址加载的，这里我们需要将其改为加载我们本地的静态资源，不然改了文件怎么能即使生效？

一顿操作猛如虎，涉及文件如下图

index.html修改如下，我这里的修改比较 粗暴，只是为了能够临时调试即可，后期这部分代码是要还原的，当然你也可以更优雅的处理一下。

有个比较核心的文件mxClient.js是放在etc目录下的，这个目录是不会被tomcat加载到的，所以我们把这个文件copy到drawio/src/main/webapp/js/目录下，使tomcat能够加载到它

完成上述步骤，不出意外你的本地服务应该可以以调试方式展示了，然鹅你可能会有新的问题如下图

页面展示正常，但是菜单点击无反应，打开控制台查看是否有报错如果没有js报错，只是发现common.css这个样式文件没获取到，那就是这个文件没有加载到导致的，那我们来解决下这个问题

简单分析如下：
针对src目录搜索common.css如下图，发现绿色部分正常，引用路径都正确，但是刚刚我们引入的mxClient这个文件在引用css/common.css文件的时候我们发现对应的路径下没有这个文件，而且mxClient这个文件不适合直接修改。这里最简单的办法就是把drawio/src/main/webapp/mxgraph/css/common.css这个文件copy一份到/drawio/src/main/webapp/css/目录下，然后刷新浏览器进行校验，如果菜单显示正常了，那么恭喜你，如果还是显示有问题，那么请留言，咱一起讨论讨论。

至此，你可以欢快的撸代码了

四、官方文档中的几个功能推荐

正常情况下文件导出为xml或者drawio的时候，你会发现文件中除了几个基本的xml节点，大部分被一段压缩的字符所占据，个人初步猜测是为了性能和数据保护进行的措施，但是不方便我们学习和理解其中的关系结构，怎么办呢？

编辑绘图

https://support.draw.io/display/DO/Working+with+Metadata这个文档中有我们需要的答案

看到这个图的时候，你就一目了然了，你在画板上的所有操作，都会在这个xml中有所体现，而且你可以通过直接操作这个xml，来反向体现到画板上

取消压缩XML结构

有朋友会说，每次到这里来看太麻烦，能不能直接在导出的xml文件中直接进行查看呢？可以
反勾选掉下图中的已压缩选项，再导出文件，得到的就是未压缩的xml结构了

未压缩的导出文件