Drawio编辑器二次开发

‌ Drawio （现更名为 Diagrams.net ）‌是一款完全免费的在线图表绘制工具，由 JGraph公司开发。它支持创建多种类型的图表，包括流程图、组织结构图、UML图、网络拓扑图、思维导图等，适用于商务演示、软件设计等多种场景‌

官网：https://www.drawio.com/
本篇文章希望能给正在或者打算对drawio进行二开的同学提供些帮助！

drawio的底层是使用mxGraph库 https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxCellEditor-js.html

1、github clone 代码

仓库地址：https://github.com/jgraph/drawio

我们主要修改的是webapp文件夹，这里存放的是前端静态资源文件

2、跑起来

vscode上下载live server插件，访问index.html

跑起来之后是这个样子的

3、在开发环境进行二次开发

在index.html里找到这段代码

typescript 复制代码

	// Changes paths for local development environment
		if (urlParams['dev'] == '1')
		{
			// Used to request grapheditor/mxgraph sources in dev mode
			var mxDevUrl = '';
			
			// Used to request draw.io sources in dev mode
			var drawDevUrl = '';
			var geBasePath = 'js/grapheditor';
			var mxBasePath = 'mxgraph/src';
			
			if (document.location.protocol == 'file:')
			{
				// Forces includes for dev environment in node.js
				mxForceIncludes = true;
			}

			mxForceIncludes = false;

			mxscript(drawDevUrl + 'js/PreConfig.js');
			mxscript(drawDevUrl + 'js/diagramly/Init.js');
			mxscript(geBasePath + '/Init.js');
			mxscript(mxBasePath + '/mxClient.js');
			
			// Adds all JS code that depends on mxClient. This indirection via Devel.js is
			// required in some browsers to make sure mxClient.js (and the files that it
			// loads asynchronously) are available when the code loaded in Devel.js runs.
			mxscript(drawDevUrl + 'js/diagramly/Devel.js');
			
			// Electron
			if (mxIsElectron)
			{
				mxscript('js/diagramly/DesktopLibrary.js');
				mxscript('js/diagramly/ElectronApp.js');
			}
			
			mxscript(drawDevUrl + 'js/PostConfig.js');
		}

只要在路径后面拼上 ?dev=1 即可

但是控制台出现了一个报错，找不到js/diagramly/Init.js

这个可以在issues中找到作者给的解决方法
https://github.com/jgraph/drawio/discussions/5026

4、修改默认语言显示中文

找到 drawio\src\main\webapp\js\diagramly\Init.js 文件

typescript 复制代码

var lang = urlParams['lang'];
....
window.mxLanguageMap = window.mxLanguageMap ||
{
	'i18n': '',
	'id' : 'Bahasa Indonesia',
	'ms' : 'Bahasa Melayu',
	'bs' : 'Bosanski',
	'bg' : 'Bulgarian',
	'ca' : 'Català',
	'cs' : 'Čeština',
	'da' : 'Dansk',
	'de' : 'Deutsch',
	'et' : 'Eesti',
	'en' : 'English',
	'es' : 'Español',
	'eu' : 'Euskara',
	'fil' : 'Filipino',
	'fr' : 'Français',
	'gl' : 'Galego',
	'it' : 'Italiano',
	'hu' : 'Magyar',
	'lt' : 'Lietuvių',
	'lv' : 'Latviešu',
	'nl' : 'Nederlands',
	'no' : 'Norsk',
	'pl' : 'Polski',
	'pt-br' : 'Português (Brasil)',
	'pt' : 'Português (Portugal)',
	'ro' : 'Română',
	'fi' : 'Suomi',
	'sv' : 'Svenska',
	'vi' : 'Tiếng Việt',
	'tr' : 'Türkçe',
	'el' : 'Ελληνικά',
	'ru' : 'Русский',
	'sr' : 'Српски',
	'uk' : 'Українська',
	'he' : 'עברית',
	'ar' : 'العربية',
	'fa' : 'فارسی',
	'th' : 'ไทย',
	'ko' : '한국어',
	'ja' : '日本語',
	'zh' : '简体中文',
	'zh-tw' : '繁體中文'
};

在路径后面拼接上lang=zh 即可

5、打包

改完代码肯定是要打包部署的，不可能生产环境还用dev开发模式访问。

这里打包需要用到 apache-ant 工具

https://ant.apache.org/bindownload.cgi?login=from_csdn

具体怎么安装可以搜一下

cd到drawio\etc\build目录执行ant

打包成功

6、简单示例

我们看一个hello word如何实现

js 复制代码

function main(container)
{
	// Checks if the browser is supported
	if (!mxClient.isBrowserSupported())
	{
		// Displays an error message if the browser is not supported.
		mxUtils.error('Browser is not supported!', 200, false);
	}
	else
	{
		// Disables the built-in context menu
		mxEvent.disableContextMenu(container);
		
		// Creates the graph inside the given container
		var graph = new mxGraph(container);

		// Enables rubberband selection
		new mxRubberband(graph);
		
		// Gets the default parent for inserting new cells. This
		// is normally the first child of the root (ie. layer 0).
		var parent = graph.getDefaultParent();
						
		// Adds cells to the model in a single step
		graph.getModel().beginUpdate();
		try
		{
			var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
			var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
			var e1 = graph.insertEdge(parent, null, '', v1, v2);
		}
		finally
		{
			// Updates the display
			graph.getModel().endUpdate();
		}
	}
};