drawio二次开发

最新推荐文章于 2025-05-30 20:18:32 发布

wgxhpr

最新推荐文章于 2025-05-30 20:18:32 发布

阅读量5.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： drawio

本文链接：https://blog.csdn.net/qq_36202485/article/details/103406256

本文介绍了如何进行drawio的二次开发，包括在Ubuntu下搭建项目，在index.html中启用开发者模式，解决文件找不到的问题，以及如何在开发者模式下修改源码和调试。通过全局搜索关键字、断点调试和Elements断点调试等方法，帮助开发者深入理解并定制drawio功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一下二次开发drawio的过程

首先要说一下 drawio 这个东西是真的很强大，由于公司业务的发展，需要用到或者界面编辑工具，话不多说直接刚。

首先先去将项目搭建起来，我搭建过程是在Ubuntu下搭建的，搭建过程很简单，打包编译成war包后运行在tomcat下面就可以了。这里就不详细讲搭建过程了，具体自己搜索一下网上搭建教程很多，操作很简单。下面我主要讲一下怎么进入到开发者模式去开发调试。

在index.html 文件中 urlParams['dev'] == '1' 这里改成一下的代码，这里我也是看到网上的大佬改的具体如下

if (urlParams['dev'] == '1')
		{
			var mxDevUrl = document.location.origin+document.location.pathname; 
			if (document.location.protocol == 'file:')
			{
			mxDevUrl = '../../mxgraph2';

			// Forces includes for dev environment in node.js
			mxForceIncludes = true;
			}

			var geBasePath = mxDevUrl + 'js/mxgraph/';
			//mx盲猜就是 mxgraph
			var mxBasePath = mxDevUrl + 'js/mxgraph/';

			// Used to request draw.io sources in dev mode
			var drawDevUrl = mxDevUrl;

			mxscript(drawDevUrl + 'js/diagramly/Init.js');
			mxscript(geBasePath + 'Init.js');
			mxscript(geBasePath + 'jquery-3.4.1.js');
			mxscript(mxDevUrl + 'js/mxgraph/mxClie