draw.io桌面版完全使用指南从画出第一张流程图到批量交付100张图【免费下载链接】drawio-desktopOfficial electron build of draw.io项目地址: https://gitcode.com/GitHub_Trending/dr/drawio-desktop凌晨两点你把画了三天的系统架构图拖进邮箱附上一句请查收然后点了发送。五分钟后对方回信打不开格式不对能导成图片吗你打开软件发现导出要高级会员想批量导出另外几十张图还得一张一张点按钮。这就是很多人放弃付费绘图软件、改用draw.io桌面版的真实理由——它免费、开源、离线可用还能用一条命令行同时导出几百张图。这篇文章不讲空泛的功能罗列而是跟着一张流程图从想法到交付的完整旅程带你走一遍真正的使用路径。先认识一下draw.io桌面版到底是什么一句话draw.io桌面版是官方基于 Electron 构建的桌面绘图软件把开源的 draw.io 核心编辑器项目里作为 git 子模块存在位于drawio/目录打包成 Windows、macOS、Linux 都能原生运行的应用。它和在线版 draw.io 是同一个引擎但多了桌面端的专属能力完全离线运行、命令行批量导出、本地文件直接读写。用一张表说清它的边界它是什么它不是什么免费开源软件Apache 2.0 协议不是免费试用后收费的阉割版流程图、UML、网络拓扑等 20 类图表不是只能画流程图的玩具数据默认全部留在本地电脑不是依赖云端存储的在线服务可直接打开和转换 Visio 的 VSDX 文件不是 Visio 的付费订阅替代品如果你正好在找一款免费、不联网、格式兼容的绘图工具它大概率能满足你。第一站把它装进电脑安装这一步Windows 用户最容易犯选择困难——因为官方一次提供三种包它们看起来都叫安装程序实际差别很大Windows 安装包特点适合谁windows-installer.exeNSIS 安装器装进 Program Files需要管理员权限公司电脑、有管理员权限的日常用户.msi包装进用户目录不需要管理员权限公司锁了管理员权限的办公电脑windows-no-installer.exe便携版解压即用不注册文件关联想放U盘随身带、不想污染系统的人判断逻辑很简单能拿到管理员权限就用 installer拿不到就用 msi想要绿色免安装就选 no-installer。macOS 用户下载 dmg 后拖进应用程序即可Linux 用户有 AppImage加执行权限直接跑和 deb 包两种主流选择。第二站5分钟画出第一张流程图装好后第一次打开你会看到一个三栏布局的界面它基本是打开即会用的界面可以拆成五个区域每个区域各管一件事顶部菜单栏文件、编辑、视图、排列等全部核心操作工具栏缩放、撤销重做、对齐等高频按钮左侧形状库按 General、UML 等类别分组的图形元素中央绘图区带网格的白色画布支持精确对齐右侧属性面板页面、网格、纸张、自动保存等设置画第一张图只需要三步从左侧形状库拖一个矩形到画布双击矩形输入文字比如用户登录用工具栏的连接工具把几个形状串起来此时你已经有了一张能看懂的流程图。右下角会显示当前页面默认 Page-1文件默认保存为.drawio的 XML 格式——这个格式的好处后面会讲。第三站让图表看起来专业出品很多人画完图自己看着还行一放进汇报 PPT 就显得业余差在哪多半差在快捷键和对齐规范。先记住这张表操作Windows/LinuxmacOS新建 / 打开 / 保存CtrlN / CtrlO / CtrlS⌘N / ⌘O / ⌘S撤销 / 重做CtrlZ / CtrlY⌘Z / ⌘Y复制 / 粘贴 / 全选CtrlC / CtrlV / CtrlA⌘C / ⌘V / ⌘A删除DeleteDelete放大 / 缩小Ctrl / Ctrl-⌘ / ⌘-绘图区的网格、参考线和连接点默认是开启的拖拽时会出现对齐参考线形状边缘和中心会自动吸附——多利用这一点比手工对眼睛靠谱得多。至于配色官方没有强制模板但团队协作时最好自己定一套主色、辅助色、警示色各选一两个全组统一。配合右侧属性面板的自动保存选项建议勾上避免崩溃丢工作基本就能保证图表质量和安全。第四站把图表交付出去图表画完总要发出去draw.io桌面版支持的导出格式有六种PDF、PNG、JPG、SVG、XML、HTML。怎么选格式适合场景备注PNG文档插图、网页展示支持透明背景JPG文件体积敏感的场合可调质量默认90SVG网页开发、缩放不失真可嵌入图片和字体PDF打印、正式交付可裁剪到图表大小HTML交互式网页嵌入带缩放、灯箱等控件XML数据交换、二次处理可输出未压缩结构导出对话框里有几个值得勾选的选项透明背景PNG/SVG 去掉白底、嵌入图表副本PNG/SVG/PDF 里带上源数据别人能反解出可编辑版本、主题深色/浅色。如果你画的是多页文档比如一本几十页的架构手册导出时注意用页面范围或全部页面选项避免只导出默认的第一页。第五站批量交付100张图这是 draw.io桌面版最被低估的能力也是很多老手离不开它的原因它带完整的命令行界面。所有参数定义都在源码的 src/main/args.js 里除了 drawio 文件还能直接输入VSDXVisio、CSV、Mermaid.mmd/.mermaid文件。单张导出# 把 架构图.drawio 导出为 PNG drawio --export --format png 架构图.drawio # 用 Visio 文件直接转 PDF drawio --export --format pdf 采购流程.vsdx批量导出当前目录所有文件# 循环导出为 SVG for file in *.drawio; do drawio --export --format svg $file done递归处理子文件夹并指定输出目录drawio --export --format pdf --recursive --output ./pdf ./diagrams常用参数速查Windows 下可执行文件是draw.io命令写法相同参数作用-x, --export进入导出模式-f, --format输出格式pdf/png/jpg/svg/xml/html默认 pdf-o, --output指定输出文件或文件夹-r, --recursive递归处理子文件夹-t, --transparentPNG/SVG 透明背景-s, --scale按倍数缩放输出--width / --height限制输出宽/高保持比例-b, --border图表周围留白宽度-q, --qualityJPEG 质量默认 90-a, --all-pages导出所有页面-p, --page-index只导出第 N 页1 起算--theme导出主题dark / light / auto-c, --create没传文件时自动新建空文件-k, --check不覆盖已存在的文件这套 CLI 完全可以接进 CI 流水线或定时任务实现图改好了构建时自动出图的工作流。对需要定期交付几十上百张图的人来说省下的时间非常可观。第六站守住数据底线绘图软件涉及的数据往往敏感——架构图、流程文档、组织架构谁都不想它们被悄悄上传。draw.io桌面版在这方面的设计是默认隔离默认离线应用本身不连接网络图表数据只存在本地严格内容安全策略所有 JavaScript 自带CSP 禁止加载和运行远程脚本应用自身的网络连接也被限制无遥测不收集使用数据不上传任何图表内容可完全断网想彻底禁用联网检查启动时加参数--disable-update或设置环境变量DRAWIO_DISABLE_UPDATEtrue在 flatpak 沙箱环境下更新检查也会自动关闭数据存储位置是固定的macOS~/Library/Application Support/draw.ioWindowsC:\Users\用户名\AppData\Roaming\draw.io\有一个细节值得知道如果图表里嵌入了外部图片或字体打开时会去加载这些外部资源否则无法正常渲染。所以打开来路不明的文件时对方理论上能看到你的 IP——但图表内容本身不会外传。安全相关的实现都在 src/main/electron.js 和 src/main/disableUpdate.js 里想验证可以直接读源码。第七站想要一个自己的版本如果你不满足于现成功能想改改菜单、换个默认配置甚至打一个带自己品牌名的安装包项目是 Apache 2.0 协议完全可以 fork 后自己构建。构建要求 Node.js 22.12 及以上克隆时必须带--recursive核心编辑器是子模块缺了它构建必失败git clone --recursive https://gitcode.com/GitHub_Trending/dr/drawio-desktop cd drawio-desktop npm install npm startnpm start会直接从源码树启动应用。想调试的话先设DRAWIO_ENVdev再启动会打开开发者工具npm start --enable-logging能输出完整日志。改代码也很直观。比如想在所有窗口标题后面加个(我的构建)后缀在 src/main/electron.js 创建主窗口的位置加几行监听即可mainWindow.on(page-title-updated, (event, title) { event.preventDefault(); mainWindow.setTitle(title (my build)); });改完想打安装包官方构建流程用了私有签名设施个人构建需要显式声明跳过签名设置环境变量DRAWIO_UNSIGNEDtrue再运行 electron-builder。注意个人构建是未签名的Windows SmartScreen 和 macOS Gatekeeper 会提示风险——这是正常现象自己构建自己用没问题。如果你只想改编辑器行为而不动桌面壳可以编辑子模块里的drawio/src/main/webapp/js/PreConfig.js这是官方预留的配置覆盖入口。详细的个人构建流程见项目文档 doc/BUILDING_FOR_PERSONAL_USE.md。有一点要诚实说明这个项目不接受外部代码贡献维护者出于长期可维护性考虑但 bug 反馈、功能建议和文档改进都是欢迎的。常见误区与真相最后用一张表破除几个最常见的误解常见说法真相draw.io 要联网才能用桌面版默认离线联网只为检查更新可一键禁用免费版功能肯定被砍完全开源免费无功能限制、无订阅命令行只能导出 PDF支持 png/jpg/svg/xml/html还能批量、递归、指定页面能打开 Visio 文件吗支持 VSDX 直接导入并编辑开源项目随便提 PR 就会被合并项目对代码贡献关闭但欢迎提 issue 和反馈现在动手画你的第一张图如果你正在为流程图软件付费或者被格式不兼容不能批量导出数据不敢上传这三件事困扰draw.io桌面版值得今晚就装上试试从官网下载对应系统的安装包五分钟内就能画出第一张流程图当你第一次用一条命令行同时导出几十张图时就会明白为什么很多人一旦用上就回不去了。draw.io桌面版免费开源、离线安全、跨平台一致配合强大的命令行批量处理能力是替代付费绘图软件的高性价比选择。装好它把文章里那条批量导出命令存进备忘录下次要交付图表时你会感谢现在的自己。【免费下载链接】drawio-desktopOfficial electron build of draw.io项目地址: https://gitcode.com/GitHub_Trending/dr/drawio-desktop创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 draw.io桌面版完全使用指南：从画出第一张流程图到批量交付100张图
draw.io桌面版完全使用指南从画出第一张流程图到批量交付100张图【免费下载链接】drawio-desktopOfficial electron build of draw.io项目地址: https://gitcode.com/GitHub_Trending/dr/drawio-desktop凌晨两点你把画了三天的系统架构图拖进邮箱附上一句请查收然后点了发送。五分钟后对方回信打不开格式不对能导成图片吗你打开软件发现导出要高级会员想批量导出另外几十张图还得一张一张点按钮。这就是很多人放弃付费绘图软件、改用draw.io桌面版的真实理由——它免费、开源、离线可用还能用一条命令行同时导出几百张图。这篇文章不讲空泛的功能罗列而是跟着一张流程图从想法到交付的完整旅程带你走一遍真正的使用路径。先认识一下draw.io桌面版到底是什么一句话draw.io桌面版是官方基于 Electron 构建的桌面绘图软件把开源的 draw.io 核心编辑器项目里作为 git 子模块存在位于drawio/目录打包成 Windows、macOS、Linux 都能原生运行的应用。它和在线版 draw.io 是同一个引擎但多了桌面端的专属能力完全离线运行、命令行批量导出、本地文件直接读写。用一张表说清它的边界它是什么它不是什么免费开源软件Apache 2.0 协议不是免费试用后收费的阉割版流程图、UML、网络拓扑等 20 类图表不是只能画流程图的玩具数据默认全部留在本地电脑不是依赖云端存储的在线服务可直接打开和转换 Visio 的 VSDX 文件不是 Visio 的付费订阅替代品如果你正好在找一款免费、不联网、格式兼容的绘图工具它大概率能满足你。第一站把它装进电脑安装这一步Windows 用户最容易犯选择困难——因为官方一次提供三种包它们看起来都叫安装程序实际差别很大Windows 安装包特点适合谁windows-installer.exeNSIS 安装器装进 Program Files需要管理员权限公司电脑、有管理员权限的日常用户.msi包装进用户目录不需要管理员权限公司锁了管理员权限的办公电脑windows-no-installer.exe便携版解压即用不注册文件关联想放U盘随身带、不想污染系统的人判断逻辑很简单能拿到管理员权限就用 installer拿不到就用 msi想要绿色免安装就选 no-installer。macOS 用户下载 dmg 后拖进应用程序即可Linux 用户有 AppImage加执行权限直接跑和 deb 包两种主流选择。第二站5分钟画出第一张流程图装好后第一次打开你会看到一个三栏布局的界面它基本是打开即会用的界面可以拆成五个区域每个区域各管一件事顶部菜单栏文件、编辑、视图、排列等全部核心操作工具栏缩放、撤销重做、对齐等高频按钮左侧形状库按 General、UML 等类别分组的图形元素中央绘图区带网格的白色画布支持精确对齐右侧属性面板页面、网格、纸张、自动保存等设置画第一张图只需要三步从左侧形状库拖一个矩形到画布双击矩形输入文字比如用户登录用工具栏的连接工具把几个形状串起来此时你已经有了一张能看懂的流程图。右下角会显示当前页面默认 Page-1文件默认保存为.drawio的 XML 格式——这个格式的好处后面会讲。第三站让图表看起来专业出品很多人画完图自己看着还行一放进汇报 PPT 就显得业余差在哪多半差在快捷键和对齐规范。先记住这张表操作Windows/LinuxmacOS新建 / 打开 / 保存CtrlN / CtrlO / CtrlS⌘N / ⌘O / ⌘S撤销 / 重做CtrlZ / CtrlY⌘Z / ⌘Y复制 / 粘贴 / 全选CtrlC / CtrlV / CtrlA⌘C / ⌘V / ⌘A删除DeleteDelete放大 / 缩小Ctrl / Ctrl-⌘ / ⌘-绘图区的网格、参考线和连接点默认是开启的拖拽时会出现对齐参考线形状边缘和中心会自动吸附——多利用这一点比手工对眼睛靠谱得多。至于配色官方没有强制模板但团队协作时最好自己定一套主色、辅助色、警示色各选一两个全组统一。配合右侧属性面板的自动保存选项建议勾上避免崩溃丢工作基本就能保证图表质量和安全。第四站把图表交付出去图表画完总要发出去draw.io桌面版支持的导出格式有六种PDF、PNG、JPG、SVG、XML、HTML。怎么选格式适合场景备注PNG文档插图、网页展示支持透明背景JPG文件体积敏感的场合可调质量默认90SVG网页开发、缩放不失真可嵌入图片和字体PDF打印、正式交付可裁剪到图表大小HTML交互式网页嵌入带缩放、灯箱等控件XML数据交换、二次处理可输出未压缩结构导出对话框里有几个值得勾选的选项透明背景PNG/SVG 去掉白底、嵌入图表副本PNG/SVG/PDF 里带上源数据别人能反解出可编辑版本、主题深色/浅色。如果你画的是多页文档比如一本几十页的架构手册导出时注意用页面范围或全部页面选项避免只导出默认的第一页。第五站批量交付100张图这是 draw.io桌面版最被低估的能力也是很多老手离不开它的原因它带完整的命令行界面。所有参数定义都在源码的 src/main/args.js 里除了 drawio 文件还能直接输入VSDXVisio、CSV、Mermaid.mmd/.mermaid文件。单张导出# 把 架构图.drawio 导出为 PNG drawio --export --format png 架构图.drawio # 用 Visio 文件直接转 PDF drawio --export --format pdf 采购流程.vsdx批量导出当前目录所有文件# 循环导出为 SVG for file in *.drawio; do drawio --export --format svg $file done递归处理子文件夹并指定输出目录drawio --export --format pdf --recursive --output ./pdf ./diagrams常用参数速查Windows 下可执行文件是draw.io命令写法相同参数作用-x, --export进入导出模式-f, --format输出格式pdf/png/jpg/svg/xml/html默认 pdf-o, --output指定输出文件或文件夹-r, --recursive递归处理子文件夹-t, --transparentPNG/SVG 透明背景-s, --scale按倍数缩放输出--width / --height限制输出宽/高保持比例-b, --border图表周围留白宽度-q, --qualityJPEG 质量默认 90-a, --all-pages导出所有页面-p, --page-index只导出第 N 页1 起算--theme导出主题dark / light / auto-c, --create没传文件时自动新建空文件-k, --check不覆盖已存在的文件这套 CLI 完全可以接进 CI 流水线或定时任务实现图改好了构建时自动出图的工作流。对需要定期交付几十上百张图的人来说省下的时间非常可观。第六站守住数据底线绘图软件涉及的数据往往敏感——架构图、流程文档、组织架构谁都不想它们被悄悄上传。draw.io桌面版在这方面的设计是默认隔离默认离线应用本身不连接网络图表数据只存在本地严格内容安全策略所有 JavaScript 自带CSP 禁止加载和运行远程脚本应用自身的网络连接也被限制无遥测不收集使用数据不上传任何图表内容可完全断网想彻底禁用联网检查启动时加参数--disable-update或设置环境变量DRAWIO_DISABLE_UPDATEtrue在 flatpak 沙箱环境下更新检查也会自动关闭数据存储位置是固定的macOS~/Library/Application Support/draw.ioWindowsC:\Users\用户名\AppData\Roaming\draw.io\有一个细节值得知道如果图表里嵌入了外部图片或字体打开时会去加载这些外部资源否则无法正常渲染。所以打开来路不明的文件时对方理论上能看到你的 IP——但图表内容本身不会外传。安全相关的实现都在 src/main/electron.js 和 src/main/disableUpdate.js 里想验证可以直接读源码。第七站想要一个自己的版本如果你不满足于现成功能想改改菜单、换个默认配置甚至打一个带自己品牌名的安装包项目是 Apache 2.0 协议完全可以 fork 后自己构建。构建要求 Node.js 22.12 及以上克隆时必须带--recursive核心编辑器是子模块缺了它构建必失败git clone --recursive https://gitcode.com/GitHub_Trending/dr/drawio-desktop cd drawio-desktop npm install npm startnpm start会直接从源码树启动应用。想调试的话先设DRAWIO_ENVdev再启动会打开开发者工具npm start --enable-logging能输出完整日志。改代码也很直观。比如想在所有窗口标题后面加个(我的构建)后缀在 src/main/electron.js 创建主窗口的位置加几行监听即可mainWindow.on(page-title-updated, (event, title) { event.preventDefault(); mainWindow.setTitle(title (my build)); });改完想打安装包官方构建流程用了私有签名设施个人构建需要显式声明跳过签名设置环境变量DRAWIO_UNSIGNEDtrue再运行 electron-builder。注意个人构建是未签名的Windows SmartScreen 和 macOS Gatekeeper 会提示风险——这是正常现象自己构建自己用没问题。如果你只想改编辑器行为而不动桌面壳可以编辑子模块里的drawio/src/main/webapp/js/PreConfig.js这是官方预留的配置覆盖入口。详细的个人构建流程见项目文档 doc/BUILDING_FOR_PERSONAL_USE.md。有一点要诚实说明这个项目不接受外部代码贡献维护者出于长期可维护性考虑但 bug 反馈、功能建议和文档改进都是欢迎的。常见误区与真相最后用一张表破除几个最常见的误解常见说法真相draw.io 要联网才能用桌面版默认离线联网只为检查更新可一键禁用免费版功能肯定被砍完全开源免费无功能限制、无订阅命令行只能导出 PDF支持 png/jpg/svg/xml/html还能批量、递归、指定页面能打开 Visio 文件吗支持 VSDX 直接导入并编辑开源项目随便提 PR 就会被合并项目对代码贡献关闭但欢迎提 issue 和反馈现在动手画你的第一张图如果你正在为流程图软件付费或者被格式不兼容不能批量导出数据不敢上传这三件事困扰draw.io桌面版值得今晚就装上试试从官网下载对应系统的安装包五分钟内就能画出第一张流程图当你第一次用一条命令行同时导出几十张图时就会明白为什么很多人一旦用上就回不去了。draw.io桌面版免费开源、离线安全、跨平台一致配合强大的命令行批量处理能力是替代付费绘图软件的高性价比选择。装好它把文章里那条批量导出命令存进备忘录下次要交付图表时你会感谢现在的自己。【免费下载链接】drawio-desktopOfficial electron build of draw.io项目地址: https://gitcode.com/GitHub_Trending/dr/drawio-desktop创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考