Excalidraw插件详细指南

Obsidian Excalidraw 插件 - 手绘图表与白板完全指南

#resource / obsidian #type / howto #status / evergreen

Excalidraw 插件详细指南

[!info] related notes

相关插件: Obsidian插件完全索引, 构建Excalidraw的容器

相关用途: Obsidian 完整文档系统导航, Obsidian写作工作流

核心功能：手绘图表、白板、架构图、流程图、协作绘图
难度级别：⭐⭐⭐
推荐指数：⭐⭐⭐⭐⭐
必装程度：强烈推荐（可视化思维）

功能概览

核心特性

功能	说明	用途
手绘风格	手绘感的图表	自然流畅的表达
基础形状	矩形、圆形、菱形等	快速绘图
连接线	智能连接元素	表示关系
文字标注	给图形添加标签	清晰说明
分组	将元素组织在一起	结构化管理
导出功能	导出 PNG/SVG/JSON	分享与备份
协作功能	实时编辑（需在线）	团队协作
Markdown 集成	无缝嵌入笔记	一体化编辑

应用场景

场景	示例
架构设计	系统架构、微服务架构
流程图	业务流程、工作流
思维导图	知识体系、学习规划
原型设计	界面原型、交互流程
笔记插图	概念图、关系图
头脑风暴	白板协作、创意记录

安装与配置

安装

Settings → Community plugins → Browse
搜索 “Excalidraw”
安装并启用

初始配置

Settings → Excalidraw

## 文件夹设置
Excalidraw Folder: "Excalidraw"     # 存储位置
Auto Filename: "Excalidraw YYYY-MM-DD HH-mm-ss"

## 显示选项
Show Library: true                   # 显示元素库
Show Stats: true                     # 显示统计信息
Show Grid: false                     # 显示网格

## 导出设置
Export Format: "png"                 # 导出格式
Scale: 2                             # 导出缩放比例
Background: true                     # 导出时包含背景

快速开始

创建新画板

方法 1：菜单创建

1. Ctrl+Shift+E（默认快捷键）
2. 或 右键 → New Excalidraw
3. 自动创建并打开新画板

方法 2：在笔记中创建

# 我的笔记

## 架构图

```excalidraw
[自动打开编辑器]


### 基础工具栏

┌─────────────────────────────────────┐ │ 选择 │ 矩形 │ 菱形 │ 圆 │ 箭头 │文字│ │ [S] │[R] │ [D] │[C]│ [A] │[T] │ └─────────────────────────────────────┘

┌─────────────────────┐ │ 线条 │ 涂色 │ 橡皮 │ │ [L] │ [F] │ [Del]│ └─────────────────────┘


---

## 工作流示例

### 场景 1：系统架构设计

**设计流程**

创建新 Excalidraw
添加服务模块（矩形）
- Frontend
- API Gateway
- Backend Services
- Database
- Cache
用箭头连接各模块
添加数据流标注
导出为图片
嵌入笔记中


**示例架构图**

┌──────────┐ ┌────────────┐ ┌─────────────┐ │ Frontend │ │ API Gateway│ │ Backend API │ │ (React) │──────┤ ├──────┤ (Node/Python) └──────────┘ └────────────┘ └─────────────┘ │ │ │ └────────────────┼─────────────────────┘ │ ┌─────▼─────┐ │ Database │ │(PostgreSQL) └───────────┘


### 场景 2：流程图设计

**工作流流程图**

开始 ──→ 输入数据 ──→ 数据验证 │ │ │ ❌ ├─→ 返回错误 │ │ [成功] └─→ 重新输入 │ └──→ 处理数据 ──→ 保存数据 ──→ 成功 ──→ 结束


**绘制步骤**

菱形：开始/结束节点
矩形：处理步骤
菱形：判断点
箭头：连接流程
文字：标注说明


### 场景 3：知识体系思维导图

**学习规划图**

                编程学习
                  │
    ┌─────────────┼─────────────┐
    │             │             │
  前端           后端           算法
    │             │             │
 React         Node.js         数据结构
Vue.js       Python           排序算法
              Java             图论


### 场景 4：笔记中的概念图

**神经网络概念**

```markdown
# 深度学习基础

## 神经网络架构

[Excalidraw 图：输入层 → 隐层 → 隐层 → 输出层]

输入 → [隐层1] → [隐层2] → 输出
       权重1    权重2    权重3

每层之间通过激活函数连接

常见问题

Q1：如何保存我的画板？

自动保存

Excalidraw 自动保存到设置的文件夹

设置位置：
Settings → Excalidraw → Excalidraw Folder

默认位置：Excalidraw/ 文件夹

Q2：如何导出画板为图片？

导出步骤

在 Excalidraw 编辑器中：
1. 点击菜单 → Export
2. 选择导出格式：
   - PNG（图片）
   - SVG（矢量）
   - JSON（编辑文件）

3. 选择导出范围：
   - All elements（全部）
   - Selected elements（选中部分）

4. 下载文件

Q3：如何在笔记中嵌入 Excalidraw？

嵌入方法 1：使用代码块

```excalidraw
# 自动创建新画板
```

嵌入方法 2：引用存在的画板

![[我的画板.excalidraw]]
或
[[我的画板.excalidraw]]

Q4：多人如何协作编辑？

协作方案

方法 1：实时同步（Obsidian Sync）
- 启用 Obsidian Sync
- 所有用户自动看到最新版本
- 需要主动刷新查看

方法 2：离线编辑 + Git 合并
- 在本地编辑
- 通过 Git 同步版本
- 避免直接冲突

Q5：线条不能自动连接怎么办？

启用自动连接

在 Excalidraw 编辑器中：
1. 按住 Ctrl/Cmd + 拖拽
2. 鼠标靠近其他形状时会自动吸附
3. 或在菜单中启用 "Binding Mode"

高级技巧

1. 使用库和模板

访问元素库

左侧边栏 → Library
可直接拖拽使用预制元素：
- 流程图形状
- UML 图标
- 数据库符号

2. 快捷键大全

功能	快捷键
矩形	R
菱形	D
圆形	C
箭头	A
文字	T
选择	S
涂色	F
复制	Ctrl+C
粘贴	Ctrl+V
删除	Delete
撤销	Ctrl+Z
重做	Ctrl+Y

3. 样式自定义

编辑元素样式

选中元素后：
1. 右侧面板设置：
   - 线条颜色
   - 填充颜色
   - 线条粗细
   - 线条样式（实线/虚线）
   - 透明度

2. 使用快捷菜单：
   Right Click → Style

4. 分组与对齐

分组元素

选中多个元素 → Ctrl+G
将元素组织在一起

移动或调整时，整组一起操作

对齐元素

菜单 → Arrange → Align
- Left / Center / Right
- Top / Middle / Bottom

快速对齐多个元素

集成应用

Excalidraw + Dataview

// 查询所有包含图表的笔记
const pages = dv.pages("#diagram");
dv.table(
  ["笔记", "最后修改"],
  pages.map(p => [p.file.link, p.file.mtime])
);

Excalidraw + Templater

# <%+ tp.file.title %>

## 架构设计

```excalidraw
[使用 Templater 自动打开编辑器]
```

创建时间：<% tp.date.now() %>

Excalidraw + Daily Note

在 Daily Note 中快速绘图：
- 白板记录想法
- 快速草稿
- 头脑风暴记录

最佳实践

使用清晰的标注
- 给元素添加文字说明
- 使用箭头表示流向
- 提高图表可读性
保持风格一致
- 线条粗细统一
- 颜色搭配协调
- 字体大小合理
合理组织元素
- 使用分组整理复杂图表
- 按逻辑排列元素
- 对齐和间距一致
定期整理和备份
- 删除不用的画板
- 定期导出重要图表
- 使用 Git 跟踪版本
命名规范
- 使用有意义的文件名
- 便于查找和管理
- 避免重复

常见图表模板

模板 1：系统架构图

┌─────────────────────────────────────┐
│            Users / Clients           │
└────────────────┬────────────────────┘
                 │
         ┌───────▼────────┐
         │   Load Balancer│
         └────────┬───────┘
                  │
    ┌─────────────┼─────────────┐
    │             │             │
┌───▼───┐    ┌───▼───┐    ┌───▼───┐
│ App 1 │    │ App 2 │    │ App 3 │
└───┬───┘    └───┬───┘    └───┬───┘
    │            │            │
    └────────────┼────────────┘
                 │
         ┌───────▼────────┐
         │  Shared Cache  │
         └────────┬───────┘
                  │
         ┌───────▼────────┐
         │   Database     │
         └────────────────┘

模板 2：数据流图

Data → Validation → Processing → Storage
         ↓
        Error
        Log

模板 3：UML 类图

┌──────────────────┐
│   ClassName      │
├──────────────────┤
│ - property1      │
│ - property2      │
├──────────────────┤
│ + method1()      │
│ + method2()      │
└──────────────────┘

性能优化

优化建议

对于大型复杂图表：

1. 分割图表
   - 将大图表拆分为多个小图表
   - 分别在不同笔记中管理

2. 简化设计
   - 删除不必要的元素
   - 保留核心信息

3. 减少导出次数
   - 定期导出备份，不要频繁导出

4. 管理文件大小
   - 定期清理无用图表
   - 优化 JSON 存储

📚 相关文档

obsidian-plugin-complete-index - 其他可视化插件