excalidraw 入门指南
Excalidraw 是一个开源的、虚拟手绘风格的在线白板工具,它专注于提供简单、直观且功能丰富的绘图体验。它特别适合用于创建图表、线框图、思维导图、流程图以及其他各种类型的图形和视觉内容
以下是 Excalidraw 的一些详细介绍:
- 开源和免费: Excalidraw 是一个完全免费且开源的项目,这意味着用户可以自由使用它,同时社区也可以贡献代码来改进和扩展其功能
- 手绘风格: Excalidraw 的核心特点之一是其手绘风格的图形和界面设计。这种独特的视觉风格使得创建的图表和图形看起来更加亲切和自然
- 无限画布: Excalidraw 提供了一个无限大的画布,用户可以在其中自由地绘制和排列图形,无需担心空间限制
- 多样化的图形和工具: Excalidraw 内置了多种图形和工具,包括矩形、圆形、箭头、线条、文字等,用户可以使用这些工具轻松创建复杂的图形和布局
- 实时协作: Excalidraw 支持实时协作功能,多个用户可以同时在同一张图上工作,这使得团队合作变得更加高效
- 端到端加密: 为了保护用户的隐私和数据安全,Excalidraw 提供了端到端加密的通信功能,确保用户之间的协作数据传输是安全的
- 跨平台支持: Excalidraw 可以在多种设备和浏览器上运行,包括桌面和移动设备,用户可以随时随地访问和编辑他们的图形
- 导出和分享: 用户可以将他们的图形导出为 PNG、SVG 等格式的图片,也可以通过链接分享给他人查看或编辑
- 社区支持: 作为一个开源项目,Excalidraw 拥有一个活跃的社区,用户可以在社区中寻求帮助、分享技巧和资源,也可以参与到项目的开发和改进中
- 易于集成: Excalidraw 还提供了 VScode 扩展和 npm 包,使得开发者可以轻松地将 Excalidraw 集成到他们自己的应用程序中
总的来说,Excalidraw 是一个功能全面、易于使用且具有独特手绘风格的在线绘图工具,它适用于个人和团队在多种场景下的图形创建和协作需求。无论是用于教育、设计、技术文档还是商业演示,Excalidraw 都能提供出色的用户体验
# 实用技巧
按
?可查看完整快捷键列表
# 移动与对齐
Cmd+ 拖动：禁用吸附，自由移动元素不受网格/对齐约束Shift+ 拖动：约束为水平/垂直方向移动- 方向键：微调位置（1px）
Shift+ 方向键：大步移动（10px）
# 绘制技巧
Shift+ 绘制：画正方形/正圆/45度角直线Alt+ 绘制：从中心点向外绘制- 绘制线条时点击可创建折点，双击结束
Enter：在选中元素上快速添加文字
# 箭头绑定形状
让箭头与形状建立连接（移动形状时箭头自动跟随）：
- 按
5选择箭头工具 - 鼠标移到起始形状的边缘，等待边缘高亮（蓝色提示）
- 按住拖动到目标形状的边缘
- 等目标形状边缘也高亮时松开
⚠️ 注意：
Cmd+ 拖动会禁用吸附，导致箭头无法绑定形状
# 复制与编辑
Alt+ 拖动：快速复制元素Cmd + D：原地复制Cmd + Alt + C/V：复制/粘贴样式- 双击元素：编辑文字或进入组内
# 缩放技巧
Shift+ 缩放：保持比例Alt+ 缩放：从中心点缩放- 双指捏合：触控板缩放画布
# 其他
Space+ 拖动：平移画布Cmd + Shift + E：快速导出图片- 粘贴图片 URL：自动嵌入图片
- 从 Figma 复制：可直接粘贴矢量图形
# plugin
# vscode extension
npm install react react-dom @excalidraw/excalidraw: 安装 Excalidraw npm 包
# 常见绘图类型及场景
# 时序图 (Sequence Diagram)
展示对象/系统之间按时间顺序的交互过程。
使用场景：
- API 调用流程
- 用户登录/注册流程
- 微服务间通信
- 支付流程
绘制要点：
- 顶部水平排列参与者（Actor/System）
- 垂直虚线表示生命线
- 水平箭头表示消息传递（实线=请求，虚线=响应）
- 可用矩形框表示激活状态
# UML 图
统一建模语言图，用于软件系统的可视化设计。
# 类图 (Class Diagram)
场景： 面向对象设计、展示类之间的关系
要点： 矩形分三栏（类名/属性/方法），用不同箭头表示继承、实现、组合、聚合
# 用例图 (Use Case Diagram)
场景： 需求分析、功能范围定义
要点： 小人表示 Actor，椭圆表示用例，用线连接
# 活动图 (Activity Diagram)
场景： 业务流程、算法逻辑
要点： 类似流程图，支持并行分支（泳道）
# 状态图 (State Diagram)
场景： 订单状态流转、有限状态机设计
要点： 圆角矩形表示状态，箭头表示转换条件
# 流程图 (Flowchart)
最常用的图表类型，展示步骤和决策逻辑。
使用场景：
- 业务审批流程
- 算法逻辑
- 故障排查指南
- 用户操作引导
标准图形：
| 形状 | 含义 |
|---|---|
| 圆角矩形 | 开始/结束 |
| 矩形 | 处理步骤 |
| 菱形 | 判断/分支 |
| 平行四边形 | 输入/输出 |
# 架构图 (Architecture Diagram)
展示系统组件及其关系。
使用场景：
- 系统架构设计
- 微服务拓扑
- 云部署架构
- 网络拓扑图
常见类型：
- C4 模型：Context → Container → Component → Code 四层
- 部署图：展示服务器、容器、负载均衡等
- 数据流图：展示数据在系统中的流转
# 沃德利地图 (Wardley Map)
战略规划工具，分析组件的演进阶段和价值链位置。
使用场景：
- 技术选型决策
- 业务战略规划
- 竞争态势分析
- Build vs Buy 决策
坐标轴：
- Y轴 (Value Chain)：可见度，顶部是用户可见的，底部是基础设施
- X轴 (Evolution)：演进阶段
- Genesis（起源）→ Custom Built（定制）→ Product（产品）→ Commodity（商品化）
绘制要点：
- 从用户需求出发，自上而下列出依赖组件
- 根据组件成熟度横向定位
- 用箭头连接依赖关系
- 可用不同颜色区分自建/外购/开源
# ER 图 (Entity-Relationship Diagram)
数据库实体关系图。
使用场景：
- 数据库表设计
- 数据模型文档
- 领域模型设计
要点：
- 矩形表示实体（表）
- 菱形表示关系
- 标注 1:1、1:N、M:N 关系
# 思维导图 (Mind Map)
放射状结构，中心主题向外发散。
使用场景：
- 头脑风暴
- 知识体系梳理
- 读书笔记
- 项目规划
# 线框图 (Wireframe)
低保真 UI 原型。
使用场景：
- 产品需求讨论
- UI/UX 快速原型
- 功能布局规划
Excalidraw 优势： 手绘风格天然适合线框图，避免过早陷入视觉细节
# 甘特图 (Gantt Chart)
项目时间线和任务依赖。
使用场景：
- 项目排期
- 里程碑规划
- 资源分配
💡 提示：Excalidraw 素材库中有许多预制模板，如 Wardley Mapping Canvas、Decision flow control 等，可直接导入使用
# 素材库
# 多端同步方案
Excalidraw 素材库以 .excalidrawlib 文件（JSON 格式）存储，可通过以下方式同步：
# 方案一：云盘同步（推荐）
- 导出素材库：点击左侧素材库图标 → 右上角菜单 → Export library
- 将
.excalidrawlib文件保存到云盘同步目录（iCloud/Dropbox/坚果云等） - 其他设备：点击素材库图标 → Load from file 导入
缺点：每次新增素材需要重新导出，手动操作
# 方案二：Excalidraw+ 订阅
官方付费服务，提供：
- 素材库云端自动同步
- 端到端加密
- 协作空间
# 方案三：VSCode 扩展 + Git
如果用 VSCode 扩展画图，素材库存储在：
- macOS:
~/Library/Application Support/Code/User/globalStorage/pomdtr.excalidraw-editor/libraries.excalidrawlib - 可通过软链接指向 Git 仓库中的文件实现同步
# 将素材库文件链接到 Git 仓库
ln -sf ~/your-repo/libraries.excalidrawlib ~/Library/Application\ Support/Code/User/globalStorage/pomdtr.excalidraw-editor/libraries.excalidrawlib
2
# 推荐素材库
- Decision flow control
- Wardley Mapping Canvas
- excalidraw-libraries (opens new window) - 官方素材库市场