架构

相关源文件

• package.json
• src/main/disableUpdate.js
• src/main/electron-preload.js
• src/main/electron.js
• sync.cjs
• yarn.lock

本页面提供 draw.io 桌面应用程序架构的高层概述，解释了 Electron 框架如何封装和集成 draw.io 核心绘图引擎。有关主进程实现的具体细节，请参阅主进程，或有关渲染进程的细节，请参阅渲染进程和通信。

概述

draw.io 桌面应用程序是使用 Electron 构建的，Electron 是一个支持使用 Web 技术开发桌面应用程序的框架。该架构遵循 Electron 的进程模型，包括一个管理应用程序窗口和系统集成的*主进程*，以及显示实际 draw.io 绘图界面的*渲染进程*。

高层架构

来源： src/main/electron.js1-35 package.json1-10

主进程

主进程（electron.js）是应用程序的入口点，负责控制应用程序的生命周期。它负责创建浏览器窗口、处理原生菜单、管理文件操作以及提供系统级别的集成。

主要职责

主进程提供多个关键功能：

1. 窗口管理：以适当的安全设置创建、配置和管理应用程序窗口。
2. IPC 处理：处理来自渲染进程的消息。
3. 文件系统访问：处理基于 Web 的渲染进程无法执行的文件读/写操作。
4. 导出功能：将图表转换为各种格式（PDF、PNG、JPEG、SVG）。
5. 自动更新：检查并安装应用程序更新。

来源： src/main/electron.js147-347 src/main/electron.js356-391

渲染器进程

渲染进程在 Electron 浏览器窗口中运行 draw.io Web 应用程序。实际的 draw.io 核心功能是从包含 Web 应用程序代码的本地目录加载的。

预加载和 IPC 通信

主进程和渲染进程之间的通信通过预加载脚本进行安全地保障，该脚本仅向渲染进程公开特定的、受控的 API。

• 预加载脚本（electron-preload.js）通过 Electron 的 contextBridge 建立安全的桥梁。
• 它将主进程的有限功能暴露给渲染进程。
• 所有通信都通过受控的 IPC 通道进行。

来源： src/main/electron-preload.js1-79 src/main/electron.js172-175

安全模型

安全性是该架构的主要关注点，并采取了多项保护措施。

内容安全策略

强制执行严格的内容安全策略（Content Security Policy, CSP）以防止常见的 Web 漏洞。

应用程序：

• 强制执行 CSP 标头以限制资源加载。
• 仅允许加载应用程序目录中的文件。
• 使用上下文隔离（context isolation）将渲染进程与 Node.js 分离开。
• 通过预加载脚本实现安全的 IPC 桥接。

来源： src/main/electron.js359-389 src/main/electron.js172-175

更新系统

该应用程序包含一个自动更新机制，可以：

• 从 GitHub Releases 检查更新。
• 静默或经用户确认后下载和安装更新。
• 可以通过命令行参数、环境变量或代码禁用。

更新系统可以通过以下方式进行配置：

• 环境变量（DRAWIO_DISABLE_UPDATE、DRAWIO_SILENT_UPDATE）。
• 命令行参数（--disable-update、--silent-update）。
• 代码配置（通过 disableUpdate.js）。

来源： src/main/electron.js20-30 src/main/electron.js1129-1138 src/main/disableUpdate.js1-4 sync.cjs15-16

与 draw.io 核心集成

桌面应用程序将 draw.io 核心作为子模块进行集成。

代码结构

集成方式如下：

1. 从本地文件系统加载 draw.io Web 应用程序。
2. 通过 Electron API 扩展其桌面特定功能。
3. 提供文件系统访问、PDF 生成和其他原生功能。
4. 维护 Web 代码和原生代码之间的安全边界。

来源： src/main/electron.js75-76 src/main/electron.js216-224 package.json36-46

配置系统

该应用程序使用多种配置机制。

1. Electron Store：应用程序设置的持久化存储。
2. 命令行参数：运行时配置选项。
3. URL 参数：传递给 Web 应用程序的配置。
4. 环境变量：系统级配置。

关键配置设置包括：

设置	目的	默认
enableSpellCheck	切换拼写检查功能。	macOS 上为 true，其他系统为 false。
enableStoreBkp	启用备份文件存储。	true
isGoogleFontsEnabled	允许加载 Google 字体。	false
disableUpdate	禁用自动更新	false

来源： src/main/electron.js69-82 src/main/electron.js84-102

导出功能

该应用程序通过命令行选项提供强大的导出功能，支持 PDF、PNG、JPEG 和 SVG 等格式。导出系统：

1. 创建一个隐藏的浏览器窗口。
2. 加载并处理图表文件。
3. 将其渲染为请求的格式。
4. 将输出保存到指定位置。

此功能允许通过命令行界面对图表进行批量处理。

来源： src/main/electron.js499-841

平台特定行为

该应用程序针对不同平台具有专门的行为。

这些平台差异包括：

• macOS 上可用的菜单栏，而在 Windows/Linux 上隐藏。
• macOS 上 Cmd+Q 的特殊处理。
• Linux 发行版的 Flatpak 检测。

来源： src/main/electron.js68-69 src/main/electron.js1077-1127 src/main/electron.js1142-1147

PDF 处理

该应用程序使用 @cantoo/pdf-lib 包集成了 PDF 生成功能，允许：

• 将图表转换为 PDF 格式。
• 自定义 PDF 输出（裁剪、页面大小等）。
• 处理现有的 PDF 文件。

此功能提供了比纯 Web 应用程序更增强的导出功能。

来源： src/main/electron.js13 package.json46