15分钟从零打造专属drawio桌面版：定制化构建与安装全指南

【免费下载链接】drawio-desktopOfficial electron build of draw.io项目地址: https://gitcode.com/GitHub_Trending/dr/drawio-desktop

还在为寻找一款既能离线使用又能自定义修改的流程图工具而烦恼吗？drawio-desktop作为官方Electron封装版本，不仅保留了在线编辑器的全部功能，还支持本地数据存储和个性化定制。今天我将带你从源码开始，一步步构建属于自己的drawio桌面应用，无论是Linux的AppImage还是Windows安装包，都能轻松搞定！

为什么选择自己构建drawio-desktop？

🔹完全离线使用：所有图表数据都保存在本地，无需担心网络连接问题 🔹数据隐私保障：应用与互联网完全隔离，你的流程图数据永远不会外泄 🔹个性化定制：可以根据需求修改界面、功能或添加自定义特性 🔹跨平台支持：一套代码生成Windows、macOS、Linux全平台安装包

想象一下，你可以在没有网络的环境下自由绘制架构图、流程图，还能根据自己的工作习惯调整界面布局，这种自由度是普通软件无法提供的。

drawio-desktop提供了完整的离线绘图功能，左侧是丰富的图形库，右侧是详细的设置面板

环境准备：你需要什么？

开始之前，确保你的开发环境已就绪。整个过程其实比你想象的要简单得多：

1. 基础环境：Node.js 22.12或更高版本（官方构建使用Node 24）
2. 包管理器：npm或yarn，推荐使用最新版本
3. Git客户端：用于克隆项目和同步更新
4. 操作系统：Windows、macOS或Linux均可，本文以Linux为例

如果你使用的是Windows系统，建议安装PowerShell或使用WSL2以获得更好的开发体验。macOS用户需要确保已安装Xcode命令行工具。

第一步：获取源码并理解项目结构

首先克隆项目仓库，注意这里有个关键点：drawio-desktop使用了git子模块，必须使用递归克隆：

git clone --recursive https://gitcode.com/GitHub_Trending/dr/drawio-desktop.git cd drawio-desktop

项目结构非常清晰：

• drawio/- 核心编辑器子模块
• src/main/- Electron应用外壳代码
• build/- 安装包资源和图标
• 各种electron-builder-*.json- 不同平台的构建配置

drawio的官方图标，采用橙色渐变设计，象征创意与连接

特别提醒：如果你已经克隆了项目但没有使用--recursive参数，可以通过git submodule update --init命令来初始化子模块。

第二步：快速测试你的修改

在正式构建安装包之前，最好先在开发模式下测试你的修改。这样能快速验证功能是否正常，避免反复构建的等待时间。

假设你想在窗口标题后添加"(自定义版本)"标识，只需修改src/main/electron.js文件：

// 找到创建主窗口的代码（大约第442行） let mainWindow = new BrowserWindow(options) windowsRegistry.push(mainWindow) // 添加标题修改逻辑 mainWindow.on('page-title-updated', (event, title) => { event.preventDefault(); mainWindow.setTitle(title + ' (自定义版本)'); });

保存修改后，运行以下命令启动开发版本：

npm install npm start

重要提示：drawio在同一时间只允许一个实例运行。如果你已经安装了官方版本，请先关闭它，否则你的开发版本会直接打开官方应用窗口。

开发模式下，你可以通过设置DRAWIO_ENV=dev环境变量来打开开发者工具，方便调试和查看日志。

第三步：构建Linux安装包（AppImage和deb）

现在进入最激动人心的部分——构建可分发安装包！Linux用户通常需要两种格式：AppImage（无需安装直接运行）和deb（Ubuntu/Debian系统标准安装包）。

构建AppImage包

AppImage的最大优点是便携性，用户下载后直接双击就能运行：

npm install npm run dist -- -c electron-builder-linux-mac.json --linux AppImage

构建完成后，在dist/目录下会生成类似draw.io-x64-<版本号>.AppImage的文件。对于ARM64架构的设备（如树莓派4、苹果M系列芯片），可以添加--arm64参数。

构建deb包

如果你需要在Ubuntu或Debian系统上标准安装，deb包是更好的选择：

npm run dist -- -c electron-builder-linux-mac.json --linux deb

生成的deb包文件名格式为draw.io_<版本号>_amd64.deb。安装命令很简单：

sudo dpkg -i draw.io_<版本号>_amd64.deb

配置细节：如果你想构建的deb包与官方版本共存（而不是替换），需要修改electron-builder-linux-mac.json文件，将productName设置为"drawio"。否则，本地构建的包会使用"draw.io"作为产品名。

第四步：构建Windows和macOS安装包

Windows构建

Windows用户需要构建NSIS安装程序或MSI包。在PowerShell中执行：

$env:DRAWIO_UNSIGNED="true" npx electron-builder --config electron-builder-win.json --publish never

或者在cmd.exe中：

set DRAWIO_UNSIGNED=true npx electron-builder --config electron-builder-win.json --publish never

这里有个重要细节：DRAWIO_UNSIGNED=true环境变量告诉构建系统跳过代码签名。由于个人构建没有官方签名证书，Windows SmartScreen会显示安全警告，你需要点击"更多信息"→"仍要运行"来继续安装。

macOS构建

苹果系统的构建稍微复杂一些，因为涉及到Gatekeeper安全机制：

DRAWIO_UNSIGNED=true CSC_IDENTITY_AUTO_DISCOVERY=false npx electron-builder --config electron-builder-linux-mac.json --mac dmg --arm64 --publish never

对于Intel Mac，将--arm64替换为--x64。构建完成后，如果要将应用复制到其他Mac电脑，需要清除隔离标志：

xattr -cr /Applications/draw.io.app

第五步：利用GitHub Actions自动化构建

如果你没有对应平台的开发机，或者不想在本地安装复杂的工具链，GitHub Actions是你的救星！你的fork仓库可以完全自动化构建过程。

1. 提交你的修改到fork仓库
2. 在GitHub页面打开Actions标签，启用workflows
3. 选择"Personal Unsigned Build"工作流，选择目标平台，点击运行
4. 构建完成后，从Artifacts部分下载安装包

这种方法特别适合跨平台构建，比如在Windows上构建macOS应用，或者在Linux上构建Windows安装包。所有构建都在云端完成，你只需要下载最终结果。

构建过程中的常见问题与解决

✅依赖安装失败：检查网络连接，或配置npm镜像源（如淘宝镜像） ✅构建权限问题：避免使用sudo运行npm命令，确保对项目目录有读写权限 ✅子模块更新问题：使用git submodule update --init --recursive重新初始化 ✅版本同步问题：运行npm run sync -- disableUpdate同步版本并禁用自动更新

安全提醒：个人构建的应用没有官方数字签名，操作系统会显示安全警告。这是正常现象，因为你正在运行自己编译的软件。请确保只从可信来源获取源码。

保持你的fork与上游同步

开源项目在不断更新，你可能需要同步上游的修复和新功能：

# 先提交自己的修改 git add -A git commit -m "我的个性化修改" # 添加上游仓库并同步 git remote add upstream https://github.com/jgraph/drawio-desktop.git git fetch upstream git merge upstream/dev # 更新子模块 git submodule update --init

同步后记得重新构建安装包，因为版本信息和其他配置可能已经更新。

下一步：深度定制与扩展

掌握了基础构建后，你可以进一步探索：

1. 修改编辑器核心：编辑drawio/src/main/webapp/目录下的文件，可以改变编辑器的核心行为
2. 自定义主题和样式：通过修改CSS文件创建独特的界面风格
3. 添加本地化支持：为特定语言创建翻译文件
4. 集成第三方工具：通过Electron的API与系统其他应用交互

记住，drawio-desktop采用Apache 2.0许可证，你可以自由修改和分发你的构建版本，只要不声称它是官方版本即可。现在就开始你的drawio定制之旅吧，打造一个完全符合你工作流程的专属绘图工具！

【免费下载链接】drawio-desktopOfficial electron build of draw.io项目地址: https://gitcode.com/GitHub_Trending/dr/drawio-desktop