夜雨聆风Obsidian Excalidraw 插件详解：让笔记从此能「画」
如果你用 Obsidian 有一段时间了，多半遇到过这样的场景——脑子里有个架构图、流程图、思维导图，纯文字怎么写都觉得差点意思。截图贴进来？不够灵活。用外部工具画好再导出？又和笔记脱了节。
Excalidraw 插件就是来填这个坑的。它把一个功能完备的手绘风绘图工具直接塞进了 Obsidian，画完的图天然就是笔记库的一部分，还能和你的笔记互链。
今天就从头到尾拆一遍：装、设、用、玩。
一、为什么选 Excalidraw？
Obsidian 自带 Canvas（白板）功能，但它偏"排版"——摆卡片、连线条，画图能力有限。Excalidraw 的差异在于：
.canvas 文件 | .md 文件（二合一） | |
简单说：Canvas 管排版，Excalidraw 管画图。两者互补，不冲突。
二、安装
2.1 社区插件市场安装（推荐）
打开 Obsidian → 设置 → 第三方插件 关闭「安全模式」（首次安装社区插件需关闭） 点击「浏览」，搜索 Excalidraw 找到 Zsolt Viczian 开发的官方插件 → 安装 → 启用 左侧工具栏出现 Excalidraw 图标 ✅
2.2 手动安装（网络受限时）
从 GitHub 下载 Release 包，将 main.js、manifest.json、styles.css 三个文件复制到 .obsidian/plugins/obsidian-excalidraw-plugin/ 目录下，重启 Obsidian 即可。
三、核心设置详解
装完之后别急着画，先调好几个关键设置，后面用起来顺手得多。
进入 设置 → Excalidraw，重点看这几个区域：
3.1 基本设置
Drawing/ | ||
Templates/Excalidraw/ | ||
3.2 保存与导出
开启自动导出后，每次保存绘图都会自动在同目录下生成一份 SVG 或 PNG 图片，方便在其他 Markdown 笔记中用 ![[图片名.svg]] 嵌入。
3.3 显示设置
左手模式：左撇子友好，工具栏移到右侧 - 主题：可跟随 Obsidian 主题或单独设置
缩放：鼠标滚轮缩放速度可调
3.4 嵌入与导出
这个区域控制绘图嵌入 Markdown 时的表现：
嵌入类型：选 SVG（矢量清晰）或 PNG 默认宽度：如 500px 支持明暗模式各导出一版
四、创建第一个绘图
4.1 三种创建方式
命令面板： Ctrl/Cmd + P→ 输入「新建绘图」→ 回车侧边栏图标：点击左侧工具栏的 Excalidraw 图标 快捷键：在快捷键设置中为「新建 Excalidraw 绘图」绑定快捷键
4.2 工具速查
工具栏每个工具下方标有数字，按数字键即可切换，零鼠标操作：
4.3 高效操作速查
Shift | |
Alt + 拖动 | |
Shift 临时关闭吸附 | |
空格 | |
Ctrl/Cmd | |
Shift + 1 | |
A | |
Ctrl/Cmd + Z | |
TabShift + Tab | |
五、与 Obsidian 笔记的深度联动
这是 Excalidraw 碾压外部绘图工具的核心优势——画出来的图和你的笔记是"活的"。
5.1 双向链接
在绘图文本框中直接写 Obsidian 链接语法：
[[我的笔记]] → 链接到笔记 [[笔记#标题]] → 链接到章节 [[笔记#^blockid]] → 链接到块
5.2 在笔记中嵌入绘图
Markdown 笔记中写：
![[我的绘图.excalidraw]] → 嵌入完整绘图 ![[我的绘图.excalidraw|400]] → 指定宽度 400px ![[我的绘图.excalidraw|400x300]] → 指定宽高 ![[我的绘图.excalidraw|right-wrap]] → 右对齐文字环绕
5.3 拖拽即用
从文件树拖 .md 文件到画布 → 生成笔记预览卡片 从文件树拖 图片到画布 → 直接显示 从浏览器拖 链接到画布 → 生成可点击链接 从浏览器拖 YouTube 链接 → 带缩略图的视频链接
六、「二合一」文件模式：文字+画板同文件
这是 Excalidraw 最被低估的能力。
默认新建的绘图是独立的 .excalidraw 文件，但配置后可以让画板数据直接嵌入 .md 文件——同一个文件，按快捷键在文字和画板之间丝滑切换。
6.1 为什么要二合一？
文字和图形在同一个文件里，不用两头找 Git 版本控制友好，一个文件追踪到底 画板中的文字也能被搜索到 反向链接正常工作
6.2 配置步骤（5 步搞定）
第一步：创建模板文件
在模板文件夹下新建 Excalidraw模板.md，内容如下：
---excalidraw-plugin: parsedexcalidraw-open-md: true---%%## Drawing```compressed-jsonN4IgLgngDgpiBcIYA8DGBDANgSwCYCd0B3EAGhADcZ8BnbAewDsEAmcm+gV31TkQAswYKDXgB6MSgw4CxAHSp6AWzJJMMJTEZgaCANoBdcuihQAymHRg+oCthhEAQulQBrAOb4ujXAGF6mPT4CCAAxABmkVGqnnhm2ABefIycmJgAvuTh2Oq68MDp6UA
第二步：设置模板路径进入 设置 → Excalidraw → 找到「Template file」→ 填入模板路径（如 `Templates/Excalidraw模板`） 第三步：关闭自动加日期 在设置中找到「New file auto-prefix date」并关闭 第四步：绑定模式切换快捷键设置 → 快捷键 → 搜索「Excalidraw」→ 找到「在 Excalidraw 和 Markdown 模式之间切换」→ 绑定快捷键（推荐 `Ctrl/Cmd + Shift + E`） 第五步：享受丝滑切换在二合一文件中按快捷键，Markdown ↔ 画板自由切换，像翻卡片的正反面。⚠️ 文件末尾 `compressed-json` 部分是画板数据，切勿手动修改或删除，否则画板内容会丢失！  --- 七、进阶玩法 7.1 思维导图 插入矩形文本框 → 点击文本框 → 按住 `Ctrl` + 方向键 → 自动生成下级节点和连接线。比 XMind 快，还自带双向链接。7.2 LaTeX 公式 命令面板 → 「Insert LaTeX formula」→ 输入公式 → 渲染显示。`Ctrl/Cmd + 点击` 可编辑。 7.3 素材库 - 保存个人素材：选中图形 → 右上角素材库按钮 → 保存 - 浏览公共素材库：素材库面板底部 → 浏览 → 一键添加 AWS、K8s 等图标库 - 复用常用组件，不用每次重新画 7.4 脚本自动化（ExcalidrawAutomate） 通过 JavaScript 脚本自动创建图形，支持 Templater、QuickAdd、DataviewJS 调用： ```const ea = ExcalidrawAutomate; ea.reset();ea.addRect(-150, -50, 450, 300);ea.addText(-100, 70, "流程节点");ea.addArrow([[-100, 100], [100, 100]]); await ea.create();```
适合批量生成架构图、数据驱动的图表等场景。
7.5 自定义调色板
切换到 Markdown 视图 → 找到 AppState → 编辑 colorPalette，可以自定义三组颜色：
canvasBackground：画布背景色 elementBackground：元素填充色 elementStroke：元素描边色
用 HTML 色值（如 #FF6B6B），打造个人专属配色。
八、常见问题
.ttf 字体文件复制到插件目录 | |
Shift 禁用吸附，或开启网格辅助 | |
Ctrl/Cmd + G）管理，分层绘制 | |
九、设置速查表
Drawing/ | ||
Templates/Excalidraw/ | ||
Ctrl+Shift+E | ||
写在最后
Excalidraw 不是"画图工具"那么简单，它更像是给 Obsidian 装上了一块视觉思维的画布。当你的笔记不再只有文字，当你能用一张图说清一个架构、一个流程、一个想法——你会发现，知识管理的方式变了。
最关键的是：它免费、开源、100% 本地运行，你的数据永远在你自己手里。
装上，画一张，你就懂了。
