Obsidian 学习笔记

Appearance

Excalidraw 绘图 ​

Excalidraw 是 Obsidian 中最受欢迎的绘图插件之一，让你可以在笔记中创建美观的手绘风格图表。

简介 ​

什么是 Excalidraw？ ​

Excalidraw 是一个开源的虚拟白板工具，特点是：

  • 手绘风格：自然、友好的视觉效果
  • 简单易用：直观的绘图界面
  • 功能强大：支持流程图、架构图、思维导图等
  • 深度集成：与 Obsidian 笔记无缝结合

适用场景 ​

场景示例
流程图工作流程、决策树
架构图系统架构、网络拓扑
思维导图概念梳理、头脑风暴
示意图说明文档、教程插图
草图快速记录想法、UI 原型

安装配置 ​

安装插件 ​

  1. 打开「设置 → 第三方插件」
  2. 关闭「安全模式」
  3. 点击「浏览」搜索「Excalidraw」
  4. 点击「安装」并「启用」

基本配置 ​

进入「设置 → Excalidraw」，推荐配置：

yaml
基本设置:
  默认字体: 手写风格
  主题: 跟随 Obsidian 主题
  自动保存: 开启
  
文件夹设置:
  附件文件夹: attachments/excalidraw
  模板文件夹: templates/excalidraw

基本使用 ​

创建新绘图 ​

方式操作
命令面板Ctrl/Cmd + P → 输入「Excalidraw: 新建绘图」
快捷键自定义快捷键后使用
文件浏览器右键 → 新建 Excalidraw 绘图

绘图界面 ​

┌─────────────────────────────────────────┐
│ 工具栏                                   │
│ ┌───┬───┬───┬───┬───┬───┐               │
│ │选择│矩形│菱形│椭圆│箭头│画笔│               │
│ └───┴───┴───┴───┴───┴───┘               │
├─────────────────────────────────────────┤
│                                         │
│                                         │
│              画布区域                    │
│                                         │
│                                         │
├─────────────────────────────────────────┤
│ 属性栏: 颜色 | 线条 | 填充 | 文字         │
└─────────────────────────────────────────┘

绘图工具 ​

工具快捷键功能
选择V 或 1选择、移动、调整元素
矩形R 或 2绘制矩形和正方形
菱形D 或 3绘制菱形
椭圆O 或 4绘制椭圆和圆形
箭头A 或 5绘制箭头连接
画笔P 或 6自由绘制
文字T 或 7添加文字
橡皮擦E删除元素
线条L绘制直线

常用操作 ​

绘制形状 ​

  1. 选择工具（如矩形 R）
  2. 在画布上拖动绘制
  3. 释放鼠标完成

连接元素 ​

  1. 选择箭头工具 A
  2. 从一个元素拖动到另一个元素
  3. 元素会自动吸附连接

添加文字 ​

  1. 选择文字工具 T
  2. 点击画布任意位置
  3. 输入文字内容

编辑元素 ​

  • 选中：点击元素
  • 移动：拖动元素
  • 调整大小：拖动边角手柄
  • 复制：选中后 Ctrl/Cmd + D
  • 删除：选中后 Delete

快捷键 ​

工具切换 ​

快捷键工具
V 或 1选择工具
R 或 2矩形
D 或 3菱形
O 或 4椭圆
A 或 5箭头
P 或 6画笔
T 或 7文字

编辑操作 ​

快捷键功能
Ctrl/Cmd + C复制
Ctrl/Cmd + V粘贴
Ctrl/Cmd + D快速复制
Ctrl/Cmd + Z撤销
Ctrl/Cmd + Shift + Z重做
Delete 或 Backspace删除选中
Ctrl/Cmd + A全选
Ctrl/Cmd + G组合
Ctrl/Cmd + Shift + G取消组合

视图操作 ​

快捷键功能
Space + 拖动平移画布
Ctrl/Cmd + 滚轮缩放
Ctrl/Cmd + 0重置缩放
Ctrl/Cmd + Shift + 1缩放到适应

样式操作 ​

快捷键功能
Ctrl/Cmd + ]增加线条粗细
Ctrl/Cmd + [减少线条粗细
Shift + 点击颜色快速更换颜色

高级功能 ​

链接笔记 ​

Excalidraw 支持与 Obsidian 笔记深度集成：

方法一：直接链接 ​

  1. 使用文字工具创建文字
  2. 使用 [[笔记名]] 格式输入链接
  3. 按住 Ctrl/Cmd 点击可跳转

方法二：嵌入笔记 ​

  1. 选择一个形状
  2. 在属性面板中添加「嵌入笔记」
  3. 笔记内容会显示在形状内

使用模板 ​

创建模板 ​

  1. 绘制常用图形布局
  2. 保存为 .excalidraw 文件
  3. 放入模板文件夹

使用模板 ​

  1. 打开命令面板
  2. 输入「Excalidraw: 从模板创建」
  3. 选择模板文件

导出图片 ​

格式说明
PNG位图格式，适合网页
SVG矢量格式，可无限缩放
PDF适合打印和文档

导出方法：

  1. 点击右上角菜单
  2. 选择「导出图像」
  3. 选择格式和质量

脚本功能 ​

Excalidraw 支持自定义脚本扩展功能：

javascript
// 示例：创建自定义形状
const elements = [
  {
    type: "rectangle",
    x: 100,
    y: 100,
    width: 200,
    height: 100,
    strokeColor: "#1e1e1e",
    backgroundColor: "#a5d8ff"
  }
];

与 Markdown 集成 ​

嵌入到笔记 ​

在 Markdown 笔记中嵌入 Excalidraw 绘图：

markdown
![[我的绘图.excalidraw]]

# 或者带链接文字
[查看绘图](我的绘图.excalidraw)

从绘图链接笔记 ​

在 Excalidraw 中创建指向笔记的链接：

markdown
# 在文字元素中输入
[[项目计划]]
[[读书笔记/原子习惯]]

# 带显示文字
[[项目计划|查看项目详情]]

OCR 功能 ​

Excalidraw 支持 OCR（文字识别），可以将手写文字转换为文本：

  1. 选择包含文字的元素
  2. 使用 OCR 命令
  3. 文字会被提取到剪贴板

实战案例 ​

流程图 ​

yaml
创建流程图:
  1. 使用矩形表示步骤
  2. 使用菱形表示判断
  3. 用箭头连接各个步骤
  4. 添加文字说明
  
示例: 用户登录流程
  开始 → 输入账号密码 → 验证 → [成功?] 
    ↓ 是: 进入系统
    ↓ 否: 提示错误 → 返回输入

架构图 ​

yaml
创建架构图:
  1. 使用矩形表示服务
  2. 使用椭圆表示数据存储
  3. 用箭头表示数据流向
  4. 用颜色区分不同层级
  
示例: Web 应用架构
  [客户端] → [负载均衡] → [应用服务器] → [数据库]

思维导图 ​

yaml
创建思维导图:
  1. 中心主题使用大矩形
  2. 分支使用较小矩形
  3. 用箭头或线条连接
  4. 使用颜色区分分支

配合其他插件 ​

与 Dataview 配合 ​

结合 Dataview 查询创建动态图表：

markdown
# 在 Excalidraw 中创建架构图
# 用链接指向各个组件笔记
# 使用 Dataview 显示组件状态

```dataview
TABLE status, last-updated
FROM "projects/components"
WHERE linked-from([[架构图.excalidraw]])

### 与 Templater 配合

创建包含 Excalidraw 绘图的模板：

```markdown
<%*
// 创建新的 Excalidraw 文件
const excalidrawName = tp.date.now("YYYY-MM-DD") + "-绘图";
tR += `![[${excalidrawName}.excalidraw]]`;
%>

最佳实践 ​

文件组织 ​

vault/
├── attachments/
│   └── excalidraw/
│       ├── flowcharts/     # 流程图
│       ├── architecture/   # 架构图
│       └── mindmaps/       # 思维导图
└── templates/
    └── excalidraw/
        ├── flowchart-template.excalidraw
        └── architecture-template.excalidraw

命名规范 ​

yaml
命名建议:
  流程图: flow-xxx.excalidraw
  架构图: arch-xxx.excalidraw
  思维导图: mind-xxx.excalidraw
  带日期: 2024-01-15-xxx.excalidraw

定期维护 ​

  • 定期整理过时的绘图
  • 将常用布局保存为模板
  • 保持链接的有效性

常见问题 ​

如何在手机上使用？ ​

Excalidraw 在移动端可以使用，但体验不如桌面端：

  • 屏幕较小，建议横屏使用
  • 触控操作可以完成基本功能
  • 复杂绘图建议在桌面完成

如何批量导出？ ​

使用脚本或插件批量导出：

  1. 安装 Excalidraw 自动化脚本
  2. 设置导出格式和路径
  3. 运行脚本批量处理

文件太大怎么办？ ​

yaml
优化建议:
  - 删除不需要的元素
  - 使用链接而非嵌入图片
  - 分割大型绘图为多个小文件
  - 使用压缩选项导出

相关资源 ​

下一步 ​

最后更新：2026年2月28日编辑此页反馈问题