drawio界面自定义配置

最新推荐文章于 2024-05-22 16:31:11 发布
最新推荐文章于 2024-05-22 16:31:11 发布
阅读量5.8k 收藏 17
点赞数 3
文章标签： json 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44112083/article/details/126968577
版权

1. 适用的 drawio 版本

单机版 drawio，带有配置选项的单机版本
在这里插入图片描述

2. 配置使用方法

点击配置，将json代码复制到弹窗中，点击应用即可。
如果代码有错误，将无法应用
在这里插入图片描述

3. 相关json代码

官方json配置参考：https://www.diagrams.net/doc/faq/configure-diagram-editor

1. 色板配置、字体配置

有快捷的配置网站：https://drawio-config.herokuapp.com/
开发者的github网址：https://github.com/leifmarcus/drawio-config
在这里插入图片描述

  1. Preset Colors色板预设颜色
    在这里插入图片描述
  2. Color Schemes预设样式
    包含填充颜色、边框颜色、阴影颜色、字体颜色 在这里插入图片描述
  3. Custom Fonts字体预设
    即：drawio字体选择列表显示的可选择的字体
    字体设置可以看：这里
    在这里插入图片描述
  4. Default Edge Style边缘的默认风格
    在这里插入图片描述
  5. Default Vertex Style连接线的默认风格
    配置同上
    在这里插入图片描述

2. 额外的配置

这些配置找不到快捷配置的网站，只能自己手动配置
最外层的大括号也是 drawio 最外层的大括号
记得添加这些项之前，先在原来项的最后加一个逗号

1. 自动保存 autosaveDelay

Defines the delay (in ms) between the last change and the autosave of the file
文件改动后 XXX 毫秒自动保存

{
	"autosaveDelay": 300
}

2. 界面ui

以下均为 CSS 代码，在 AAA 部分添加要修改的 css 代码，然后将整体复制到 配置当中
注意要将所有要配置的代码全塞到AAA一个值里，不能有换行符

{"css": " AAA "}

在这里插入图片描述

  1. 菜单栏和标题栏颜色
    geMenubarContainer标题栏颜色设置为 c0c0c0
    .geMenubarContainer { background-color: #c0c0c0 !important; }
    geMenubar菜单栏颜色设置为 c0c0c0
    .geMenubar { background-color: #c0c0c0 !important; }
  2. 界面全局字体设置
    .geEditor td和.geTempDlgSearchBox .geTempDlgFooter .geTempDlgBack .geTemplatesLbl .geTemplateCatLink .geTempDlgNewDiagramCatLbl .geTempDlgShowAllBtn .geTempDlgNewDiagramCatItemLbl .geTempDlgDiagramsListTitle .geTempDlgRadioBtn .geTempDlgDiagramTileLbl
    字体显示太多了，需要设置很多地方
     .geEditor,td { font-family: -apple-system, BlinkMacSystemFont, AAA,"Segoe UI Variable", "Segoe UI", system-ui, ui-sans-serif, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;}
    和
    .geTempDlgSearchBox .geTempDlgFooter .geTempDlgBack .geTemplatesLbl .geTemplateCatLink .geTempDlgNewDiagramCatLbl .geTempDlgShowAllBtn .geTempDlgNewDiagramCatItemLbl .geTempDlgDiagramsListTitle .geTempDlgRadioBtn .geTempDlgDiagramTileLbl { font-family: AAA, Helvetica !important;}
    字体选择的逻辑：根据 font-family 值的顺序，先查找排在前面的字体，若此字体不存在 或 不能显示这个符号，则使用下一个字体
    • 在 AAA 处添加要自定义的字体
    • 如果字体名称有空格，要用双引号"括起来
    • 如果有多个字体，字体之间用英文逗号,分隔
    • 其他字体是系统默认字体，建议不要删，因为涉及到其他文字、emoji表情等其他文字的显示，否则要保证你加入的文字能兼顾所有文字符号的显示
    • 加入配置界面的json代码中时，要注意上面的 css 代码中的英文双引号要转义。即将"转换为\"

3. 其他设置

这些设置直接写json格式的键值对，加入设置的json代码中即可。

thumbWidth/thumbHeight
左侧面板的宽/高。(6.4.5 及更高版本可以设置)
Defines the width and height for the entries in the left panel (6.5.4 and later).

sidebarWidth
右侧面板的初始宽度。
Specifies the initial width of the sidebar.

sidebarTitles
右侧面板是否显示标题。
Specifies if titles in the sidebar should be visible. Default is false.

sidebarTitleSize
右侧面板的标题的字体大小。默认值是 8 。
Specifies the font size in pt for titles in the sidebar. Default is 8.

zoomWheel
鼠标滚轮是否用于放大缩小操作。默认值是 false (否)。(15.0.6 及更高版本可以设置)
Specifies if the mouse wheel is used for zoom without any modifiers (true/false, 15.0.6 and later). Default is false.

zoomFactor
鼠标滚轮滚动一次的缩放比例。默认是 1.2。
(14.7.0 及更高版本可以设置) Defines the zoom factor for mouse wheel and trackpad zoom. Default is 1.2 (14.7.0 and later).

darkColor
定义暗黑模式下的背景颜色。默认值是 #2A2A2A。
Defines the background color for dark mode. Default is #2A2A2A.

lightColor
定义亮色模式下的背景颜色。默认值是 #F0F0F0。
Defines the foreground color for dark mode. Default is #F0F0F0.

pageFormat
定义默认的页面尺寸。(15.0.0 及更高版本可以设置)
Defines the default page format, eg. “pageFormat”: {“width”: 1169, “height”: 1654} for DIN A3, with inches * 10 for width and height (15.0.0 and later).

gridSteps
定义网格子网格的数量。
Defines the number of minor grid steps (14.3.2 and later).

simpleLabels
简单的输出label。默认为 ture (启用)。默认启用以label中禁用换行和复杂的格式输出来防止 SVG 输出的安全问题。(14.5.9 及更高版本可以设置)。true - Disables word wrap and complex formatting for labels by default to avoid foreignObjects in the SVG output (14.5.9 and later).

emptyDiagramXml/emptyLibraryXml
(略，看不懂) (6.5.4 及更高版本可以设置)
Defines the XML for blank diagrams and libraries (6.5.4 and later).

defaultEdgeLength
新连接线的默认长度 (7.2.4 及更高版本可以设置)
Defines the default length for new connectors (7.2.4 and later).

defaultPageVisible
默认初始页面是否可见。默认为 true
Defines whether the page is initially visible (true/false).

defaultGridEnabled
网格是否可见。默认为 true
Defines whether the grid is initially enabled (true/false).

autosaveDelay
自动保存时间设置 (单位 ms) (10.4.7 及更高版本可以设置)
Defines the delay (in ms) between the last change and the autosave of the file (10.4.7 and later).

version
自定义版本显示 (7.2.8 及更高版本可以设置)
The current version of the configuration (any string, e.g. “1.0”). If this is different from the last used version, then the current settings on the client-side (.drawio-config) will be reset. The default is null. Change this to force the stored settings in the client to be reset and apply the current configuration (7.2.8 and later).

override
服务器覆盖客户端的设置选项。
Ignores the current settings on the client-side if this is set to true (9.2.5 and later).

globalVars
全局变量。可在整个系统全局使用的全局变量。
Defines global variables for system-wide placeholders using a JSON structure with key, value pairs. Keep the number of global variables small.

compressXml
压缩drawio的xml文件。xml文件压缩后，需要用。
Specifies if the XML output should be compressed. The default is true (false for Confluence Cloud).

includeDiagram:
导出数据时默认包含的图形。
Specifies the default for including diagram data in export dialogs (15.0.4 and later).

dataGovernance
数据监管，用于 US 或 EU 地区。如果lockdown = true此选项被忽略。
Set the server endpoint region. The default is to use your closest region, (either EU or US). If lockdown is set to true, dataGovernance is ignored.

lockdown
锁定。断开 drawio 服务器客户端的连接。默认为 false
Disable data transmission, apart from directly between your browser and your selected data storage location. Default is false.

maxImageBytes
图片大小的限值。单位 Byte。默认为 1000000 Byte (976.6KB)
Defines the maximum size for images in bytes. Default is 1000000.

maxImageSize
图片最大尺寸。默认最大尺寸为 520 x 520。
Defines the maximum width or height of the image, where the lowest value is used. Default is 520.

oneDriveInlinePicker
onDrive 云盘是否使用 drawio 内建的文件选择器。
Specifies if the inline picker for OneDrive should be used. Default is true if inlinePicker URL parameter isn’t used.

settingsName
设定用户配置的名称，一般用于嵌入模式。本地存储的用户配置文件名为.{配置名称}-config
Specifies a name for storing user settings, usually in embed mode, in the form .{name}-config, in local storage.

shareCursorPosition
多人协同时，分享各个用户的鼠标位置。默认为 true
Specifies the default value for shared cursors in real-time collaboration. Default is true.

showRemoteCursors
多人协同时，展现远程其他用户的鼠标位置。默认值为 true
Specifies the default value for showing remote cursors in real-time collaboration. Default is true.

Lilixxs
关注
  • 3
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
drawio
03-30
drawio
django-admin-customizer:Django admin 自定义界面
06-22
django-admin-customizer Django admin 自定义界面特征同一模型的多个管理实例定制： 列表显示列表过滤器raw_id_fields 搜索字段去做动作配置器基础管理类支持要求Django 1.3、1.4、1.5、1.6。 不支持 Django 1.2 或...
【draw】draw.io怎么设置默认字体大小
一点一点变好
09-23 3255
默认情况下draw里面的字体大小是12pt，我们可以将字体改成我们想要的大小，例如18pt。然后点击样式，设置为默认样式，下一次当我们使用文字大小时就是18pt了，
程序员必备画图工具Draw.io使用教程
最新发布
陈Sir的博客
05-22 1899
Draw.io 是一款免费且开源的在线绘图工具，支持多平台使用，并与多种云存储服务无缝集成。它提供丰富的模板和图形库，强大的编辑功能，实时协作，以及多种导出和导入选项。无论是流程图、网络图、还是组织结构图，Draw.io 都能帮助你快速高效地创建专业图表。其易用性和功能性使其成为个人和团队绘图的不二选择。
使用draw.io自定义图形
sunzy993的专栏
06-03 3071
最近在学习数字逻辑，需要画一些逻辑电路图，为知笔记内置了draw.io，所以直接记笔记兼画图都可以。编辑完成后点击保存，可以拖动到左侧你的自定义库中，或者选中并点击自定义库上的加号保存，只能本地保存。菜单栏 -> 文件 -> 新增图库，给你的自定义图库取一个名字，然后点击保存，在左侧工具栏就会看到。但是具体使用起来，内置的逻辑门库还是不太够用，需要自己定义一些。下次使用直接点击或拖动到画板上即可。
Draw.io添加字体
L893801691的博客
08-30 1119
"楷体-简","宋体-简","娃娃体-简","微软雅黑-简","华文行楷-简"
【drawio笔记】创建自定义形状
热门推荐
02-24 1万+
使用文本编辑器在diagrams.net中创建自定义形状 你可以在diagrams.net中创建自己的自定义模板（形状），通过XML格式描述模板中组件的几何形状、连接点和样式。 提示：你可以将自定义模板从绘图画布拖动到Scratchpad中，或者如果你想保存或共享你的自定义形状，也可以拖动到自定义库中。单击File > New Library来创建一个新的自定义库。 总体结构 diagrams.net的基本模板使用XML。点击Arrange > Insert > Shape打开Edit S
Drawio添加自定义图形工具箱
okhelp的专栏
03-24 3302
添加自定义工具箱需要4个步骤 1、定义工具箱实体 2、定义工具箱library 3、添加工具箱实体到系统实体中 4、添加工具箱Palette 下面以添加“呼叫中心”为例，呼叫中心中，添加系统类，IVR类等待，先以“系统”为例。 首先我们看一下官网原始形成和工具箱 原始版本中，是没有呼叫中心相关的相关内容。 js/diagramly/Sidebar.js 1、定义并添加工具箱Library 2、定义并添加工具箱实体 3、设置工具箱Library中的形状 .
Python库 | rawio-0.0.2.tar.gz
04-14
资源分类：Python库 所属语言：Python 资源全名：rawio-0.0.2.tar.gz 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
vimrc:我自己的自定义vim配置
05-14
VIM配置 （由Cameron Swords提供，Andy Keep和Jaime Guerrero的精选贡献） 这个vimrc是一组用于开发代码的vim绑定。 它始于我使用和。 最近，我转向了Pathogen并对其进行了扩展。 安装 首先，您需要安装。 mkdir -...
RHEL5的raw配置
11-03
RHEL5的raw配置手册，经过了本人验证，确保无误。
draw.io画图工具和一些模板。
06-13
draw.io是免费开源好用的画图工具，文件包含安装包和一些模板。
自定义相机
10-25
这个功能涉及到的技术点包括自定义相机界面、图像处理以及结果页动画。 首先，我们要了解自定义相机的基本构成。在Android系统中，开发者通常会使用`Camera`或`Camera2` API来实现相机功能。`Camera` API是早期的...
drawio模板以及示例
鹏哥说编程
10-19 4001
你可以使用drawio，并使用drawio提供的扩展模板库和大量的形状库，针对很多不同的工业领域创建不同类型的图表。 针对如下的内容中的所有的图，均可以下载源文件并导入到drawio中再次编辑（供学习者使用）。也可以导入到[drawon](https://www.drawon.cn?useSource=csdn)中进行再次编辑。
draw.io软件添加常用字体
qq_41915623的博客
10-05 1万+
draw.io软件是我非常喜欢的模型绘制软件，但里面不自带中文常用字体，如：宋体。需要先查看windows自带的字体有哪些。
drawio（Windows）中使用中文字体（如黑体）
天边一坨浮云
03-04 8339
drawio默认字体里全是英文字体 我们需要使用中文字体，比如黑体 步骤 在Windows中打开运行，输入“fonts”，去到Windows系统字体的目录 找到自己想要使用的字体，比如黑体 鼠标右键点击选中的字体，然后点击属性 比如我选中的是“黑体 常规” 可以看到“黑体 常规”实际叫“simhei” 回到drawio，选中希望改变字体的文字，然后点击字体的下拉框，并选中自定义 在系统字体（System Fonts）下的字体名称（Font Name）里输入刚才查到的名字，比..
draw.io
勇敢的人先享受世界
12-19 841
draw.io是一款在线的图形绘制工具，可用于创建流程图、组织结构图、UML图、网络图、平面图等各种类型的图表。它提供了丰富的图形库和工具，使用户能够通过简单的拖拽和连接操作来创建复杂的图形。draw.io支持与Google Drive，Dropbox等云存储平台的集成，方便用户在不同设备上进行图形绘制和编辑。此外，它还支持将绘制好的图形导出为PNG，JPG，PDF等格式，方便与他人分享和打印。draw.io界面简洁直观，易于上手，是一个功能强大且易用的图形绘制工具。
安装drawio + 添加中文字体
狂放不羁霸的博客
10-02 2793
初尝drawio
draw.io 加载宋体| mac 电脑visio画图软件替代
qq_46049695的博客
07-18 1263
结束后重启软件即可加载出已经添加的字体。
w5500 macraw的寄存器配置
07-22
在W5500芯片中，使用MACRAW模式进行原始以太网数据帧的收发需要进行一些寄存器的配置。以下是一些常见的寄存器配置示例： 1. 设置模式选择寄存器（MR）： - 将MR寄存器的bit[3:2]设置为0b10，选择MACRAW模式。 2. 配置源MAC地址和目标MAC地址： - 将SHAR（源硬件地址寄存器）和SAR（目标硬件地址寄存器）分别设置为6字节的MAC地址值。 3. 配置目标IP地址和端口号： - 将SIPR（源IP地址寄存器）设置为4字节的目标IP地址值。 - 将DPORT（目标端口寄存器）设置为2字节的目标端口号。 4. 配置发送和接收缓冲区的大小： - 将SBUFBASE（发送缓冲区基址寄存器）和RBUFBASE（接收缓冲区基址寄存器）设置为相应缓冲区的起始地址。 - 将SSIZE（发送缓冲区大小寄存器）和RSIZE（接收缓冲区大小寄存器）设置为相应缓冲区的大小。 5. 启用MACRAW模式： - 将MR寄存器的bit[7]设置为1，启用MACRAW模式。 请注意，以上仅是一些基本的寄存器配置示例，具体的配置可能因你的应用场景和需求而有所不同。建议参考W5500芯片的官方文档和寄存器描述，以获得更详细和准确的配置指南。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值