企业官网建设流程全解析

3 条命令装好本地图表编辑器：drawio-desktop 上手全记录

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

公司内网的微服务拓扑图刚画完，你不想把它传到某个公网 SaaS 编辑器，也不想为商业软件掏许可费。drawio-desktop 是 draw.io 的官方桌面版，一个基于 Electron（用 Web 技术构建桌面应用的框架）的本地流程图工具，Apache 2.0 协议，商业使用不收费。画布上的所有数据只落在你的硬盘上，这是它和网页版最本质的区别。

拿到手

下载即用

无需任何运行环境，按操作系统取对应安装包：

• Windows 有三个变体：NSIS 安装程序（装到 Program Files，需要管理员权限）、MSI 包（装到用户目录，免管理员）、免安装 exe（解压就跑，但不注册文件关联）
• macOS 可走 Microsoft Store 的 APPX 版，同样免管理员
• Linux 提供 snap 包

从源码跑

需要 Node.js ≥ 22.12。编辑器本体是以 git submodule 形式放在drawio/目录下的，clone 时必须带上：

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

想边跑边看日志，追加参数：npm start --enable-logging。

第一张图：从空白画布到导出 PNG

启动后直接是一张"Untitled Diagram"，我们画一个最小流程图：

1. 左侧形状库顶部有 Search Shapes 搜索框，或者直接展开General分类，把圆角矩形拖进中间的网格画布，双击输入"开始"。
2. 再拖一个菱形、一个矩形，用图形下方的连线锚点依次连接，拖动时端点出现吸附标记再松手即可。
3. 右侧Diagram面板管视图：Grid（网格）、Page View、Background 的开关，纸张尺寸选 US-Letter 或 A4，纵向/横向用 Portrait/Landscape 切换。
4. 菜单File > Export as > PNG，弹出的是系统级文件对话框，存到本地任意目录。整个导出过程不产生任何网络请求。

常用快捷键记四个：Ctrl/⌘+Z撤销、Ctrl/⌘+G编组、Ctrl/⌘+Shift+V粘贴为纯文本（这个快捷键在主进程层拦截，网页应用抢了键位也照样生效）、空格 + 拖拽平移画布。

拆开外壳：主进程如何包住编辑器

整个仓库结构很干净：drawio/子模块是核心编辑器，src/main/只是一层薄壳，分三个角色——electron.js（约 4000 行）管窗口创建、文件关联、关闭前未保存拦截和 CLI 导出；electron-preload.js是渲染进程唯一能触碰的桥；args.js集中定义所有命令行参数。

其中安全设计最值得看。所有响应都经过主进程注入一条 Content-Security-Policy（浏览器里限制脚本来源的策略头）：

'Content-Security-Policy': ["default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; connect-src 'self'"]

一句话解释：编辑器只能执行自己目录里的脚本，网络连接只能指向自己。"数据不出本机"不是营销话术，是 CSP 强制的结果。

preload 端的桥同样克制。渲染进程只能通过contextBridge注入的electron对象发请求，每条消息带自增reqId由主进程应答：

contextBridge.exposeInMainWorld('electron', { request: (msg, callback, error) => { msg.reqId = reqId++; // reqInfo[msg.reqId] = {callback, error} ipcRenderer.send('rendererReq', msg); }, })

主进程还维护一个"blessedPaths"白名单：只有通过文件选择器、文件关联或命令行主动打开过的路径才被授权写入，渲染进程连 IPC 都绕不出去。连"最近打开"列表都专门做了一次性迁移来补齐授权，避免自动保存功能在老文件上失效。

GUI 之外的三种玩法

终端批量导出。同一个二进制也是无头转换器，这是桌面版最实用的隐藏能力：

drawio -x -f png diagram.drawio drawio -x -r -f pdf ./diagrams -o ./out

-r递归子目录，-o指定输出，输出格式从扩展名推断。输入不局限于.drawio，.vsdx、.csv、Mermaid（.mmd/.mermaid）都能吃。

自动排版。不想手动对齐时，用内置的 ELK 布局引擎（自动摆正图形的算法库）：

drawio -x -f png --layout organic diagram.drawio

内置organic、verticalFlow、horizontalTree等预设，也可以直接传 JSON 描述自定义布局序列。布局在导出前执行，一条命令出干净的图。

离线化与企业部署。设DRAWIO_DISABLE_UPDATE=true或启动时传--disable-update，更新检查完全关闭，应用变成 100% 离线运行，适合集中管控版本的内网环境。想改代码自己打包的话，doc/BUILDING_FOR_PERSONAL_USE.md 有完整流程：fork → 改src/main/electron.js→npm start直接验证 → 设DRAWIO_UNSIGNED=true跳过签名打包。注意自构建产物不带签名，系统首次启动会警告。

坑与疑问

Q：clone 后npm start报找不到drawio/VERSION？ A：漏了--recursive，子模块没拉下来。补一句git submodule update --init即可。

Q：CLI 导出--page-index 0突然报错退出？ A：v27.0.2 起页码改为 1 起始，传 0 会直接exit(1)而不是默默导出第一页，老脚本要同步改掉。

Q：启动时应用会连一次网，是不是在传数据？ A：那是版本更新检查，只访问更新服务器，除此之外不发任何请求，也不收集任何使用统计。介意的话--disable-update一并关掉。

Q：图里引用了外部图片/字体，打开离线文件会请求外网吗？ A：会。图表内嵌的外部媒体（图片、背景、字体）会在打开时拉取才能正常渲染，这是唯一由图表内容触发的出站路径，但不传输任何图表数据。打开陌生来源的.drawio要留心这一点。

Q：想提 PR 加功能，项目收吗？ A：官方明确不对代码贡献开放，只收 bug 报告和功能请求。但协议是 Apache 2.0，fork 自用完全合规，上面第三种玩法就是正规路子。

装好后先做一件事：把目录里散落的.drawio文件用-x -r批量转成 PNG，体会一下终端用法，你就知道为什么值得把它留在工作机上了。个人构建的细节看 doc/BUILDING_FOR_PERSONAL_USE.md。

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