Drawio UI界面个性化配置

发布时间:2026/7/29 18:16:11
Drawio UI界面个性化配置 Drawio是免费、强大的图形绘制工具为最大化扩大绘图区个性化配置默认样式以提高绘图效率研究了UI界面、默认样式的配置方法。配置文件使用方法单击菜单的【其它】|【配置】将配置文件json格式内容复制粘贴到文本框单击应用即可部分配置需重启软件生效。示例代码整体用{}包围不同的配置之间用,分割{ css: .geEditor.geAtlas.geMenubarContainer { height: 30px;} .geToolbarContainer:not(.geVerticalToolbar) { height: 30px;} //css代码需放到双引号内不能换行, defaultEdgeStyle: { edgeStyle: orthogonalEdgeStyle, strokeWidth: 2, fontSize: 13, fontFamily: HarmonyOS Sans SC, fontColor: #1f1f1f, strokeColor: #1f1f1f, rounded: 1, fontStyle: 1, jumpStyle:arc, jumpSize: 8, endArrow: blockThin, endFill: 1 } }UI界面自定义方法方案通过css配置获取css对象的方法【帮助】|【打开开发者工具】单击③箭头④点击需要自定义的的对象⑤找到对应的css将相应的css复制修改即可。加入到json文件中的代码以下代码定义了drawio菜单栏和工具栏的高度以扩大绘图区面积css: .geEditor.geAtlas.geMenubarContainer { height: 30px;} .geToolbarContainer:not(.geVerticalToolbar) { height: 30px;} //css代码需放到双引号内不能换行注意css代码需放到双引号内不能换行。对象默认样式自定义方法获取对象样式的方法选中一个对象按自己所需要的默认样式设置好按CtrlE快捷键弹出的窗口中即可看到对应的属性转化为json格式即可。以下是我习惯的连接线格式设置了默认跳线、箭头、线宽等属性。defaultEdgeStyle: { edgeStyle: orthogonalEdgeStyle, strokeWidth: 2, fontSize: 13, fontFamily: HarmonyOS Sans SC, rounded: 1, fontStyle: 1, jumpStyle:arc, jumpSize: 8, endArrow: blockThin, endFill: 1 }