xiaotianxt/my-excalidraw

A modern, feature-rich Excalidraw desktop application with workspace management, built with Electron, React, and TypeScript

★ 0Forks 0TypeScriptGitHub ↗Compare
cross-platformdesktop-appdrawingelectronexcalidrawfile-managementmodern-uireacttypescriptworkspace

README

My Excalidraw

一个以本地文件为核心的 Excalidraw 桌面工作区。仅提供桌面版,不包含 Web/PWA 部署或云同步。

草稿与保存分开

  • 自动保留草稿:新图和已有绘图的修改都可以恢复,不自动覆盖正式文件。
  • 主动保存:⌘/Ctrl S 才写入 .excalidraw 文件。第一次保存会询问位置。
  • 安全导航:返回工作区、打开另一张图、关闭或退出前,先确保草稿已写入磁盘;失败则留在原处。
  • 清空和放弃有保护:先写恢复副本,再执行操作。清空后可撤销或恢复。
  • 明确的失败状态:区分文件保存失败与文件已保存但工作区更新失败,支持重试和另存副本。
  • 不做无关写入:没有内容修改就不自动保存;重命名不生成缩略图。

工作区支持真实缩略图和列表两种视图,以及搜索、排序和重命名。预览由官方 Excalidraw 渲染器生成,保留原图字体、换行、箭头和图片;按内容缓存,不在绘图或改名时重复生成。

macOS 使用自定义标题栏,红黄绿按钮保留系统原生行为。菜单栏同步提供新建、打开、保存、另存、重命名、放弃草稿、返回工作区和受保护的清空操作;不可执行的动作会禁用。画布使用官方 Excalidraw 编辑器,绘图格式保持兼容。

打开图片与可编辑导出

「打开文件」支持 PNG、SVG、JPEG/JFIF、WebP、GIF、BMP、AVIF 和 ICO。PNG/SVG 若内嵌 Excalidraw 场景,会恢复可编辑图形;普通图片则作为图片元素导入。损坏的内嵌场景会报错,不会悄悄变成不可编辑图片。

「导出图像」默认嵌入场景,生成的 PNG/SVG 可以再次打开编辑。PNG 默认 2×、300 DPI,可调整并点击「保存为默认」;也可以从菜单「文件 → 默认导出设置」修改。

  • 倍率增加像素数量;DPI 仅标记打印尺寸,不凭空增加细节。
  • SVG 是矢量图,不使用 PNG 的倍率/DPI。嵌入照片仍受其原始分辨率限制。
  • 打开图片得到独立草稿,不自动覆盖来源图片。保存绘图使用 .excalidraw,生成图片使用「导出图像」。
  • 导出不会提交当前草稿。嵌入场景会增加文件体积并包含可编辑内容,可取消勾选。
  • 图片输入上限 64 MB;PNG 输出上限 3200 万像素 / 边长 16384。动图不保留动画。

本地开发

建议使用 Node.js 22 LTS。

npm ci
npm run dev

开发和未打包运行使用独立的 My Excalidraw Development 配置目录,不访问已安装应用的数据。也可显式指定隔离目录:

MY_EXCALIDRAW_DATA_DIR=/absolute/path/to/test-profile npm run dev

这会启动 Electron,不是要求你在浏览器中使用网页版本。

检查与构建

npm run type-check
npm run lint
npm test
npm run build       # 编译 renderer / main / preload
npm run build:dir   # 打包到 release/,不安装、不发布
npm run test:images # 编译后运行真实 Electron PNG/SVG/DPI 往返测试

不要直接用打包产物替换现有应用。 应先备份真实数据,并使用其副本验证兼容性。当前改造没有迁移、清空或改写旧工作区。

快捷键

操作 快捷键
保存 ⌘/Ctrl S
另存副本并继续编辑该文件 ⌘/Ctrl Shift S
导出图像 ⌘/Ctrl Shift E
新建 / 打开 ⌘/Ctrl N / ⌘/Ctrl O
返回工作区,不提交修改 ⌘/Ctrl Shift H
关闭窗口 / macOS 退出 系统原有的 ⌘W / ⌘Q

Escape 留给画布和对话框,不承担返回工作区的行为。

恢复与边界

  • 自动草稿在应用数据目录的 document-state/drafts/,不是操作系统会随时清理的临时目录。
  • 清空和放弃前的恢复文件可从 文件 → 查看恢复副本 找到,使用“打开文件”重新打开。
  • 旧工作区只读兼容,不批量迁移或删除。新建/主动保存的文档逐文件存入 document-state/documents/,不再受浏览器容量限制;名称保存在独立小型元数据中。
  • 自动草稿不等于外部备份;强制结束进程或断电仍可能丢失尚未完成写入的最后修改。
  • 恢复副本暂不自动清理,可能逐渐占用空间。

详细设计、数据边界、验证记录和已知限制见 桌面工作区设计。

技术

Electron · React · TypeScript · Vite · 官方 @excalidraw/excalidraw。无网页部署流程。版本标签触发桌面发布工作流,所有平台构建成功后才发布完整安装包和校验和。详见 RELEASE.md。

MIT License. See LICENSE.

Contributors

xiaotianxt

Issues