obsidian-插件-notedraw

NoteDraw —— 给你的笔记贴一层透明画布

插件地址：https://github.com/arias007/notedraw作者：arias007最新版本：v3.1.34（2026 年 6 月）许可证：MIT

你有没有过这种时刻——读完一篇技术文档，想在某段旁边画个圈、拉个箭头、写句批注，结果发现 Obsidian 根本没这个功能。你只能切到 Excalidraw 画一张图再贴回来，或者截图→画图工具→标注→保存→粘贴，一套流程走下来，灵感早凉了。

NoteDraw 干的事很直接：在你的笔记上面加一层透明的绘图画布。你在上面随便画，底下的 Markdown 内容纹丝不动。画归画，字归字，互不污染。

基础介绍

是什么

NoteDraw 是一个给 Obsidian 笔记"贴膜"的插件。它在阅读视图、编辑视图、嵌入预览的笔记上覆盖一层透明的绘图层，你可以在上面自由写画。所有绘图数据以 JSON 格式独立存在 .obsidian/plugins/notedraw/drawings/ 目录下，你的 .md 文件一点都不受影响。

它跟 Excalidraw 的区别在哪？Excalidraw 是一张独立的画布，你得专门打开它。NoteDraw 是长在笔记上的——你读笔记的同时就在画，不需要切换上下文。

核心能力

钢笔 + 水彩笔双笔刷——钢笔适合画线、画箭头、做批注；水彩笔带晕染效果，适合大面积标注和高亮。两种笔都能独立配置默认颜色、粗细、透明度
形状工具——矩形、直线、箭头，框选重点、画关系线、做指向标注
浮动文本——在画布任意位置写文字，支持加粗、斜体、下划线、盒子文本样式，双击就能再编辑
选择与编辑——选中已画的笔画，支持多选、移动、缩放、删除
嵌入笔记独立绘图——在 ![[笔记]] 嵌入预览上画的线，不会出现在原笔记里。A 引用了 B，标注不会把 B 画花
公开 API——暴露 readDrawings()、writeDrawings()、insertStroke() 等方法，其他插件和 AI 智能体也能在你的笔记上写写画画
controller-per-surface 架构——每个笔记表面绑定独立控制器，阅读视图、编辑视图、Web 视图各自管理自己的绘图数据，互不串扰

使用场景

场景一：文献批注

读论文、技术文档的时候，直接在段落旁边画圈、拉箭头、写批注。比高亮插件自由得多——高亮只能画一道颜色，你能画任意形状。一个经典操作：用水彩笔给关键段落涂底色，用钢笔画箭头指向你写的批注文本，三秒完成一个"人工标注系统"。

场景二：备课和演示

把讲义写进笔记，上课时投影到屏幕上，边讲边画。圈重点、画示意图、写板书备注——学生看到的不只是一篇静态笔记，而是一张"活的讲义"。讲完了把绘图数据一删，笔记恢复如初，下次换一批学生还能重新画。

场景三：设计评审

设计师把截图嵌入笔记，用矩形框出问题区域，用箭头指向修改意见，用文本工具写上具体的改动说明。一套标注流程全在 Obsidian 里完成，不用切任何外部工具。评审完了，标注数据跟笔记一起归档，以后复盘清清楚楚。

场景四：AI 辅助标注

NoteDraw 是目前对 AI 最友好的 Obsidian 绘图插件。它的 API 接受纯 JSON，本地 AI 智能体（Claude Code、Gemini CLI）可以直接调用——比如让 Claude 读一篇笔记，自动在关键段落旁边画高亮、写摘要。等于是把"AI 读懂了什么"直接画在笔记上，肉眼可见。

基本使用

安装

社区插件市场暂时没上架，手动安装三步走：

从 GitHub Releases: https://github.com/arias007/notedraw/releases 下载 main.js、manifest.json、styles.css 三个文件
丢进 <vault>/.obsidian/plugins/notedraw/（没有就新建这个目录）
设置 → 第三方插件 → 已安装插件 → 启用 NoteDraw

使用

打开任意一篇笔记，点击工具栏上 NoteDraw 的魔杖图标，绘图工具栏出现在笔记顶部下方。

八个工具按钮排成一排，圆形触控友好：

钢笔：自由绘制线条，按住就画
水彩笔：大面积涂抹标注，半透明晕染效果
选择：点击选中笔画，拖拽移动，拉手柄缩放，按删除键删掉
矩形：拖拽画框
线条/箭头：拖拽画直线或箭头
文本：点击画布任意位置插入浮动文字
调色板：预设色块点一下就用，也能打开高级取色器自己调
撤销/重做：画错了不用慌

一个细节：钢笔和水彩笔的按钮底色会显示当前画笔的颜色——你不用点开调色板就知道现在画出来是什么色。

💡 建议在阅读视图下使用。编辑视图也能用，但绘图图层覆盖在渲染内容上，阅读视图体验更好。

设置选项

插件设置没有复杂的概念，都是实打实的参数：

分类	可配什么
画笔默认值	钢笔和水彩笔各自的默认颜色、粗细、透明度
界面	语言、工具栏顶部偏移量
交互	长按延迟、点击容差、选中元素内边距和透明度
笔画处理	平滑度、输入采样、保存压缩、自动保存延迟
调试	文本定位调试日志开关
重置	画笔默认值一键恢复、布局/交互默认值一键恢复

大部分用户改一下画笔默认颜色就够了——把钢笔设成红色细线做批注，水彩笔设成黄色半透明做高亮，切工具时不用每次调参。

进阶使用

数据存储策略

所有绘图数据存在 <vault>/.obsidian/plugins/notedraw/drawings/ 下，每个笔记对应一个 JSON 文件，文件名由笔记的 vault 路径映射而来。

三个实际影响：

.md 文件干干净净，没被任何绘图代码污染——git diff 依然只显示你改的内容
可以 .gitignore 掉整个 drawings/ 目录，绘图数据不进入版本控制
多设备同步时，要不要同步绘图数据你自己定——Obsidian Sync 用户可以把 drawings/ 排除在外，不同设备的标注互不干扰

嵌入笔记的绘图隔离

在 ![[某篇笔记]] 的嵌入预览里画的线，存的是被嵌入笔记的路径——但不是存到原笔记上，而是一个独立的绘图文件。结果就是：你在 A 笔记的嵌入视图里给 B 笔记画了标注，回到 B 笔记本身是看不到这些标注的。这个设计防止了"引用了别人笔记，标注把人家画花了"。

旧版数据迁移

如果用过早期的 NoteDraw 原型（插件 ID 不同），升级到当前版本后第一次打开笔记时，NoteDraw 会自动检测旧绘图 JSON 文件，拷贝到新的 notedraw/drawings/ 目录。旧文件不会被删除，放心升。

公开 API：让代码和 AI 也能画画

NoteDraw 最硬核的地方——它不只给你画，还给代码画。插件暴露了一套 JavaScript API，两种方式获取：

const api = app.plugins.plugins.notedraw.api;// 或者全局访问const api = window.NoteDraw;

七个核心方法：

方法	干什么的
`api.readDrawings(file)`	读取某篇笔记的绘图数据
`api.writeDrawings(file, data)`	写入某篇笔记的绘图数据
`api.insertStroke(file, stroke)`	往笔记里插入一条新笔画
`api.replaceSelectionText(file, old, new)`	替换笔记中的选中文字
`api.getStoragePaths(file)`	查文件的存储路径
`api.getActiveController()`	拿当前活跃的绘图控制器
`api.version`	获取插件版本号

实战：用 API 插入一条红色标记

DataviewJS 或 Templater 脚本里调用，往当前笔记画一条红线：

const api = app.plugins.plugins.notedraw.api;const file = app.workspace.getActiveFile();await api.insertStroke(file, {  brush: "pen",  color: "#e53935",  width: 3,  opacity: 1,  points: [    { x: 0.2, y: 0.2 },    { x: 0.5, y: 0.35 },    { x: 0.7, y: 0.6 }  ]});

⚠️ points 里的坐标是相对坐标（0~1），不是像素值。{x: 0.2, y: 0.2} = 笔记宽度 20%、高度 80% 的位置。屏幕多大、窗口怎么缩放，标记位置始终跟内容对齐。

AI 智能体的玩法

NoteDraw 的 API 刻意设计成纯 JSON 和纯字符串接口，就是给本地 AI 准备的。推荐的 AI 操作模式就三步：

先读——api.readDrawings(file) 拿当前绘图状态
准备补丁——AI 生成要新增的笔画数据
再写——api.insertStroke() 增量写入，不覆盖已有内容

比如你让 Claude Code 读一篇笔记并标注所有"问题段落"，它可以扫描文本、定位段落位置、计算坐标、调用 insertStroke 画黄色标记——整个过程不需要你碰一下鼠标。

DataviewJS 集成

遍历所有带 #review 标签的笔记，自动画一条顶部黄色高亮条：

```dataviewjsconst api = app.plugins.plugins.notedraw.api;const pages = dv.pages('#review');for (const page of pages) {const file = app.vault.getAbstractFileByPath(page.file.path);if (file) {await api.insertStroke(file, {brush: "watercolor",color: "#ffeb3b",width: 20,opacity: 0.3,points: [{ x: 0, y: 0 },{ x: 1, y: 0 },{ x: 1, y: 0.05 },{ x: 0, y: 0.05 }]});}}```

用 Dataview 筛选 + NoteDraw API 画标记，你就有了一个可编程的"自动标注引擎"。

已知限制

限制	影响
社区插件市场未上架	只能手动安装，版本更新要自己关注 GitHub Releases
没有压感支持	钢笔和水彩笔的粗细是固定的，不会随写字力度变化。手写笔记体验不如 GoodNotes 之类的专业手写软件
编辑视图体验略差	编辑模式和绘图工具栏偶尔会互相干扰，建议在阅读视图用
Web 视图支持有限	Obsidian Publish 上的绘图行为依赖于 Publish 对插件 API 的支持程度

小结

NoteDraw 解决了一个 Obsidian 拖了很久的需求：在笔记上直接写写画画。它的做法很聪明——不做画板，做图层。笔记归笔记，画归画，各存各的，互不污染。

三个要点：

画布是透明的，Markdown 是干净的——这是 NoteDraw 跟 Excalidraw、Canvas 最大的区别。你不离开笔记就能画，画完笔记还是那个笔记。JSON 存 JSON 的，md 存 md 的，一清二白
API 是它的护城河——能画图的 Obsidian 插件有好几个，但把 API 做得这么干净、让 DataviewJS 和 AI 智能体直接调用的，NoteDraw 独一份。如果你在折腾 AI + Obsidian 工作流，这个能力是别的绘图插件给不了的
轻量但不简陋——钢笔、水彩笔、形状、文本、选择编辑，日常标注需要的都有了。它不是专业绘图软件，但它是一个"刚好够用"的笔记标注工具。别指望它替代 Procreate，但它替代"截图→标注→贴回来"那套流程绰绰有余