尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

drawio-desktop 上手指南:把浏览器版 draw.io 变成离线桌面应用

drawio-desktop 上手指南:把浏览器版 draw.io 变成离线桌面应用 drawio-desktop 上手指南把浏览器版 draw.io 变成离线桌面应用【免费下载链接】drawio-desktopOfficial electron build of draw.io项目地址: https://gitcode.com/GitHub_Trending/dr/drawio-desktopdrawio-desktop 是 draw.io 官方出品的 Electron 桌面版把浏览器里的 draw.io 核心编辑器完整封装进独立应用全程离线运行图表数据只落在你本机不会上传到任何服务器。这篇文章讲清它适合什么人、能力边界在哪以及从源码跑起来、打包成安装文件的最短路径。它解决什么问题你大概遇到过这种场景内网机器上没有外网网页版 draw.io 打不开或者在数据中心的办公电脑上IT 规定不让访问外部站点而你手里正缺一张系统架构图。drawio-desktop 的定位很直接——它不是一个新编辑器而是给官方 draw.io 编辑器穿上一件桌面外壳。编辑器本身的功能形状库、连线、UML、Mermaid 导入导出和网页版一致区别在于不依赖网络连接装完即用所有图表文件保存在本地磁盘应用自身的 CSP内容安全策略可理解为浏览器层面的访问白名单禁止远程加载脚本图表数据不会外传遵循 Apache 2.0 协议个人和商用都免费。一眼看懂项目结构上面的界面就是它的全部门面左侧是形状库和草稿区中间是画布右侧是页面与视图属性。但源码层面只有两件事目录作用src/main/Electron 外壳窗口管理、启动参数、自动更新开关等核心逻辑在 src/main/electron.jsdrawio/编辑器本体以 git 子模块submodule可理解为仓库里再嵌一个仓库形式引入也就是说这个项目真正的开发面非常薄绝大部分能力来自drawio子模块。理解这一点后面看构建流程就不会迷路。核心能力速览完全离线数据不出机器除了一次版本检查启动时探测是否有新版本外应用与网络完全隔离。企业统管环境下可以彻底关掉更新检查设置环境变量DRAWIO_DISABLE_UPDATEtrue或启动时加--disable-update。原生文件关联双击即开构建配置 electron-builder-linux-mac.json 里注册了三种文件类型.drawiodraw.io 图表、.vsdxVisio 文档、.mmd/.mermaidMermaid 文本图。装好之后双击文件直接进入编辑不用先打开应用再找打开按钮。多平台、多格式打包同一份源码经 electron-builder 打包出各平台安装包Windows 的 NSIS 安装版 / MSI / 免安装版、macOS 的 dmg / zip、Linux 的 AppImage / deb / rpm且 x64 与 arm64 架构都覆盖。支持私人定制版项目不接受外部代码贡献但 Apache 2.0 协议允许你 fork 后改完自用。官方专门写了 doc/BUILDING_FOR_PERSONAL_USE.md从给窗口标题加后缀这种最小改动讲起一路到本地打包出安装文件是目前最完整的实操参考。多架构、可裁剪的构建脚本package.json里按平台拆好了脚本release-linux、release-win、release-appx、release-snap等日常本地构建则直接用npx electron-builder指定配置即可。最快上手路径前提已安装 Node.js 22.12 及以上版本和 git。第 1 步拿到源码git clone --recursive https://gitcode.com/GitHub_Trending/dr/drawio-desktop cd drawio-desktop--recursive不能省——编辑器本体在drawio子模块里漏掉它构建必然失败。第 2 步装依赖并直接跑起来npm install npm start不需要打安装包npm start就会从源码树直接启动应用。想边调试边看再加--enable-logging。第 3 步打包出可安装文件以 Linux 为例npm run sync -- disableUpdate npx electron-builder --config electron-builder-linux-mac.json --linux AppImage deb --x64 --publish never第一条命令把版本号同步进package.json并禁用自动更新否则你的私人构建会被官方更新悄悄覆盖回去第二条同时产出 AppImage 和 deb 包输出在dist/目录。想要 rpm 或 arm64把参数换成rpm/--arm64即可。macOS 和 Windows 的对应命令见 doc/BUILDING_FOR_PERSONAL_USE.md。注意--publish never项目自带的npm run release-*脚本是给 CI 用的会尝试把产物发布到发布页本地构建时不要用它。适合谁用不适合谁适合内网、离线、数据合规要求高的团队需要一个能断网可用的画图工具想把.vsdx、Mermaid 文件设为默认程序的文件关联用户想在官方版本上改点东西默认主题、启动行为并自用的人——流程官方都写好了。不适合 / 要注意只想用、不想折腾的人直接下载官方发布页的安装包即可没必要自己构建想给项目提代码贡献的人项目长期关闭外部 contributionbug 反馈和功能建议走 issue 渠道私人构建产物是未签名的macOS 和 Windows 会弹出安全警告这是预期行为同一用户只能有一个 draw.io 实例在运行——如果官方版本已在运行你本地启动的副本只会往官方窗口里开新标签改动不会生效。先退出官方应用再启动开发版。写在最后drawio-desktop 的价值不在多一个编辑器而在于把官方 draw.io 从需要网络才能打开的网页变成了断网也能干活、数据全在自己手里的本地应用而源码薄、构建文档齐全让它成为学习 Electron 打包链路子模块、electron-builder、多目标产物的少见好样本。下一步可以看看electron-builder-linux-mac.json里文件关联和图标是怎么声明的下一篇打算聊聊 Electron 应用的自动更新机制是怎么被设计成可以整体关掉的。【免费下载链接】drawio-desktopOfficial electron build of draw.io项目地址: https://gitcode.com/GitHub_Trending/dr/drawio-desktop创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表