设置

相关源文件

• README.md
• yarn.lock

本指南提供了设置 drawio-desktop 开发环境的分步说明。它涵盖了存储库克隆、依赖项安装以及在开发模式下运行应用程序。有关构建和打包过程的信息，请参阅 构建和打包。

先决条件

开始之前，请确保已安装以下软件

• Node.js（建议使用 LTS 版本）
• Git
• 代码编辑器（推荐 VSCode）

仓库结构概述

该存储库包含两个主要组件

1. drawio-desktop：Electron 包装应用程序
2. draw.io：核心绘图引擎（作为 git 子模块添加）

来源: README.md

克隆仓库

要克隆 drawio-desktop 存储库及其 draw.io 子模块

如果您已克隆存储库但未使用 --recursive 标志，您可以手动初始化和更新子模块

来源: README.md

安装依赖项

克隆存储库后，安装所有必需的依赖项

此命令将安装

• Electron 框架
• Electron Builder
• package.json 中指定的其他依赖项

来源：README.md, yarn.lock

开发工作流

来源: README.md

设置开发环境

为了便于开发和调试，请设置开发环境变量

此环境变量将应用程序配置为在开发模式下运行，该模式提供

• 更详细的日志记录
• 开发者工具访问权限
• 无自动更新

来源: README.md

运行应用程序

在开发模式下启动应用程序

用于通过控制台日志进行调试

来源: README.md

Electron 进程架构

应用程序包含三个主要组件

1. 主进程：处理应用程序生命周期、窗口管理和原生操作
2. 预加载脚本：在主进程和渲染进程之间创建安全桥梁
3. 渲染进程：在 Electron BrowserWindow 中运行 draw.io Web 应用程序

来源: README.md

符号链接（替代设置）

如果您使用符号链接来引用 draw.io 存储库而不是子模块，您还需要符号链接 node_modules 目录

来源: README.md

本地存储位置

在开发过程中，应用程序将其本地和会话存储数据存储在

• macOS：~/Library/Application Support/draw.io
• Windows：C:\Users\<USER-NAME>\AppData\Roaming\draw.io\

了解这些信息在以下情况下很有用

• 调试持久性问题
• 清除应用程序数据
• 检查应用程序保存的设置

来源: README.md

常见问题与解决方案

问题	解决方案
缺少 draw.io 子模块	运行 git submodule init && git submodule update
找不到 Electron	确保您在根目录运行了 npm install
应用程序启动时崩溃	使用 npm start --enable-logging 检查控制台
更改未反映	确保已设置 DRAWIO_ENV=dev 并重新启动应用程序
找不到模块错误	验证 node_modules 是否安装在正确的位置

下一步

设置好开发环境后，您可能需要

1. 探索 代码结构 以了解项目组织
2. 查阅 架构 以了解应用程序的工作原理
3. 请参阅 贡献 以了解对项目进行更改的指南

请记住，draw.io Desktop 的设计将安全性和隔离性作为首要目标。开发环境维护了这种隔离性，以确保与生产环境的一致性。