当前位置：首页 > news >正文

Drawio编辑器二次开发

news 来源：原创 2025/6/1 12:09:48

‌ 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里找到这段代码

	// Changes paths for local development environmentif (urlParams['dev'] == '1'){// Used to request grapheditor/mxgraph sources in dev modevar mxDevUrl = '';// Used to request draw.io sources in dev modevar drawDevUrl = '';var geBasePath = 'js/grapheditor';var mxBasePath = 'mxgraph/src';if (document.location.protocol == 'file:'){// Forces includes for dev environment in node.jsmxForceIncludes = 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');// Electronif (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 文件

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如何实现
在这里插入图片描述

function main(container)
{// Checks if the browser is supportedif (!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 menumxEvent.disableContextMenu(container);// Creates the graph inside the given containervar graph = new mxGraph(container);// Enables rubberband selectionnew 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 stepgraph.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 displaygraph.getModel().endUpdate();}}
};