让你的官方 draw.io 桌面端焕然一新!
本工具是一个针对 Windows 官方 draw.io 桌面客户端的优化补丁,能为其注入无边框(Frameless)窗口、启动闪屏优化以及主题颜色深度自适应,让你拥有更加纯净、美观、极速的绘图体验。
📌 痛点背景:为什么需要美化补丁?
作为一名重度流程图和架构图绘制用户,draw.io(Diagrams.net)桌面客户端一直是我不可或缺的生产力工具。它开源、安全,无需强制云端账户,本地离线绘图极其顺手。
然而在 Windows 11 平台下,官方桌面客户端的视觉与交互体验一直存在几个挥之不去的槽点:
- 突兀的传统窗口标题栏:在现代 Windows 11 的圆角悬浮与 Mica 审美下,官方顶部白色的传统系统标题栏非常宽大且割裂,浪费了宝贵的垂直绘图区域;
- 刺眼的冷启动白屏:即使用户在软件内开启了深色模式,每次双击启动软件时,窗口总会先闪过一片刺眼生硬的纯白过渡页;
- 系统主题联动脱节:系统切换为深色或浅色主题后,客户端窗口的控制栏与背景无法自动平滑自适应,缺乏系统级的一体感;
- 冗余的开机检测更新:每次启动都在后台尝试联网检查更新,在弱网或离线环境下甚至会导致软件启动假死数秒。
既然官方暂未跟进现代化 UI,作为开发者,最好的办法就是亲自动手改造它 —— Drawio Patcher 由此应运而生。
[!IMPORTANT] > 版本适配说明
本补丁基于官方 draw.io v30.2.6 Windows 桌面版开发并进行完整测试。
- 其他版本若直接覆盖可能存在兼容性问题;
- 若使用不同版本,推荐使用文中的方式一运行脚本尝试自动解析与打包,或在使用前务必做好原始文件备份。
📸 实现效果与截图展示
| 1. 极简加载闪屏 (Splash Screen) | 2. 现代化无边框窗口 (Frameless Window) |
|---|---|
![]() | ![]() |
| 平滑过渡的定制加载状态,告别生硬白屏 | 移除传统窗口标题栏,工作区与工具栏浑然一体 |
3. 系统主题深度自适应 (Theme Adaptive)
完美适配 Windows 系统的深浅色模式。当系统在日间与夜间切换主题时,客户端窗口的控制按钮、标题区域及背景将实现自动配色调整,避免出现刺眼的色差,保持视觉一体化。
🌟 核心特性剖析
- 🖥️ 无边框现代化窗口 (Frameless):精简 Electron 窗口层级,去除多余的系统边框,使应用绘图区与菜单栏浑然一体,垂直视野大幅提升;
- 🌗 主题配色自适应 (Theme Auto-Match):智能识别系统的主题色,深色/浅色模式平滑自适应,色彩完美融合;
- ⚡ 闪电般的启动速度 (Instant Launch):去除启动时的冗余后台更新检测,提升离线情况下的响应速度,实现秒级开启;
- 🎨 定制优雅加载页 (Splash Screen):优雅的橙色 draw.io Logo 加载动画,带来更平滑的视觉过渡;
- 🔒 纯净无干扰 (Disable Auto-Updates):禁用自动更新探针,防止精心注入的美化补丁在软件后台静默升级后被覆盖丢失。
🚀 两种使用方法(自由选择)
方式一:使用 Node.js 脚本一键注入(推荐 🛠️)
此方式适合本地有 Node.js 环境的用户,脚本会自动检测路径、备份原始文件并自动完成补丁注入。
- 克隆或下载本项目至本地:
bash
git clone https://github.com/yudong2ao/drawio-patcher.git - 在 Windows 搜索栏中输入
cmd或PowerShell,右键选择 “以管理员身份运行”; - 进入本项目的根目录,执行注入命令:
bash
node drawio-patcher.js - 脚本将自动识别你的 draw.io 安装目录、备份原版
app.asar为app.asar.bak,并一键完成注入。
方式二:直接替换 app.asar 文件(免环境极速版 📦)
此方式最简单,适合本地未安装 Node.js 的用户。
- 在项目的 Releases 页面 下载已经打包好的补丁包文件;
- 找到你的 draw.io 桌面版安装路径(默认通常位于
C:\Program Files\draw.io\resources\); - 将该目录下的原版
app.asar重命名为app.asar.bak(作为安全备份); - 将解压出来的补丁版
app.asar复制进该目录中; - 重新启动 draw.io 即可立即感受全新的视觉效果!
🔄 如何还原回官方原生状态
如果你后续想要恢复原样,只需两步:
- 前往安装目录
resources\; - 删除修改后的
app.asar,并将原本备份的app.asar.bak重新改名回app.asar即可,零任何系统残留。
获取源码与项目地址
完整工程源码与预打包补丁已在 GitHub 开源:
👉 GitHub 仓库:yudong2ao/drawio-patcher
git clone https://github.com/yudong2ao/drawio-patcher.git
