1. 项目概述：Snip，一个为AI编程助手打造的“视觉模式”

如果你和我一样，日常重度依赖Claude Code、Cursor这类AI编程助手来写代码、设计架构，那你肯定遇到过这个痛点：当你让AI帮你画一个系统架构图、ER图或者UI组件预览时，它给你的永远是一大段冰冷的、需要你脑补的Mermaid或HTML代码文本。你得手动复制、粘贴到某个渲染工具里，才能看到它到底画了个啥。这个“脑补-验证”的循环，严重打断了流畅的协作节奏。

Snip就是为了终结这个循环而生的。它本质上是一个“视觉渲染中间件”。你把它安装到系统菜单栏，它就会在后台提供一个命令行接口（CLI）。当你的AI助手（比如Claude Code）需要向你展示一个图表时，它不再输出代码文本，而是直接调用 snip render 命令。Snip会瞬间将代码渲染成可视化的图表或网页预览，并弹出一个优雅的审阅窗口给你看。

这还没完，真正的精髓在于“带批注的审阅”。你看图的时候，如果觉得哪里不对，可以直接在图上画圈、加箭头、写文字批注。这些带有空间位置的批注信息，会以结构化的方式（JSON）反馈给AI。AI“看到”你的批注后，就能精准理解你的意图，进行下一轮迭代。这就像你和AI之间突然有了一块共享的、可交互的白板，沟通效率提升了不止一个维度。

它完美适配Claude Code，通过一个 snip setup 命令就能完成深度集成。同时，由于它核心是一个标准的CLI工具，所以理论上任何能执行Shell命令的AI编程环境（如Cursor, Windsurf, Cline）都能使用。对于没有Shell访问权限的环境（如Claude Desktop），它还提供了MCP服务器作为桥梁。

2. 核心设计思路与工作原理拆解

2.1 定位：从“截图工具”到“AI视觉协作平台”

初次接触Snip，你可能会被它“Also a Screenshot Tool”的描述带偏，以为它只是个加强版的截图软件。实际上，截图和标注功能只是它的“基础设施”和“用户界面层”。它的核心定位是一个 “AI原生应用的视觉I/O系统” 。

传统的AI编程交互是“文本输入 -> 文本输出”。Snip在其中插入了一个“视觉层”，将其变成了“文本输入 -> 视觉输出 -> 视觉批注输入 -> 文本/视觉再输出”的闭环。这个设计非常巧妙：

1. 利用了现有生态 ：它没有要求AI模型去学习全新的、复杂的图形输出协议，而是让AI继续输出它最擅长的、标准化的文本代码（如Mermaid, HTML）。渲染和展示的脏活累活，交给本地一个专门的应用（Snip）来完成。
2. 标准化了反馈通道 ：用户的批注（图形、箭头、文字）被Snip捕获并转化为结构化的空间数据（坐标、类型、内容），再通过CLI或MCP以JSON格式返回给AI。这为AI理解视觉反馈提供了一个清晰、可靠的接口。
3. 实现了状态持久化 ：每一次渲染、每一次批注、每一次保存的截图，都被Snip本地化管理起来，形成了一个可搜索的“视觉知识库”。这为后续的语义搜索、自动归类等功能打下了基础。

2.2 技术架构：本地优先与模块化

Snip的技术选型深刻体现了其“本地优先、隐私至上、模块化”的设计哲学。

1. 应用本体（Electron + Fabric.js） Snip是一个跨平台的桌面应用，基于Electron构建。这意味着它可以用Web技术（HTML/CSS/JS）开发，同时拥有访问系统原生API（如菜单栏、全局快捷键、文件系统）的能力。其标注画布的核心是Fabric.js，一个功能强大的Canvas库，能够高效处理矢量图形的绘制、变换和事件交互，为流畅的标注体验提供了保障。

2. 视觉渲染引擎（Mermaid.js + 浏览器内核） 对于Mermaid图表的渲染，Snip直接集成了Mermaid.js库。对于HTML预览，它则利用了Electron内置的Chromium浏览器内核来渲染。这两种方式都完全在本地运行，无需连接任何外部服务。

3. 本地AI能力栈（Ollama + Transformers.js + SlimSAM） 这是Snip区别于其他纯标注工具的“智能大脑”。

• Ollama ：负责运行本地的视觉语言模型（VLM）。当你保存一张截图时，Snip可以调用本地的Ollama服务，让VLM“看”懂截图内容，并自动生成描述、分类和标签。这实现了“语义搜索”功能——你可以用自然语言（如“上周那个登录页面的错误弹窗”）来查找截图，而不仅仅是文件名。
• Transformers.js ：一个在浏览器或Node.js中直接运行Transformer模型的库。可能用于一些轻量级的、对延迟要求高的AI任务，比如文本提取（OCR）的预处理或简单的图像理解。
• SlimSAM ：一个轻量化的图像分割模型（ONNX格式）。这为“AI抠图”功能提供了支持，在标注时能智能地选中图中的某个物体（如一个按钮、一个图标），极大地提升了标注精度和效率。

注意 ：这套本地AI栈是可选的。即使你不安装Ollama，Snip的核心截图、标注、图表渲染功能也完全可用。AI组织功能只是锦上添花，这降低了用户的使用门槛。

4. 通信桥梁（CLI + MCP Server）

• CLI ：是Snip与AI编程助手（有Shell权限）通信的主通道。它是一个标准的Node.js可执行文件，通过 stdin 接收数据，通过 stdout 输出JSON结果，完美契合自动化脚本的调用模式。
• MCP服务器 ：是Snip与AI助手（无Shell权限）通信的备用通道。MCP是一种新兴的协议，允许AI工具以更安全、受控的方式调用外部工具。Snip提供MCP服务器，确保了在更封闭的环境（如某些云端IDE或安全策略严格的桌面客户端）中也能使用其核心功能。

3. 详细安装与配置指南

3.1 macOS系统安装（推荐Homebrew）

对于macOS用户，最优雅的安装方式无疑是使用Homebrew。

# 添加第三方仓库并安装Snip
brew install --cask rixinhahaha/snip/snip

这条命令做了以下几件事：

1. rixinhahaha/snip 是一个托管在Homebrew上的第三方“Tap”（软件仓库）。Homebrew会先定位到这个仓库。
2. snip 是这个仓库中的一个“Cask”（表示它是一个需要图形界面的应用程序，而非纯命令行工具）。
3. --cask 参数明确告诉Homebrew安装的是一个应用程序包。
4. 执行后，Homebrew会自动下载最新的Snip .dmg 文件，挂载，将应用程序拖拽到你的 /Applications 文件夹，并完成清理。

安装后首次运行 ：你可能会遇到macOS的“安全性与隐私”拦截，提示来自未识别的开发者。这是因为开源项目通常没有购买昂贵的苹果开发者证书进行签名。你需要：

1. 前往 系统设置 > 隐私与安全性 。
2. 在“安全性”部分，你会看到关于Snip的阻止信息。
3. 点击“仍要打开”，并输入系统密码确认。
4. 之后，Snip就可以正常启动了。启动后，你会看到菜单栏右上角出现Snip的图标。

3.2 Linux系统安装

Linux提供了两种安装方式，适应不同发行版和用户习惯。

1. AppImage（通用便携式） AppImage是一个将应用及其所有依赖打包成的单一可执行文件，几乎可以在任何现代Linux发行版上运行。

• 优点 ：无需安装，不污染系统目录，双击即可运行。非常适合想快速尝鲜或没有root权限的用户。
• 操作 ：

  # 1. 从GitHub Releases页面下载最新的 `Snip-x.y.z-x86_64.AppImage` 文件。
  # 2. 赋予其可执行权限。
  chmod +x Snip-*-x86_64.AppImage
  # 3. 双击运行，或通过命令行启动。
  ./Snip-*-x86_64.AppImage
  

2. DEB包（Ubuntu/Debian及其衍生版） DEB是Debian系Linux的标准软件包格式。

• 优点 ：与系统包管理器集成，可以方便地更新、卸载。通常会创建标准的桌面启动器图标。
• 操作 ：

  # 1. 下载最新的 `Snip-x.y.z-amd64.deb` 文件。
  # 2. 使用dpkg或apt安装。
  sudo dpkg -i Snip-*-amd64.deb
  # 如果提示依赖问题，运行以下命令修复。
  sudo apt-get install -f
  

Linux环境注意事项 ：

• 显示服务器 ：Snip要求运行在Wayland显示服务器下，这是现代Linux发行版的趋势（如Ubuntu 23.10+默认使用Wayland）。如果你在使用旧的X11，可能需要切换会话或等待Snip未来对X11的支持。
• 全局快捷键 ：在Linux上，全局快捷键（如 Ctrl+Shift+2 ）的捕获依赖于桌面环境。在GNOME、KDE等主流环境下通常工作良好，但在一些定制化较强的窗口管理器（如i3, sway）中可能需要额外配置。

3.3 核心集成： snip setup 详解

安装好Snip应用并运行后，最关键的一步是将其与你的AI编程助手集成。 snip setup 命令就是这个“一键集成”的魔法。

这个命令到底做了什么？ 以Claude Code为例，当你运行 snip setup 时，它会在后台执行一系列配置操作：

1. 定位Claude Code配置目录 ：通常位于 ~/.cursor 或 ~/.claude-code 。
2. 写入自定义规则 ：在Claude Code的规则配置中，添加一条或多条规则，其核心逻辑是：“当用户请求图表，或对话上下文适合展示图表时，优先使用 snip render 命令输出可视化结果，而不是纯文本代码。”
3. 配置技能 ：可能会注册一个 /diagram 技能（slash command），让用户可以手动触发图表渲染。
4. 设置权限 ：确保Claude Code有权限执行 snip 这个命令行工具。

实操验证 ： 运行 snip setup 后，你可以打开Claude Code，尝试输入：“请为我设计一个用户登录系统的序列图。” 观察Claude Code的回复。理想情况下，你不会再看到大段的Mermaid代码，而会看到一个命令行调用，紧接着Snip窗口弹出，展示渲染好的序列图。

提示 ： snip setup 理论上也会尝试为Cursor、Windsurf、Cline进行类似配置，但集成深度可能因不同工具的扩展机制而异。最可靠的集成目前仍是与Claude Code。

4. 核心功能实操与使用技巧

4.1 与AI编程助手的视觉协作流程

让我们通过一个完整的场景，看看Snip如何融入你的AI编程工作流。

场景 ：你正在设计一个微服务架构，让Claude Code帮你绘制架构图。

1. AI生成与调用 ：你向Claude Code描述需求：“为我们电商系统的微服务架构画一个Mermaid流程图，包含API Gateway, UserService, OrderService, ProductService和数据库。”
2. 视觉渲染 ：Claude Code不再回复代码块，而是执行类似下面的命令：

   snip render --format mermaid << 'EOF'
   graph TD
       A[Client] --> B[API Gateway]
       B --> C[UserService]
       B --> D[OrderService]
       B --> E[ProductService]
       C --> F[(User DB)]
       D --> G[(Order DB)]
       E --> H[(Product DB)]
   EOF
   

   瞬间，Snip应用会弹出一个窗口，里面是渲染好的、清晰美观的架构图。
3. 视觉审阅与批注 ：你发现 OrderService 和 ProductService 之间缺少一个表示“验证库存”的调用关系。
   • 你在Snip窗口中，选择“箭头”工具，从 OrderService 框拉一个箭头指向 ProductService 框。
   • 然后选择“文字”工具，在箭头旁点击，输入“check inventory”。
   • 最后，点击窗口右下角的“Approve with Changes”按钮（或按 Cmd+Enter ）。
4. 结构化反馈 ：Snip会将你的批注（一个箭头图形及其坐标、一个文字对象及其内容和坐标）连同图表本身，打包成一个结构化的JSON反馈给Claude Code。反馈中会包含 status: "changes_requested" 以及具体的 edited 数据。
5. AI迭代 ：Claude Code“看到”这个JSON反馈，理解了你指出的缺失关系，它会修改之前的Mermaid代码，重新调用 snip render ，生成更新后的图表。如此循环，直到你点击“Approve”。

这个流程的关键优势 在于，反馈是 空间化 和 意图明确 的。你不需要用文字费力描述“在第三个框和第四个框之间加个箭头”，你直接画出来，AI直接理解。

4.2 独立作为智能截图与标注工具

即使不与AI协作，Snip本身也是一个极其强大的生产力工具。

1. 智能截图与全局快捷键

• Cmd+Shift+2 ：这是核心截图快捷键。按下后，屏幕变暗，进入区域选择模式。你可以拖动鼠标选择任意区域，或点击某个窗口来精准捕获该窗口。松开鼠标后，截图内容直接进入Snip的标注编辑器。
• Cmd+Shift+1 （快速截图）：这个快捷键的设计非常高效。按下后直接进入区域选择，但 松开鼠标的瞬间，截图就直接复制到系统剪贴板 ，同时Snip界面自动关闭。适用于你需要快速截图并粘贴到聊天窗口、文档中的场景，无需进入编辑环节。
• 操作心得 ：我习惯将 Cmd+Shift+2 用于需要标注说明的截图（如报错信息、UI设计反馈），而 Cmd+Shift+1 用于临时性的、快速的信息传递。这个区分让工作流非常清晰。

2. 丰富的标注工具集 Snip的标注工具栏设计得很专业：

• 选择(V) / 裁剪(C) ：基础工具。
• 矩形(R) / 椭圆 ：用于高亮重点区域。
• 箭头(A) ：指示关系，必备。
• 文字(T) ：添加说明。
• 标签(G) ：可以添加预定义或自定义的标签（如“Bug”、“TODO”、“Review”），方便后续筛选。
• 模糊画笔(B) ：用于涂抹敏感信息（如密码、个人头像），隐私保护利器。
• AI智能选区(S) ：基于SlimSAM模型。点击后，在你想抠出的物体（如一个图标、一个人物）周围粗略画个圈，AI会智能地识别并精确选中该物体。你可以将其删除（打码）或单独移动，精度远超手动多边形套索。

3. 保存、组织与语义搜索 完成标注后，按 Cmd+S 保存。这里开始展现Snip的“智能”：

• 本地AI组织 ：如果你配置了本地的Ollama（并运行了支持视觉的模型，如 llava 、 bakllava ），Snip会在后台将截图发送给模型，让AI自动生成一段文字描述，并根据描述智能地归类（如“文档”、“代码错误”、“UI设计”、“图表”），同时提取关键词作为标签。
• 语义搜索 ：按 Cmd+Shift+S 打开搜索框。你可以输入自然语言进行搜索。例如，搜索“昨天下午的API 500错误截图”，即使你保存时文件名叫 IMG_1234.png ，Snip也能通过AI生成的理解帮你找到它。这彻底改变了截图管理的方式，从“靠记忆翻文件夹”变成了“用语言描述直接找”。

4.3 命令行接口的深度使用

Snip的CLI是其自动化能力的基石。除了AI助手调用，你也可以在脚本或终端里直接使用。

# 1. 手动渲染一个Mermaid文件
cat my-diagram.mmd | snip render --format mermaid
# 这会打开Snip窗口显示my-diagram.mmd的内容渲染出的图。

# 2. 审阅任意图片并预设提示信息
snip open bug-report.png --message "请检查弹窗按钮的样式是否正确？"
# 打开图片时，右侧会显示你预设的这条消息，引导审阅者关注重点。

# 3. 从截图库中搜索
snip search "login button color"
# 返回所有AI描述中包含“登录”、“按钮”、“颜色”等语义的截图列表。

# 4. 获取截图元数据
snip get ~/Pictures/Snip/2024-01-01_123456.png
# 返回一个JSON，包含该截图的路径、创建时间、AI描述、分类、标签等。

# 5. 对已有截图进行AI组织（如果你后来才安装了Ollama）
snip organize ~/Pictures/Snip/old-screenshot.png
# 将该截图加入处理队列，由后台AI为其生成描述和分类。

阻塞式交互与自动化 ： snip render 和 snip open 命令是“阻塞式”的。这意味着你的Shell脚本或AI助手会在执行这行命令后暂停，一直等待你在Snip图形界面中完成审阅（点击Approve或Reject）后，才会收到JSON结果并继续执行。这对于需要确认的自动化流程至关重要。

5. MCP服务器：为无Shell环境架设桥梁

MCP（Model Context Protocol）正逐渐成为AI应用与外部工具交互的新标准。它解决了在沙盒环境或桌面客户端中，AI无法直接执行Shell命令的安全和权限问题。

何时需要MCP服务器？ 当你使用的AI编程环境是 Claude Desktop （官方独立应用）或者某些 云端IDE （其AI助手运行在远程容器中，无法访问你本地 /usr/local/bin 下的命令）时，就需要通过MCP来连接Snip。

配置示例 （以Claude Desktop为例）： 你需要找到Claude Desktop的MCP配置文件（通常在 ~/Library/Application Support/Claude/claude_desktop_config.json 或类似路径）。

{
  "mcpServers": {
    "snip": {
      "command": "node",
      "args": ["/usr/local/lib/snip/src/mcp/server.js"]
      // 注意：实际路径可能因安装方式不同而变化。
      // 一个更可靠的方法是使用 `which snip` 找到snip命令的路径，
      // 然后在其安装目录附近寻找MCP服务器文件。
    }
  }
}

配置关键点 ：

1. 找到server.js ：你需要定位Snip安装后，其MCP服务器脚本的实际位置。对于Homebrew安装的Cask应用，它可能在 /Applications/Snip.app/Contents/Resources/app/... 目录深处。最准确的方法是查看Snip项目的GitHub仓库源码结构，或在其安装目录中搜索 server.js 。
2. 重启Claude Desktop ：修改配置后，必须完全重启Claude Desktop客户端，新的MCP服务器才会被加载。
3. 验证连接 ：重启后，在Claude Desktop中，你应该能通过自然语言调用Snip的功能，例如“帮我把这段HTML代码渲染成预览图”，Claude会通过MCP协议调用Snip服务器，完成渲染。

注意 ：MCP模式下的功能可能略有延迟，因为多了一层进程间通信。但对于无法使用CLI的环境，这是唯一的集成方式。Snip同时提供CLI和MCP两种接口，体现了其设计的完备性。

6. 开发环境搭建与项目导读

对于开发者，尤其是对Electron、AI集成或工具开发感兴趣的，Snip的代码库是一个很好的学习案例。

6.1 环境准备与启动

# 克隆项目
git clone https://github.com/rixinhahaha/snip.git
cd snip

# 安装依赖
npm install

# 编译原生模块（macOS必需步骤）
npm run rebuild
# 这个命令会针对你当前系统的Electron版本，重新编译那些需要原生绑定的Node模块（如某些图像处理库）。

# 启动开发版本
npm start

启动后，你会看到系统菜单栏出现了Snip的图标（通常是一个剪刀或十字准星图案），这意味着开发版应用已经成功运行。

环境要求解读 ：

• macOS 14+ / Linux (Wayland) ：较高的系统版本要求主要源于其对最新图形API和安全特性的依赖。Linux明确要求Wayland，是因为其屏幕截图和全局快捷键在现代Wayland合成器下才有稳定可靠的实现方式。
• Node.js 18+ ：确保了对现代ES模块和API的支持。

6.2 项目结构深度解析

Snip的文档非常完善， docs/ 目录下的文件是理解其设计精髓的钥匙。

1. docs/ARCHITECTURE.md ：必读。它清晰地描绘了Snip的多进程架构。

   • 主进程 ：负责窗口管理、菜单、全局快捷键、系统托盘图标以及作为CLI/MCP服务器的入口。它是应用的“骨架”和“神经系统”。
   • 渲染进程 ：每个Snip编辑器窗口（截图标注窗口、图表预览窗口）都是一个独立的渲染进程，负责UI展示和用户交互。它们通过Electron的IPC（进程间通信）与主进程对话。
   • 数据流 ：详细说明了从快捷键触发截图，到图片传递至渲染进程，再到标注数据保存和AI处理的完整数据流向。理解这个对于调试或添加新功能至关重要。

2. docs/DEVOPS.md ：如果你好奇一个Electron应用如何打包、签名、发布到多平台，这份文档提供了答案。它涵盖了从代码构建成可分发安装包（DMG, AppImage, DEB）的完整流水线，包括如何处理macOS的代码签名和公证（Notarization），这对于解决macOS Gatekeeper警告至关重要。

3. docs/USER_FLOWS.md ：这是从用户视角梳理的核心交互流程和测试用例。它几乎等同于产品的“功能规格说明书”，对于理解每一个功能的边界情况（例如，在标注时按ESC、在AI处理中途关闭应用等）非常有帮助。

技术栈亮点 ：

• Electron 33 ：使用了较新的Electron版本，平衡了特性与稳定性。
• Fabric.js 7 ：强大的Canvas操作库，是复杂标注功能的基础。
• 本地AI集成 ：将Ollama、Transformers.js、ONNX运行时等本地AI生态整合进桌面应用，是一个典型的“端侧智能”实践案例，对隐私和数据安全要求高的场景有很强的参考价值。

7. 常见问题与故障排查实录

在实际使用和整合Snip的过程中，你可能会遇到以下问题。这里记录了我踩过的坑和解决方案。

7.1 安装与启动问题

Q1: macOS提示“无法打开‘Snip’，因为无法验证开发者”。

• 原因 ：Snip是开源项目，未使用苹果付费的开发者证书进行签名。
• 解决 ：
  1. 首次在 应用程序 文件夹中双击时，如果弹出此警告，请关闭窗口。
  2. 打开 系统设置 > 隐私与安全性 ，滚动到下方“安全性”部分。
  3. 你会看到关于Snip的阻止信息，旁边有“仍要打开”按钮。点击它，输入密码即可。
  4. 之后，该应用就会被加入例外列表，可以正常打开。

Q2: 运行 snip setup 后，Claude Code没有变化，还是输出代码文本。

• 排查步骤 ：
  1. 确认Snip应用已运行 ：检查菜单栏是否有Snip图标。CLI命令需要后台应用进程作为服务端。
  2. 检查Claude Code版本 ：确保你使用的是支持自定义规则和技能的最新版Claude Code。
  3. 手动验证CLI ：在终端直接运行 snip render --format mermaid ，然后输入一小段Mermaid代码（如 graph TD; A-->B ），按 Ctrl+D 结束输入。看是否能弹出Snip渲染窗口。如果不能，说明CLI或应用本身有问题。
  4. 查看Claude Code配置 ：到Claude Code的设置中，查找“Rules”或“Skills”部分，看是否多了与Snip相关的条目。如果没有，可能是 snip setup 没有写入权限。尝试以管理员/root权限运行，或手动检查配置目录的权限。

Q3: Linux下全局快捷键失效。

• 原因 ：在Wayland下，全局快捷键的捕获需要特定的门户（Portal）权限，或者与桌面环境深度集成。
• 解决 ：
  1. 确保Snip应用在运行。
  2. 检查桌面环境（如GNOME）的“键盘快捷键”设置，看是否有冲突的快捷键。
  3. 尝试在终端用 snip & 启动应用，观察终端是否有权限错误输出。
  4. 查阅Snip的GitHub Issues，看是否有针对你特定发行版和桌面环境的解决方案。社区通常会有针对KDE、GNOME等环境的额外配置说明。

7.2 功能使用问题

Q4: AI语义搜索和自动组织功能不工作。

• 原因 ：这两个功能依赖于本地的Ollama服务和一个视觉语言模型（VLM）。
• 排查 ：
  1. 安装并启动Ollama ：访问 ollama.com 下载安装，并在终端运行 ollama serve 确保服务在后台运行。
  2. 拉取视觉模型 ：运行 ollama pull llava 或 ollama pull bakllava 来下载一个支持图像理解的模型。这个过程可能需要较长时间和一定磁盘空间。
  3. 配置Snip ：在Snip的设置界面（通常点击菜单栏图标可进入），找到“AI”或“Advanced”选项卡，确认其Ollama服务器地址（默认是 http://localhost:11434 ）是否正确，并测试连接。
  4. 观察日志 ：保存截图时，查看Snip的日志输出（如果开发版或提供了日志查看功能），看是否有调用Ollama的错误信息。

Q5: snip render 命令渲染出的图表样式不符合预期或布局错乱。

• 原因 ：Mermaid图表在不同渲染环境（浏览器版本、CSS样式）下可能有细微差异。Snip内置了特定版本的Mermaid.js和一套默认主题。
• 解决 ：
  1. 检查Mermaid语法 ：首先确保你输入的Mermaid代码语法正确。可以先将代码复制到 Mermaid Live Editor 在线验证。
  2. 使用主题指令 ：在Mermaid代码开头，尝试通过 %%{init: {'theme': 'dark'}}%% 这样的指令来明确指定主题，覆盖Snip的默认设置。
  3. 简化复杂图表 ：对于极其复杂的图表，考虑拆分成多个简单的子图分别渲染。本地渲染虽然快，但资源并非无限。

7.3 开发与贡献问题

Q6: 在开发模式下运行 npm start 报错，提示原生模块版本不匹配。

• 原因 ：你系统全局安装的Node.js版本与项目使用的Electron版本不匹配，导致为Node.js编译的原生模块无法在Electron中运行。
• 解决 ：这就是为什么项目提供了 npm run rebuild 脚本。这个脚本会使用 electron-rebuild 工具，根据项目 package.json 中定义的Electron版本，重新编译所有原生依赖模块。确保在 npm install 之后执行一次此命令。

Q7: 想添加一个新的标注工具（例如，高亮笔）。

• 路径指引 ：根据 ARCHITECTURE.md ，标注工具的逻辑主要在渲染进程中。
  1. 首先在 src/renderer/components/Toolbar 相关的UI组件中添加新工具的按钮图标。
  2. 然后在 src/renderer/state 或 src/renderer/canvas 相关的状态管理和画布操作逻辑中，添加新工具对应的绘制模式和行为（例如，监听鼠标移动，在画布上绘制半透明色块）。
  3. 最后，需要更新序列化/反序列化逻辑（在 src/common 或类似位置），确保新工具创建的图形对象能被正确保存和加载。
  4. 建议 ：先阅读现有工具（如矩形、箭头）的实现代码，依葫芦画瓢是最快的方式。