什么是 Excalidraw？

Excalidraw 是一个开源的虚拟手绘白板工具，让你可以用手绘风格创建图表、流程图、线框图和示意图。它的独特之处在于既保持了手绘的亲和力，又具备数字工具的精确性。

核心优势：

• 手绘风格：自动将直线变成略带抖动的手绘效果
• 开源免费：完全开源，可自托管，数据可控
• 实时协作：多人同时编辑，类似 Figma
• 导出灵活：支持 PNG、SVG、PDF 等多种格式
• 库丰富：内置大量组件库，可自定义

适用场景

1. 技术架构图

手绘风格的架构图比标准图形更有亲和力，适合：

• 系统架构设计
• 数据流图
• 部署拓扑图
• 微服务关系图

2. 产品原型与线框图

快速绘制 UI 原型：

• 网页线框图
• 移动端界面
• 用户流程图
• 交互说明

3. 流程图与思维导图

• 业务流程图
• 决策树
• 思维导图
• 会议笔记

4. 教学与演示

• 技术讲解配图
• 概念示意图
• 白板演示
• 教程插图

核心功能详解

基础绘图工具

形状工具

• 矩形：按 Shift 画正方形，按 Alt 从中心绘制
• 椭圆：按 Shift 画正圆
• 菱形：流程图常用
• 箭头：自动吸附，支持折线

手绘效果控制

• 粗糙度：调节线条的手绘程度（0-100%）
• 填充：纯色、斜线、网格、交叉线
• 描边：实线、虚线、点线

文字与标注

• 双击画布直接输入
• 支持 Markdown 语法
• 字体大小：小、中、大、超大

图层与选择

选择技巧

• 单击：选择单个元素
• 框选：选择多个元素
• Cmd/Ctrl + 单击：多选
• Cmd/Ctrl + A：全选

图层操作

• Cmd/Ctrl + ]：上移一层
• Cmd/Ctrl + [：下移一层
• Cmd/Ctrl + Shift + ]：置顶
• Cmd/Ctrl + Shift + [：置底

快捷键大全

进阶技巧

1. 组件库使用

内置库

• 点击左下角「库」图标
• 包含：软件架构、流程图、移动端、图标等

自定义库

• 创建常用组件
• 选中 → 点击「添加到库」
• 导出为 .excalidrawlib 文件分享

导入社区库

• 访问 libraries.excalidraw.com
• 下载 .excalidrawlib 文件
• 在 Excalidraw 中导入

2. 主题与样式

切换主题

• 太阳/月亮图标切换浅色/深色模式
• 支持自动跟随系统

自定义颜色

• 点击颜色选择器
• 输入 HEX 或 RGB 值
• 添加到自定义调色板

样式一致性

• 选中元素 → 右键「复制样式」
• 选中其他元素 → 「粘贴样式」
• 或使用格式刷（Cmd/Ctrl + Shift + C/V）

3. 精确对齐

对齐工具

• 顶部对齐
• 垂直居中
• 底部对齐
• 左对齐
• 水平居中
• 右对齐

分布工具

• 水平均匀分布
• 垂直均匀分布

智能参考线

• 拖动时自动显示对齐参考线
• 显示与其他元素的关系

4. 导入导出

导出选项

• PNG：带透明背景或不带
• SVG：矢量格式，可编辑
• PDF：适合打印
• Excalidraw：保留编辑能力

导出设置

• 仅选中内容
• 当前画布全部
• 自定义边界

导入

• 支持图片拖拽
• 支持 SVG 导入
• 支持其他 Excalidraw 文件

团队协作

实时协作

创建协作链接

• 点击右上角「分享」
• 开启「多人协作」
• 复制链接给团队成员

权限控制

• 只读链接：查看但不能编辑
• 编辑链接：可共同编辑
• 密码保护：可选

版本历史

自动保存

• 每 10 秒自动保存
• 本地存储 + 云端同步

恢复历史

• 点击「文件」→「打开」
• 查看历史版本
• 恢复到任意时间点

集成工具

VS Code 扩展

• 安装 Excalidraw 扩展
• 在 VS Code 中直接编辑 .excalidraw 文件
• 支持实时预览

Obsidian 插件

• 安装 Excalidraw 插件
• 在笔记中嵌入手绘图
• 双向链接支持

Notion 集成

• 导出为 PNG/SVG
• 嵌入到 Notion 页面
• 或使用第三方工具同步

实战工作流

场景 1：系统架构设计

步骤

1. 使用「软件架构」库拖入基础组件
2. 用箭头连接各组件
3. 添加文字标注关键信息
4. 使用颜色区分不同层级
5. 导出为 PNG 插入文档

技巧

• 使用不同颜色代表不同服务
• 用虚线表示异步通信
• 用数字标注执行顺序

场景 2：产品原型设计

步骤

1. 使用「移动端」或「网页」库
2. 快速搭建页面结构
3. 用箭头连接页面跳转
4. 添加交互说明文字
5. 导出分享给团队

技巧

• 使用灰度表示未实现功能
• 用红色标注重点交互
• 保持组件间距一致

场景 3：会议白板

步骤

1. 创建协作链接
2. 共享给参会者
3. 实时记录讨论内容
4. 用不同颜色区分不同人
5. 会后导出保存

技巧

• 提前准备基础框架
• 使用便签功能记录要点
• 会后整理成结构化文档

最佳实践建议

1. 保持简洁

• 一页一个核心概念
• 元素不超过 20 个
• 使用分组组织复杂内容

2. 颜色策略

• 限制调色板（3-5 种颜色）
• 用颜色表达含义，不只是装饰
• 深色背景配浅色文字，反之亦然

3. 字体规范

• 标题：大号字体（28-36px）
• 正文：中号字体（20-24px）
• 注释：小号字体（16px）

4. 命名与组织

• 使用有意义的文件名
• 按项目/日期组织文件夹
• 定期归档旧文件

5. 备份策略

• 开启自动保存到云端
• 定期导出备份
• 重要文件使用 Git 管理

常见问题

Q: Excalidraw 和 Figma/Sketch 有什么区别？
A: Excalidraw 主打手绘风格和快速草图，Figma/Sketch 主打精确设计。Excalidraw 更适合早期概念阶段。

Q: 数据存储在哪里？
A: 默认存储在浏览器本地，也可选择保存到 Excalidraw+ 云端或自托管。

Q: 可以离线使用吗？
A: 可以，安装 PWA 应用后支持离线编辑。

Q: 支持中文吗？
A: 完全支持，包括中文字体和从右到左布局。

Q: 如何自托管？
A: 使用 Docker 一键部署：docker run -d -p 80:80 excalidraw/excalidraw

资源推荐

• 官方网站：excalidraw.com
• GitHub：github.com/excalidraw/excalidraw
• 组件库：libraries.excalidraw.com
• 社区论坛：Discord

结语

Excalidraw 的魔力在于降低表达门槛——不需要设计基础，也能画出专业又亲切的图表。

在过度精致的设计工具泛滥的时代，Excalidraw 提醒我们：草图的价值在于快速传达想法，而非完美呈现。

下次需要画架构图、流程图或原型时，试试 Excalidraw。你会发现，手绘风格反而让沟通更顺畅。

本文基于 Excalidraw 开源项目整理，感谢开源社区的贡献。