draw.io 桌面版完整指南:免费离线绘图,3 条命令批量导出流程图
【免费下载链接】drawio-desktopOfficial electron build of draw.io项目地址: https://gitcode.com/GitHub_Trending/dr/drawio-desktop
当架构评审材料不允许上传任何云盘、评审人却在催你 10 分钟内交出流程图时,draw.io-desktop 是最省心的选择:它把 draw.io 核心编辑器封装成 Electron 桌面应用,Apache 2.0 免费许可,图表数据从创建到导出全程留在本机。
draw.io 桌面版能力速览:离线绘图、批量导出、自动布局
| 能力 | 一句话说明 | 典型场景 |
|---|---|---|
| 完全离线安全架构 | CSP 禁止远程 JS,图表数据不出本机 | 敏感架构图评审 |
| 命令行批量导出 | draw.io/vsdx/csv/Mermaid 一次转为 pdf、png、svg、jpeg、xml、html | 周报批量出图 |
| 自动布局引擎 | --layout支持 verticalFlow、elkLayered 等预设 | 手画的乱图一键理顺 |
| 跨平台 | Windows、macOS、Linux 体验一致 | 混合操作系统团队协作 |
| 免费可魔改 | Apache 2.0,允许 fork 后自建个人版本 | 嵌入团队品牌与默认模板 |
表格里每一项后面都有对应的操作,先从源码把它跑起来。
从源码到第一张图:3 步跑通
获取源码。核心编辑器是一个 git 子模块,clone 时必须带上--recursive,否则构建必挂:
git clone --recursive https://gitcode.com/GitHub_Trending/dr/drawio-desktop首次运行。装依赖后一条命令启动,要求 Node 22.12 以上:
npm install npm start不想构建的话,也可以直接从官方 Releases 页面下载 Windows、macOS、Linux 的预编译安装包,双击安装即可。首次启动后就是下图这个界面:左侧是支持搜索的形状库,中间是网格画布,右侧是视图选项,顶部是工具栏。
布局和你熟悉的在线版一致:从左侧形状库把形状拖到画布,双击形状写文字,File → Save As 存成.drawio或.xml文件。
产出第一个成果。选中画好的内容,File → Export as 选择 PNG,图片在本地直接生成——没有任何数据经过网络,这就是完全离线工具的样子。
实战:一行命令批量导出整个 diagrams 目录
图画多了之后,真正的痛点是导出:周报要用图、设计师要交接,逐个打开导出不现实。所有 CLI 参数都定义在src/main/args.js,你只要加--export:
drawio --export --format png --border 10 diagrams/目录作为输入时,里面所有.drawio文件会被一次转换完,加--recursive还能递归子目录;命令执行时逐文件打印输出路径,跑完后每个源文件旁边就是对应的.png。除了.drawio,.mmd/.mermaid、vsdx、csv 文件也能直接传进去,老 Visio 图和代码即图表文本不用打开应用就能转。
只导一个文件时,短格式更顺手:
drawio -x -f png -o flow.png order-flow.drawio4 个效率技巧:断网部署、透明背景、自动布局
💻 隔离环境彻底断网。自动更新是应用唯一的出站连接,隔离部署时设环境变量DRAWIO_DISABLE_UPDATE=true,或启动时加--disable-update,之后应用不再发起任何外部请求,安全团队抓包即可验证。
⚡ 贴 PPT 用透明背景。导出的图底色太实,给导出命令加一个-t:
drawio -x -t -f png order.drawio导出的 PNG 是透明底,放到彩色页面上不会留白边。
🗂 乱图一行代码排版。图是几年里攒出来的补丁货,别手动挪框,直接跑自动布局:
drawio -x -f png --layout verticalFlow messy.drawio预设还有 horizontalTree、radialTree、organic 等,也能传elkLayered这类 JSON 控制布局方向和层级。
🔧 个人 fork 定制版(进阶)。想在官方应用里嵌入团队品牌和默认模板,fork 后构建时设DRAWIO_UNSIGNED=true,再用npm run sync -- disableUpdate阻止自动更新把你的改动覆盖回去,完整流程见doc/BUILDING_FOR_PERSONAL_USE.md。
高频疑问:免费吗、存哪里、构建失败
draw.io 桌面版商用免费吗?免费。Apache 2.0 许可,不改代码的话任何用途都可以用,没有订阅费。
我的图表存在哪里?你保存的文件在你自己选定的目录,应用缓存和设置存在 macOS 的~/Library/Application Support/draw.io、Windows 的%APPDATA%\draw.io\,均不会发送到任何服务器。
clone 下来构建就失败怎么办?多数是 clone 时漏了--recursive,drawio子模块没拉下来,补一句git submodule update --init即可,同时确认 Node 版本 22.12 以上。
能向官方仓库提代码吗?项目对外封闭贡献,但 Apache 2.0 许可允许你 fork 后为自己构建使用,官方文档专门写了这条路径。
资源导航
- src/main/electron.js — 主进程入口:窗口、菜单、自动更新
- src/main/args.js — CLI 参数定义,所有
--export选项的出处 - doc/BUILDING_FOR_PERSONAL_USE.md — 个人 fork 无签名构建完整指南
下次评审会再催你 10 分钟出图时,跑一遍导出命令把 PNG 递过去就行,图表数据没有离开过你的机器。
【免费下载链接】drawio-desktopOfficial electron build of draw.io项目地址: https://gitcode.com/GitHub_Trending/dr/drawio-desktop
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考