企业官网建设流程全解析

drawio-desktop 离线绘图实战：3 步从零画出第一张流程图

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

公司演示当天网络突然中断，网页版绘图工具直接打不开？用 drawio-desktop 就不存在这个问题。它是一个基于 Electron 的桌面应用，核心功能是在完全离线的环境里绘制流程图、架构图，并把图表导出为 PNG、SVG、PDF 等格式，图表数据全程留在本地。这篇文章带你完成从安装到导出第一张图的全过程，顺带覆盖几个高频使用场景。

🧭 drawio 桌面版离线绘图工具的定位与适用人群

先说清楚它是做什么的，帮你判断要不要装：

• 离线安全是设计目标：除启动时的版本更新检查外，应用不与互联网通信；所有 JavaScript 自包含，内容安全策略禁止运行远程加载的代码，图表数据不会外发，也不收集使用统计。
• 免费且可商用：Apache 2.0 许可，不改代码、按原样使用即可用于任何目的。
• 跨平台：Windows、macOS、Linux 均有官方安装包，主程序入口是 src/main/electron.js。

适合人群：需要画流程图和架构图的开发者、架构师，常在弱网或无网环境办公的人，以及对"数据不出本机"有明确要求的团队。

🚀 drawio 桌面版快速上手：安装、启动并画出第一个图形

方式一：直接装官方安装包（推荐）

到项目的发布页（releases）下载对应操作系统的安装包，双击安装即可，全程不需要命令行。Windows 有三种版本，按权限情况选：

方式二：从源码启动（适合开发者）

前提：本机已装 Node.js 22.12 或更高版本（package.json 中有明确要求）。

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

--recursive不能省，drawio 编辑器本身是一个子模块；启动后想排查问题可以换成npm start --enable-logging打开日志。

第一次打开：三栏布局 + 画出第一个图形

启动后进入新文档，界面分三个区域：

• 左侧形状库：几何图形、流程图符号、UML、网络图标都有，顶部搜索框支持直接搜名称。
• 中间画布：网格背景（默认间距 10pt），可无限平移缩放；Ctrl+滚轮缩放，空格+拖动平移，Ctrl+0回到 100%。
• 右侧属性面板：选中元素后在这里调线条粗细、填充色、字体。

现在做出第一个成果：

1. 从左侧拖一个矩形到画布，按住Shift拖动边缘手柄可等比缩放；
2. 双击矩形输入文字，比如"开始"；
3. 再拖一个菱形到下方，把鼠标移到矩形边缘，出现连接点时按住拖到菱形上，连线自动创建。

小贴士：Ctrl+D快速复制图形，Delete删除，Ctrl+Z撤销——先记住这三个就够用了。

最后导出：菜单 File → Export as → PNG，可设置画布边距和缩放倍数，选个保存位置。至此，离线环境下从空白到第一张流程图的完整链路已经打通。

🛠️ drawio 离线画流程图、架构图的 3 个实战场景

场景一：业务流程图（含判断分支）

• 准备：一个待梳理的流程，明确哪些步骤是判断点。
• 操作：步骤用矩形、判断点用菱形，从菱形两条边分别引出"是/否"两条连线，双击连线给箭头加文字标签；不同阶段用不同填充色区分（在右侧属性面板改填充色）。
• 结果：一张可直接放进会议材料的流程图，导出 PDF 后放大不失真。

场景二：系统架构图（图标 + 分组）

• 准备：一张组件清单：服务、数据库、网关、客户端各有哪些。
• 操作：在左侧搜索栏输入 server、database 等关键词取图标；把同类组件选中后按Ctrl+G组合，Ctrl+Shift+G取消组合；用图层（Arrange → Layers）管理复杂关系。
• 结果：分层清晰的架构图。导出 SVG 适合放进网页，导出 PNG 适合插进文档。

场景三：把 Mermaid 文本转成图片

• 准备：一段 Mermaid 代码存成.mmd文件（CSV、.vsdx 也支持直接打开）。
• 操作：把.mmd文件拖进窗口（或 File → Open），图表即可编辑；File → Export as → PNG 出图。
• 结果：不需要装 Mermaid 渲染环境，文本描述秒变可编辑图表，改完再导出即可。

🔧 drawio 导出 PDF 自动排版、禁用更新检查与常见问题

进阶玩法

• 自动排版：图形摆乱了，用 Format → Edit Layout 里的预设（verticalFlow、horizontalTree 等）一键重排；命令行导出时也能带--layout verticalFlow参数。
• 透明底 PNG：给导出图片加--transparent参数，方便叠在幻灯片背景上。
• 个人构建：fork 后构建无签名个人版，步骤见 doc/BUILDING_FOR_PERSONAL_USE.md。

常见问题

• 源码启动失败？先确认 Node.js 版本 ≥ 22.12，然后重新执行npm install再npm start。
• Windows 装不上？没有管理员权限就选.msi或 portable 版本，两者都不需要管理员权限。
• 内网/受限环境启动报错？启动时加--disable-update参数（或设环境变量DRAWIO_DISABLE_UPDATE=true）关闭更新检查，它只依赖启动时访问 GitHub 检查新版本。
• 界面显示异常？尝试用--disable-acceleration参数启动，关闭硬件加速；仍不行可清除应用数据目录后重启。
• 自动保存的数据存在哪？本地与 Session 存储都在应用数据目录：macOS 为~/Library/Application Support/draw.io，Windows 为C:\Users\<用户名>\AppData\Roaming\draw.io\。

最后 4 件事

• 装好后先用空白文档画一个"开始 → 判断 → 结束"的最小流程图，验证全链路。
• 导出时 PNG 给文档用、PDF 给打印用，习惯多留一份。
• 排障时先查命令行--help输出，参数说明都在里面（见 src/main/args.js）。
• 功能建议或 bug 反馈，走项目的 Issues 渠道即可；项目不接受社区代码贡献，但欢迎问题报告。

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