Excalidraw 协作画板¶

Excalidraw 是开源的手绘风格在线白板工具，画出来的图有一种"草稿感"（像用铅笔画的），支持实时多人协作，适合头脑风暴、架构图、流程图、教学演示，可以嵌入 Obsidian 和 VS Code。

核心知识点¶

知识点	说明
工具定位	手绘风格在线白板与协作画图工具
开源地址	github.com/excalidraw/excalidraw
核心优势	手绘风格美观、实时协作、开源免费
付费版	Excalidraw+（团队功能、模板、AI）
数据格式	JSON（.excalidraw 文件）
集成	Obsidian 插件、VS Code 扩展、可嵌入 React

安装配置¶

# Excalidraw 是 Web 应用，无需安装
# 直接访问: https://excalidraw.com

# Obsidian 插件（在笔记中画图）
# Settings → Community Plugins → 搜索 Excalidraw → Install

# VS Code 扩展
code --install-extension pomdtr.excalidraw-editor

# 自托管（Docker）
docker run -d -p 3000:80 excalidraw/excalidraw
# 访问 http://localhost:3000

# React 组件（嵌入自己的应用）
npm install @excalidraw/excalidraw

基本使用¶

1. 核心画图工具¶

=== 工具栏（顶部）===

1. 选择工具 (V)     选中和移动元素
2. 矩形 (R)         画矩形/圆角矩形
3. 菱形 (D)         画菱形
4. 椭圆 (O)         画圆/椭圆
5. 箭头 (A)         画箭头（连接元素）
6. 直线 (L)         画直线
7. 自由画笔 (P)     手绘线条
8. 文字 (T)         添加文本
9. 图片              插入图片
10. 橡皮擦 (E)      擦除元素

=== 快捷键 ===
Ctrl+A       全选
Ctrl+C/V     复制/粘贴
Ctrl+D       复制选中元素
Ctrl+G       分组
Ctrl+Shift+G 取消分组
Ctrl+Z       撤销
Ctrl+Shift+Z 重做
Del          删除选中
Alt+拖拽     复制并移动

2. 常用场景¶

=== 流程图 ===

[数据采集] → [质量控制] → [比对分析] → [统计检验] → [可视化]
                 ↓
           [不合格数据] → [重新测序]

操作步骤：
1. 用矩形画每个步骤
2. 输入文字
3. 用箭头连接
4. 调整位置和颜色

=== 架构图 ===

┌─────────────────┐
│   前端 (React)   │
└────────┬────────┘
         │ API
┌────────┴────────┐
│   后端 (FastAPI)  │
├─────────────────┤
│   数据库 (PG)     │
└─────────────────┘

=== 思维导图 ===

中心主题放在画布中间
→ 用箭头向外扩展分支
→ 每个分支可以继续扩展
→ 用颜色区分不同主题

3. 样式设置¶

=== 元素样式（选中元素后左侧面板）===

Stroke（边框）:
- Color: 选择颜色
- Width: Thin / Bold / Extra Bold
- Style: Solid / Dashed / Dotted

Fill（填充）:
- Hachure（手绘线条填充）← 默认，最有特色
- Cross-hatch（交叉线填充）
- Solid（实色填充）

Edge（边角）:
- Sharp（直角）
- Round（圆角）

Font:
- Hand-drawn（手写体）← 默认
- Normal（正常字体）
- Code（等宽字体）

高级用法¶

1. 实时协作¶

=== 多人实时协作 ===

1. 点击左上角 "Live collaboration"
2. 生成协作链接
3. 分享链接给团队成员
4. 所有人在同一画布上实时编辑
5. 可以看到其他人的光标位置

=== 协作设置 ===
- 端到端加密（链接即密码）
- 不需要注册账号
- 支持同时编辑
- 实时同步

注意：免费版协作链接会过期
      Excalidraw+ 付费版有持久化存储

2. 导出¶

=== 导出格式 ===

PNG     透明背景或白色背景
SVG     矢量图（推荐，清晰度最高）
JSON    .excalidraw 文件（可再次编辑）
链接    分享只读链接

=== 导出设置 ===
- Background: 透明 / 白色
- Scale: 1x / 2x / 3x（放大倍数）
- Padding: 边距
- Dark mode: 深色模式导出

=== 嵌入到文档 ===
导出 SVG → 插入到 Word/PPT/论文
导出 PNG → 插入到任何地方

3. Excalidraw + Obsidian¶

=== 在 Obsidian 中使用 Excalidraw ===

1. 安装 Excalidraw 插件
2. 创建新绘图: Ctrl+P → Create Excalidraw Drawing
3. 在画布中画图
4. 可以嵌入到 Markdown 笔记中: ![[drawing.excalidraw]]

=== 特色功能 ===
- 在绘图中链接 Obsidian 笔记
- 笔记内容可以直接嵌入画布
- 图谱可视化 + 手绘结合
- 适合做笔记的可视化索引/地图

4. Mermaid 图表支持¶

=== 从 Mermaid 代码生成图表 ===

Excalidraw 支持将 Mermaid 语法转换为手绘风格图表：
- 流程图（Flowchart）
- 序列图（Sequence Diagram）
- 状态图（State Diagram）
- ER 图（Entity Relationship）

操作：
1. 点击工具栏 "Mermaid to Excalidraw" 图标
2. 输入 Mermaid 代码
3. 自动转换为手绘风格的图表
4. 转换后可以继续编辑

5. 组件库¶

=== Excalidraw Libraries ===

1. 工具栏 → Library 图标
2. Browse → 搜索现成的图形库
3. 分类：
   - 架构图组件（服务器、数据库、云服务）
   - UML 图形
   - 网络拓扑图
   - UI 线框图
   - 流程图符号
4. 拖拽到画布直接使用

常见报错与解决¶

报错信息	原因	解决方法
协作链接失效	链接过期	重新创建协作会话
图片导入失败	格式不支持	用 PNG/JPG/SVG 格式
画布卡顿	元素太多	删除不需要的元素或分组
Obsidian 插件不同步	版本不兼容	更新 Obsidian 和插件

速查表¶

===== Excalidraw 速查表 =====

# 快捷键
V         选择工具
R         矩形
D         菱形
O         椭圆
A         箭头
L         直线
P         画笔
T         文本
E         橡皮擦

Ctrl+G    分组
Ctrl+D    复制
Ctrl+Z    撤销
Del       删除
Alt+拖拽  复制移动

# 样式
Stroke: 边框颜色和粗细
Fill: Hachure（手绘）/ Solid（实色）
Edge: Sharp（直角）/ Round（圆角）
Font: Hand-drawn / Normal / Code

# 导出
PNG / SVG / .excalidraw（JSON）

# 集成
Obsidian: Excalidraw 插件
VS Code: excalidraw-editor 扩展
React: @excalidraw/excalidraw 组件

# 使用场景
架构图 / 流程图 / 思维导图 / 教学演示
UI 线框图 / 概念图 / 头脑风暴