Docker部署Draw.io并进行个性化设置

幽叶草 • 2023年3月12日下午12:04 • 服务部署 • 阅读 2704

之前公司使用的是Confluence文档，偶然间发现上面带了一个drawio，还挺好用的，了解之后发现更加强大，便想着自己搭一个，可以定制样式，自己用也更方便，花了半天多时间探索了一下，写下了这篇文章。

写在前面

现在搭建的这个形态的drawio还是用来新建文件，编辑的话会跳转到官方站点去，用起来不是特别方便，日后有时间我再继续研究，各位如果有兴趣的话也可以一起学习一下如何搭建，日后有问题一起探讨。

镜像拉取

drawio镜像尽量选择官方的，相比于二次开发的存在更少的漏洞，也可以体验到更加先进的特性。我这里直接使用的官方镜像，使用如下命令拉取即可。

docker pull jgraph/drawio

创建测试容器，获取默认配置

创建容器

拉取镜像后，为了后面更好的进行个性化配置，需要获取drawio默认的配置，这里先创建一个测试容器，不需要端口映射和挂载目录，用完即删除，使用如下命令即可。

docker run -dit --name=drawio-test jgraph/drawio

拷贝默认配置

创建完容器后，使用docker cp将默认的两个配置文件拷贝到宿主机中，便于后续修改。拷贝完成后删除改测试容器。

docker cp drawio-test:/usr/local/tomcat/webapps/draw/js/PreConfig.js ./
docker cp drawio-test:/usr/local/tomcat/webapps/draw/js/PostConfig.js ./
docker rm -f drawio-test

创建正式容器

创建容器

接下来就是创建正式容器了，使用如下命令即可。

docker run -dit --name=drawio -p 8080:8080 \
-v /root/docker/drawio/config/PostConfig.js:/usr/local/tomcat/webapps/draw/js/PostConfig.js \
-v /root/docker/drawio/config/PreConfig.js:/usr/local/tomcat/webapps/draw/js/PreConfig.js \
--restart=always  jgraph/drawio

以下是对各个参数的解释:

-d 参数表示容器在后台以守护进程方式运行。
-i 参数表示容器以交互模式运行，保证能够与容器内部进行交互。
-t 参数表示为容器分配一个伪终端。 --name 参数指定了容器的名称为drawio。
-p 参数指定将 Docker 宿主机的 8080 端口映射到容器内部的 8080 端口，方便外部访问。
-v 参数指定将宿主机上的文件挂载到容器内部的对应的位置。这样做的目的是修改 Draw.io 的一些配置，例如logo，修改 UI 界面等。
--restart=always 参数表示当容器异常退出时，始终自动重启容器。 jgraph/drawio是要启动容器的镜像名称，这里是使用刚刚拉取的镜像

浏览器验证是否生效

创建完成后，可以打开浏览器，访问对应的IP的8080端口。如果创建成功了，可以看到下图的加载界面。

等待几秒后，会跳转到如图所示的界面，需要我们选择绘图保存到哪，我们可以直接选择下面的“稍后再做决定”。

之后就可以看到drawio的全貌了，熟悉的界面，熟悉的配方。

个性化配置

安装好之后，直接使用默认的设置，不做任何个性化的话，不一定符合自己的需求，也不一定符合自己的审美。如果觉得默认的够用就好了，那这篇文章就可以不需要继续往下看了。

随便拖动几个图形过来，会看到线条很细，且连线横平竖直，样式不够美观，而且如果输入文字，文字还是12px的，字体偏小。因此打算自己修改一下他的默认配置，这样可以一劳永逸，不需要每次画完图之后进行一个批量修改。

阅读并参考官方文档

我之前用过ProcessOn，相对来说他的线条会更粗，相对来说也更平滑，字体大小更加合理，打算定制化的主要也是这几个地方。落实到drawio上其实就是顶点（Vertex，指矩形、三角形等图形）和边（Edge,指连接各个图形的线条）属性的设置。

了解需求后，便开始着手研究官方文档，寻找个性化配置的方式。然后根据文档来改造自己喜欢的样式或布局。主要找到了以下两个定制化的说明文档：

修改默认绘图样式：https://www.diagrams.net/doc/faq/configure-diagram-editor
修改默认url参数：https://www.diagrams.net/doc/faq/supported-url-parameters

在第一个文档中发现了defaultVertexStyle和defaultEdgeStyle这两个属性，文档是这样解释的。

defaultVertexStyle or defaultEdgeStyle: Defines the initial default styles for vertices and edges (connectors). Note that the styles defined here are copied to the styles of new cells, for each cell. This means that these values override everything else that is inherited from other styles or themes (which may be supported at a later time). Therefore, it is recommended to use a minimal set of values for the default styles. To find the key/value pairs to be used, set the style in the application and find the key and value via Edit Style (Ctrl+E) (6.5.2 and later).
For example, to assign a default fontFamily of Courier New to all edges and vertices (and override all other default styles), use {"defaultVertexStyle": {"fontFamily": "Courier New"}, "defaultEdgeStyle": {"fontFamily": "Courier New"}}.

意思是这两个属性可以达到我们的需求，并且为了尽可能减少对主题样式的影响，应该尽可能小范围的进行自定义样式。意味着我们要先确认原始默认样式，然后先对原始默认样式进行修改，满足要求后，然后找出其中改变的属性即可，这样就找到了最小范围。

确认原始默认样式

由于drawio他有自己的默认设置，为了知道原始默认样式，我们可以选中某一个元素后，直接按快捷键Ctrl+E进行查看，也可以如下图所示，点击右侧的【编辑】→【编辑样式】，也可以看到元素的样式。

其中，顶点的默认样式是：

rounded=0;whiteSpace=wrap;html=1;

边的默认样式是：

edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;

根据喜好修改默认样式

确认完原始样式后，就可以放心的去对图中的元素进行修改了。

我这里主要调整顶点和边两者的线条粗细从1pt调整为了1.5pt，两者的文本大小从12pt修改为14pt。再把边的风格从锐利调整为了圆角。

调整完后，再次查看顶点和边的样式，其中顶点的样式为：

rounded=0;whiteSpace=wrap;html=1;strokeWidth=1.5;fontSize=14;

边的样式为：

edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;strokeWidth=1.5;fontSize=14;

根据上述的变化，就可以编写出defaultVertexStyle和defaultEdgeStyle的值了。

{
    "defaultVertexStyle":{
        "fontSize":"14",
        "strokeWidth":"1.5"
    },
    "defaultEdgeStyle":{
        "rounded":"1",
        "fontSize":"14",
        "strokeWidth":"1.5"
    }
}

测试修改效果

在直接将个性化配置持久化之前，我们可以进行一个测试，将刚刚那一串个性化配置Json复制一下，然后在菜单栏找到【其他】→【配置】

将刚刚复制的Json粘贴到输入框中，然后点击应用，重新加载页面。

重新加载页面后，重新拖动两个矩形，并创建一个连接线，发现刚刚的设置已经生效了。

持久化个性化配置

由于我们刚刚在创建drawio容器的时候就已经做了PreConfig.js和PostConfig.js这两个文件的路径映射，因此我们可以直接修改宿主机上的文件，然后重启drawio容器就可以生效了。

vi PreConfig.js

文件原来的内容如下所示：

(function() {
  try {
            var s = document.createElement('meta');
            s.setAttribute('content', 'default-src \'self\'; script-src \'self\' https://storage.googleapis.com https://apis.google.com https://docs.google.com https://code.jquery.com \'unsafe-inline\'; connect-src \'self\' https://*.dropboxapi.com https://api.trello.com https://api.github.com https://raw.githubusercontent.com https://*.googleapis.com https://*.googleusercontent.com https://graph.microsoft.com https://*.1drv.com https://*.sharepoint.com https://gitlab.com https://*.google.com https://fonts.gstatic.com https://fonts.googleapis.com; img-src * data:; media-src * data:; font-src * about:; style-src \'self\' \'unsafe-inline\' https://fonts.googleapis.com; frame-src \'self\' https://*.google.com;');
            s.setAttribute('http-equiv', 'Content-Security-Policy');
            var t = document.getElementsByTagName('meta')[0];
      t.parentNode.insertBefore(s, t);
  } catch (e) {} // ignore
})();
window.DRAWIO_BASE_URL = 'http://localhost:8080';
window.DRAWIO_VIEWER_URL = '';
window.DRAWIO_LIGHTBOX_URL = '';
window.DRAW_MATH_URL = 'math/es5';
window.DRAWIO_CONFIG = null;
urlParams['sync'] = 'manual'; //Disable Real-Time
urlParams['db'] = '0'; //dropbox
urlParams['gh'] = '0'; //github
urlParams['tr'] = '0'; //trello
urlParams['gapi'] = '0'; //Google Drive
urlParams['od'] = '0'; //OneDrive
urlParams['gl'] = '0'; //Gitlab

我们需要将刚刚那一串Json压缩一下，变成一行，修改第14行window.DRAWIO_CONFIG的值即可，注意不要删除掉了最后那一个分号。

window.DRAWIO_CONFIG = {"defaultVertexStyle":{"fontSize":"14","strokeWidth":"1.5"},"defaultEdgeStyle":{"rounded":"1","fontSize":"14","strokeWidth":"1.5"}};

修改成功后，使用docker restart命令重启容器即可。

docker restart drawio

其他个性化配置

由于个人需要，我就只修改了样式，如果还有其他的需求，可以参考官方的这两个说明文档：

修改默认绘图样式：https://www.diagrams.net/doc/faq/configure-diagram-editor
修改默认url参数：https://www.diagrams.net/doc/faq/supported-url-parameters

默认样式大家可以不断尝试，先在菜单栏的【其他】→【配置】中修改，再慢慢优化，最后敲定再持久化。

除了页面样式，还有很多url参数可以定制，

比如drawio默认的语言并不一定是中文，如果想定死中文的话，可以在PreConfig.js中添加一下下面这行：

urlParams['lang'] = 'zh'

又比如想增加url参数offline=1，则可以在PreConfig.js中添加一下下面这行：

urlParams['offline'] = 1

他主要是影响创建新文件的时候是否可以从远程获取模板，修改前创建新文件是这样的界面：

修改后就成了这样：

如果想更好的测试，可以直接修改url，看看效果，这里举个例子

假设我们默认的drawio地址是https://app.diagrams.net

如果我们想测试offline=1的效果，可以直接访问https://app.diagrams.net?offline=1，然后看看效果怎么样。确认达到了要求之后，就可以修改PreConfig.js内的内容，进行持久化即可。

参考资料

官方Demo站点：https://app.diagrams.net/
官方文档地址：https://www.diagrams.net/doc/
官方GitHub地址：https://github.com/jgraph/drawio
DockerHub地址：https://hub.docker.com/r/jgraph/drawio

作者：幽叶草。如若转载，需要先经过作者同意，并附上原文链接 https://blog.uusite.com/cloud/deploy/218.html

Docker Draw.io

幽叶草

0 15 打赏

微信扫一扫

安装WindowsServer2022后需要做的优化操作

上一篇 2023年3月10日下午12:59

Centos7安装Docker并部署常用服务

下一篇 2023年3月12日下午5:14

发表回复

评论列表（15条）

Docker部署在线绘图Drawio 2024年1月14日下午1:14

[…] 本文参考：幽夜草博客 […]

回复
一般路过的路人 2023年8月25日下午4:59

请教博主如果我想把drawio的存储路径映射出来吗？如果要的话要怎么做呢？以及如果我想在outline上把drawio自托管，路径是不是IP+8080就可以了？感谢！

回复
- 幽叶草 2023年8月29日下午11:49
  
  @一般路过的路人：如果你想暴露在公网，不太建议你将存储路径映射出来做云存储，不太安全。
  自托管地址取决于你的docker绑定的端口地址哈。
  后面由于种种原因，感觉用的不多，我还是把drawio下了，感觉适合内网搭建，不适合暴露出来。
  
  回复
- 一般路过的路人 2023年8月30日下午2:18
  
  @幽叶草：感谢回复。我现在服务器服务都是通过内网穿透（zerotier）进去访问的，相当于在访问内网，所以应该问题不算很大。
  我试了几次，感觉drawio是不是没办法把画好的图片存在服务器上？save的时候只有电脑本地存储或者browser缓存。如果博主知道如何将图片存在运行docker的服务器上，麻烦指教谢谢~
  关于博主前文提到的“编辑的话会跳转到官方站点去”这个只要修改Pre配置文件的三个url参数即可。如：window.DRAWIO_BASE_URL = ‘http://IP:port’;
  但我遇到了新的问题：如果这个IP写的是内网地址（zerotier分配的IP），登录正常，但web端分享链接会出现无法解析所以又变回成官链的情况，不知道有没有人遇到类似的情况。补充一下，我感觉应该是内网穿透的时候路由出了问题：如果配置文件IP写的是公网IP同时限制某个IP A来访问，我通过IP A是能正常解析分享链接的。
  
  回复
- 幽叶草 2023年8月31日下午1:47
  
  @一般路过的路人：我看了一下官方的draw.io，应该是不支持直接存储在服务器上的。你也可以考虑配置在云盘上，可以存Google Drive或者One Drive。
  关于分享链接变成官链的问题，我现在暂时无法验证。等我后续内网重新部署好之后我再研究一下，最近内网重装了
  
  回复
- 一般路过的路人 2023年9月17日下午1:37
  
  @幽叶草：感谢回复，后来不知道怎么就可以了，可能和浏览器缓存有关，修改三个url参数的方式是可以实现替换链接的。我没有考虑用云盘也是因为我也是相当于内网访问，端口对外的安全组没有开，云盘无法通信~
  现在找到两个存储在服务器上的方案，可惜都比较久了。我目前也没能成功实现。
  https://github.com/othorizon/drawio-webdav
  https://github.com/mathcoder23/drawio-minio-oss
  其中链接2我没有尝试，因为我搭建drawio主要是为了给outline wiki用，这个项目好像加了一层登录验证，我猜测outlinewiki可能会没办法嵌入了。
- 一般路过的路人 2023年10月1日下午9:28
  
  @幽叶草：博主你好~最近看到一个实现方案https://github.com/timsengit/my-drawio
  
  先根据https://www.cnblogs.com/wlyj/p/16261756.html改了config.js、/public/edit.js两个配置文件；依旧把drawio的PostConfig.js、PreConfig.js映射出来。启动后先进入minio参考https://github.com/mathcoder23/drawio-minio-oss创建bucket(项目中的bucket名为test)。最后看后台已经有正常返回了。但是web显示localhost无响应，我猜是我nginx配得有问题。
  
  博主如果打算在内网部署的话可以参考这个~如果方便出个教程就好啦，感谢
- 幽叶草 2023年10月9日下午2:22
  
  @一般路过的路人：嗯嗯，感谢你的探索，最近一直在休养身体，没有怎么关注自己的博客。
  最近新出的v0.72.0版本的Outline已经支持本地存储了，也给出了相关的教程。
  如果你有兴趣，可以直接用本地存储做映射，参照这个文档：https://docs.getoutline.com/s/hosting/doc/file-storage-N4M0T6Ypu7
- 幽叶草 2023年10月9日下午2:30
  
  @一般路过的路人：draw.io 的本地存储我这边后续测试一下看看，如果成功了可以出一篇文档。
  不过得稍微等一段时间，这个月还在准备考软考高级
- 一般路过的路人 2023年10月12日下午8:36
  
  @幽叶草：我也看到他们支持了，已经升级上去等有空试试哈哈。祝软考顺利，身体健康
- 幽叶草 2023年10月12日下午9:41
  
  @一般路过的路人：嗯呢，感谢你的光顾和祝福~
- 一般路过的路人 2023年11月3日上午10:52
  
  @幽叶草：博主你好，我看了一下链接的文档，如果我换成本地存储的话，之前存储的内容是不是都没了，需要重新导入？以及如果是本地存储的话文件架构是怎么样的，我看文档里面好像没提。
  
  回复
- 幽叶草 2023年11月3日下午5:04
  
  @一般路过的路人：你说的是Outline吧？
  这种是属于大变更了，建议重新搭建一套，然后进行数据导出再导入稳妥一点。
  
  回复
司徒 2023年4月16日下午10:46

请教博主如何给自建 drawio docker 服务加密?

回复
- 幽叶草 2023年4月27日下午11:01
  
  @司徒：这个倒没有深入研究过，不过这种工具类的服务感觉没必要做加密，毕竟他只是一个绘图工具，基本上都是离线流程的，官方也有地址，可以直接访问的。不过如果你发现有什么加密措施，也可以和我联系哦。互相交流！
  
  回复

Docker部署Draw.io并进行个性化设置

写在前面

镜像拉取

创建测试容器，获取默认配置

创建容器

拷贝默认配置

创建正式容器

创建容器

浏览器验证是否生效

个性化配置

阅读并参考官方文档

确认原始默认样式

根据喜好修改默认样式

测试修改效果

持久化个性化配置

其他个性化配置

参考资料

相关推荐

发表回复

评论列表（15条）