drawio配置详解 打造自己的在线画图工具

基于drawio的在线绘图工具

看到大量的微信公众号推荐这个工具，还说很多收费工具是基于这个开发的，不由得想研究一下
学习一个项目最好的方式，莫过于看项目官方介绍，drawio的官方文档,然后就是一顿百度、搜狗、有能力的还要谷歌，更换不同的关键词, 看前人踩的坑，有github的也可以看看issus

打造自己的drawio

个性化配置

drawio支持使用浏览器参数配置,详细的配置教程
URL hash参数说明
通过配置可以实现很多个性化的需求

不使用参数传递的方式，可以将如下配置写死到 src\main\webapp\js\PreConfig.js 文件中
如

urlParams['lang'] = 'zh'; 

官方配置相关资料

可能有用的配置信息

window.EXPORT_URL = 'REPLACE_WITH_YOUR_IMAGE_SERVER';
window.PLANT_URL = 'REPLACE_WITH_YOUR_PLANTUML_SERVER';
window.DRAWIO_BASE_URL = window.location.protocol + '//' + window.location.host; // Replace with path to base of deployment, e.g. https://www.example.com/folder
window.DRAWIO_VIEWER_URL = window.location.protocol + '//' + window.location.host + '/js/viewer.min.js'; // Replace your path to the viewer js, e.g. https://www.example.com/js/viewer.min.js
window.DRAWIO_LIGHTBOX_URL = window.location.protocol + '//' + window.location.host; // Replace with your lightbox URL, eg. https://www.example.com
urlParams['lang'] = 'zh';
urlParams['browser'] = 1;
urlParams['gapi'] = 0;
urlParams['db'] = 0;
urlParams['od'] = 0; 
urlParams['tr'] = 0;
urlParams['gh'] =0; 
urlParams['gl'] =0;
urlParams['mode'] = 'browser';

默认中文显示

希望打开页面根据浏览器语言自动切换到对应语言，比如中文浏览器默认切换到zh

lang参数可以控制默认语言,直接请求?lang=zh 表示使用简体中文进行展示

urlParams['lang'] = 'zh'; 

禁止远程保存

由于项目使用了很多国外的存储服务如Google，在国内打不开，因此将这些存储功能关闭，只保留本地存储和浏览器存储

是否显示保存配置的

browser=0/1: Disables local storage as a storage location (0) or shows the browser option in the storage dialog (1).
gapi=0: Disables the Google integration.
db=0: Disables the Dropbox integration.
od=0: Disables the OneDrive integration.
tr=0: Disables the Trello integration.
gh=0: Disables the Github integration.
gl=0: Disables the GitLab integration.
drive=0: Simulates app.diagrams.net regardless of the domain name (uses the old app ID).

参数 mode

mode=[google|onedrive|github|dropobox|device|browser]: Switches to the specified mode.

配置默认只显示本地和浏览器存储，并且选择浏览器存储

?lang=zh&browser=1&gapi=0&db=0&od=0&tr=0&gh=0&gl=0&storage=device&mode=browser

关闭splash 选择特定图

splash=0: Does not show the splash screen.

应该是表示 让用户选择创建新图还是打开图的选择框

libs=key1;key2;...;keyN: Specifies the current libraries. Possible keys are allied_telesis, android, archimate, archimate3, arrows2, atlassian, aws3, aws3d, aws4, azure, basic, bootstrap, bpmn, cabinets, cisco, cisco_safe, citrix, clipart, dfd, eip, electrical, er, floorplan, flowchart, gcp2, general, gmdl, ibm, images, infographic, ios, lean_mapping, mockups, mscae, network, office, pid, rack, signs, sitemap, sysml, uml, veeam and webicons.

各种图的缩写

因此，如下配置应该是只显示流程图

?lang=zh&browser=1&gapi=0&db=0&od=0&tr=0&gh=0&gl=0&device=1&mode=browser&libs=flowchart;general&splash=0

打开文件自带例子

使用create参数可以携带模板信息，直接可以建立一个包含例子的图

?mode=browser&title=Untitled%20Diagram.drawio&create=http%3A%2F%2F127.0.0.1%3A8081%2Ftemplates%2Fflowcharts%2Fdata_flow_1.xml&sync=manual#LUntitled%20Diagram.drawio

create=url/name: Creates a new file from a template URL. If the value is not a URL and is not empty, the script will try to use window.opener[url]. In embed mode, window.opener[name] will be used to get the initial XML. Note that this requires the same origin policy in the opener/parent for reading the variable.

create 参数值，貌似只能传递url地址，不能传递相对路径

自带的模板在 如下路径中

src\main\webapp\templates

在线服务

drawio 静态站

参考文档

drawio 官方文档

drawio 二次开发优秀项目

drawio 编码和解密工具

drawio 使用教程

drawio 画流程图