企业官网建设流程全解析

draw.io 桌面版：直接打开 .vsdx，一条命令批量导出 PNG

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

draw.io 桌面版是基于 Electron 的跨平台桌面绘图应用，即 draw.io 编辑器的官方桌面封装。它能直接打开 .drawio、Visio 的 .vsdx、CSV、Mermaid 文件，并导出为 PNG、PDF、SVG 等格式，全程在本机运行，采用 Apache 2.0 协议免费使用。这篇文章写给刚上手的人：装完、画一张图、批量导出，10 分钟内能建立起完整概念。

能做什么，和网页版差在哪

如果你用过在线版 draw.io，桌面版的界面和它基本一致：左侧形状库、中间网格画布、右侧属性面板。区别在于桌面版把编辑器包进了 Electron 外壳，补上了文件关联、本地文件读写和命令行导出，这让"接手一份前任留下的 Visio 文件"变成了现实场景：双击 .vsdx 打开，形状和连接线转换后直接编辑，再导出 PNG 放进报告、导出 SVG 贴进文档。

和市面上的商业绘图工具相比，有三个维度值得一提：

命令行支持的完整导出格式清单可以在 src/main/args.js 里查到。

拿到安装包的两种途径

普通用户不用碰源码。到项目仓库的 release 页面选对应系统的包即可。draw.io 桌面版在 Windows 上提供三种形态：.exe 安装器装到整机、需要管理员权限；.msi 装到当前用户、不需要权限；免安装版直接运行，但不会注册文件类型关联。macOS 是 .dmg，Linux 是 .AppImage 或 .deb。公司机器拿不到管理员权限时，选 msi 或免安装版。

想跑最新代码的开发者，结构不复杂：本仓库只是 Electron 主进程，真正的编辑器以 git 子模块形式放在 drawio/ 目录，所以克隆必须带 --recursive：

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

Node.js 要求 22.12.0 及以上（package.json 的 engines 字段就是这么写的）。本地构建和打包细节可看 doc/BUILDING_FOR_PERSONAL_USE.md。

日常流程：从打开文件到导出

首次启动，你会看到这样的界面：

画一张简单流程图，只需要三个动作：

1. File → New 新建，或直接打开已有的 .drawio；
2. 从左侧形状库（General 分类）拖一个矩形进画布，在形状边缘按住连接线拖到第二个形状，连线会自动吸附；
3. 选中形状，在右侧属性面板改文字和样式，网格、背景、纸张尺寸也都在这里调。

几个能少走弯路的细节：

• 左上角 Search Shapes 输入框支持按英文直接搜形状，比翻分类快；
• Scratchpad 是草稿区，形状先拖过去摆弄，不会弄脏主画布；
• 复杂图用底部 Page-1、Page-2 标签拆成多页，配合图层锁住已画好的部分；
• 导出对话框里能选导出范围（仅内容或整页）、边框宽度和缩放比例，SVG 支持透明背景。

批量导出与格式转换

桌面版同时是一个完整的命令行工具：正常启动是图形界面，带上导出参数就是转换引擎。单个文件：

# 把单文件导出为 PNG drawio --export --format png --output out/diagram.png diagram.drawio

整目录处理时加 --recursive，会连子目录一起转换：

drawio --export --recursive --format pdf docs/

几个实用组合：--transparent 让 PNG/SVG 背景透明；--crop 让 PDF 只保留图表区域；--all-pages 把多页图表全部导出为 PDF；--layout verticalFlow 会在导出前自动跑一遍布局，适合整理手画的乱线图。输入给 --export 的也可以是 .vsdx，不打开界面直接做格式转换。

数据与网络行为

这个应用默认几乎没有联网行为：所有 JavaScript 都打包在内部，内容安全策略禁止加载和运行远程脚本，唯一的网络动作是启动时检查更新。受管环境要彻底断网，设置环境变量 DRAWIO_DISABLE_UPDATE=true，或启动时加 --disable-update。

应用的本地存储（Local/Session Storage）放在系统用户数据目录，备份这个目录就等同于备份配置：

• macOS：~/Library/Application Support/draw.io
• Windows：C:\Users\<用户名>\AppData\Roaming\draw.io\

一个例外要留意：图里如果通过 URL 引用了外部图片或字体，打开文件时会去加载这些资源，来源不明的图要谨慎打开。

卡住时最常见的三个问题

1. 安装器要求管理员权限—— .exe 安装器做整机安装，需要管理员；没有权限就换 .msi 或免安装版；
2. 导入后部分形状没转换—— .vsdx 导入是尽力而为的转换，Visio 专有元素或插件形状可能变成占位框，稳妥做法是先导入、逐页核对，再开始编辑；
3. 界面显示错位或闪烁—— 多为显卡驱动或系统缩放问题，更新驱动或调整系统 DPI；源码版可用 npm start --enable-logging 启动并查看日志定位。

从哪开始练

先画一张五个矩形的流程图，把形状搜索、连线和右侧属性面板用熟，再拿一份真实的 .vsdx 打开、导出 PNG 走一遍完整链路。构建与打包细节看 README.md，发布流程看 DEVELOPMENT.md，想弄清主进程如何解析参数，从 src/main/ 读起即可。

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