Excalidraw

GitHub 124k⭐ 开源手绘白板工具完全指南

免费 · 开源 · 协作 · 隐私安全 | CSDN 技术推荐

GitHub: https://github.com/excalidraw/excalidraw  |  在线体验: https://excalidraw.com

一、前言：为什么你需要 Excalidraw？

在日常开发和协作中，我们经常需要快速画一张架构图、流程图、或者产品原型。传统工具要么太重（Visio、Figma），要么太简陋（Paint），要么需要注册付费。

Excalidraw 的出现解决了这个痛点——它是一款完全免费开源的手绘风格白板工具，打开浏览器即用，无需注册，数据本地存储，支持实时协作，在 GitHub 上已积累超过 124,000 个 Star，是目前最受开发者喜爱的白板工具之一。

📷 图1：Excalidraw 在 GitHub 上的 Star 历史趋势 excalidraw/excalidraw · ⭐ 124k Stars · 开源地址：github.com/excalidraw/excalidraw

二、核心特性全解析

2.1 手绘风格，天生亲切感

Excalidraw 最显著的特色是其独特的手绘风格。所有图形都带有轻微的抖动和不规则感，视觉上像是用铅笔在纸上随手画出来的效果。这种风格有几个显著优势：

• 降低「完美主义」的心理负担，让人更专注于内容而非格式
• 在头脑风暴阶段，手绘感传递出「这还是草稿，欢迎讨论」的信号
• 复杂架构图在手绘风格下反而更易读，因为视觉噪音更少

📷 图2：Excalidraw 手绘风格效果展示 左：传统绘图工具的机械感；右：Excalidraw 的手绘风格 — 同样的内容，更强的表达力

2.2 实时协作，无缝共享

点击右上角「分享」按钮，Excalidraw 会生成一个独特的协作链接，团队成员打开链接即可实时同步编辑。全程采用端到端加密（E2E Encryption），连 Excalidraw 的服务器也无法解密你的内容。

• 支持多人同时在线编辑，操作实时同步
• 端到端加密保护数据隐私，适合商业场景
• 无需账号注册，分享链接即可协作
• 支持激光笔标注，适合在线演示和教学

📷 图3：实时协作场景 — 多人同时编辑同一画布 点击「Live Collaboration」生成协作链接，团队成员直接通过浏览器加入

2.3 功能特性一览表

功能	说明
🎨 手绘风格	独特抖动算法模拟纸笔效果，所有图形天然具有手绘感
👥 实时协作	E2E 加密实时同步，多人同时编辑，无需注册账号
🌙 深色模式	支持亮色/暗色模式切换，护眼友好
📦 图形库	内置丰富图形库，支持社区共享图形包（architecture、AWS、Google Cloud 等）
🔗 Mermaid 导入	可直接粘贴 Mermaid 代码，自动转为手绘风格流程图
🖼️ 多格式导出	支持导出 PNG、SVG、PDF，SVG 格式保留编辑数据
🔒 本地优先	数据默认存储在浏览器本地，不上传服务器
🤖 AI 绘图	支持自然语言描述生成草图（付费功能，每日有免费次数）
💻 VSCode 插件	官方提供 VS Code 扩展，可在 IDE 内直接绘图
🌐 可自托管	完全开源，可在自己的服务器上私有化部署

三、三种使用方式，按需选择

方式一：直接在线使用（推荐新手）

打开浏览器访问 https://excalidraw.com，无需注册，立即开始绘图。所有数据自动保存在浏览器本地存储中。

📷 图4：Excalidraw 在线版界面概览 访问 excalidraw.com 即可使用 — 左侧工具栏、中间画布、右上角协作与导出

方式二：VSCode 插件（开发者首选）

在 VS Code 扩展市场搜索「Excalidraw」，安装官方插件。之后新建 .excalidraw 或 .excalidraw.svg 文件即可直接在 IDE 中绘图，图形与代码在同一工作区。

# 命令行安装（或在扩展市场搜索 "Excalidraw"）

code --install-extension pomdtr.excalidraw-editor

📷 图5：Excalidraw VSCode 插件 — 在 IDE 内绘制架构图 插件支持 .excalidraw / .excalidraw.svg / .excalidraw.png 三种文件格式，可随代码一起提交 Git

方式三：Docker 私有化部署（企业推荐）

对于数据安全要求高的团队，可以将 Excalidraw 部署在自己的服务器上，完全隔离外网访问。

# 使用 Docker 一键部署

docker run -d --name excalidraw -p 3000:80 excalidraw/excalidraw:latest

部署完成后访问 http://your-server:3000 即可使用。资源占用极低（约 10MB 静态文件），一台入门级 VPS 即可跑十几个团队。

四、六大使用场景详解

场景1：软件架构设计

在技术评审会议中，用 Excalidraw 绘制微服务架构图。手绘风格配合实时协作，让团队成员在讨论中直接修改图形，比 PPT 中的静态图更有互动性。

📷 图6：微服务架构图示例 Excalidraw 手绘风格让复杂的架构图更易读 — API Gateway → 各微服务 → 数据库层

场景2：产品原型快速设计

产品经理用 Excalidraw 绘制 App 界面草图，手绘风格天然传递出「这是低保真原型，内容比样式更重要」的信息，避免开发团队在原型阶段纠结 UI 细节。

📷 图7：移动端 App 界面原型草图 手绘风格原型比像素精确的设计稿更适合早期需求讨论

场景3：Mermaid 流程图可视化

Excalidraw 支持直接粘贴 Mermaid 代码，一键转换为手绘风格图形。对于已经用 Mermaid 写文档的团队，这是一个极大的效率提升。

# 支持的 Mermaid 图形类型

flowchart LR

    A[用户请求] --> B{认证服务}

    B -->|通过| C[业务处理]

    B -->|拒绝| D[返回 401]

场景4：远程教学与培训

老师可以开启协作模式，让学生们同时进入同一画布。配合演示模式（Presentation Mode），可以实现分步骤展示知识点，比 PPT 更具互动感。

📷 图8：教学场景 — 多人协作画布 激光笔标注 + 实时协作 + 演示模式，让远程教学更接近线下白板体验

场景5：知识管理（Obsidian 集成）

在 Obsidian 笔记应用中安装 Excalidraw 插件，可以在笔记中直接嵌入可编辑的手绘图形。「图文混排」的知识库让复杂概念的表达更直观。

• 在 Obsidian 插件市场搜索「Excalidraw」安装
• 新建 .excalidraw 文件即可在笔记中绘图
• 图形与笔记文件同步存储，支持版本控制

场景6：头脑风暴与思维导图

在会议开始时打开 Excalidraw，随着讨论的推进，将想法以节点和连线的形式快速记录下来。会议结束后直接导出 PNG 分享给所有参与者。

五、必知快捷键速查

功能	说明
V / 1	选择工具
R / 3	绘制矩形
E / 4	绘制椭圆/圆形
A / 5	绘制箭头
T / 9	插入文本
P / 7	自由画笔
Ctrl + Z	撤销
Ctrl + Shift + Z	重做
Ctrl + C / V	复制粘贴
Alt + 拖拽	快速复制元素
Shift + 单击	多选元素
Ctrl + A	全选
Ctrl + G	组合元素
Ctrl + [	下移图层
Ctrl + ]	上移图层
Ctrl + F	搜索画布内容
Ctrl + +/-	缩放画布
Ctrl + 0	重置缩放至 100%
Ctrl + Shift + F	适应屏幕
F5	进入演示模式

六、与主流白板工具对比

在选择白板工具时，Excalidraw 在「轻量 + 开源 + 隐私安全」维度具有明显优势：

工具	开源	免费	自托管	协作	手绘风格
Excalidraw	✅	✅	✅	✅	✅
Draw.io	✅	✅	✅	⚠️	❌
Miro	❌	⚠️	❌	✅	❌
FigJam	❌	⚠️	❌	✅	❌
Notion	❌	⚠️	❌	✅	❌

七、私有化部署完整教程

如果你需要将 Excalidraw 部署在公司内网，或者想为客户提供专属白板服务，以下是完整部署流程：

7.1 环境要求

• 操作系统：Linux（Ubuntu 20.04+ 推荐）/ macOS / Windows
• Docker：20.10+ 版本
• 服务器配置：1 核 1GB 内存即可（Excalidraw 是静态文件）
• 域名 + SSL 证书（可选，用于 HTTPS 访问）

7.2 Docker 一键部署

# 拉取官方镜像并启动

docker run -d \

  --name excalidraw \

  --restart always \

  -p 3000:80 \

  excalidraw/excalidraw:latest

部署完成后，访问 http://your-server-ip:3000 即可看到 Excalidraw 界面。

7.3 Nginx 反向代理配置（支持 HTTPS）

server {

    listen 443 ssl;

    server_name draw.yourdomain.com;

    ssl_certificate /path/to/cert.pem;

    ssl_certificate_key /path/to/key.pem;

    location / {

        proxy_pass http://localhost:3000;

        proxy_set_header Host $host;

    }

}

📷 图9：Nginx + Docker 私有化部署架构 用户 → Nginx（HTTPS/443） → Docker 容器（Excalidraw/3000）→ 静态文件服务

7.4 Docker Compose 方式（推荐）

version: '3'

services:

  excalidraw:

    image: excalidraw/excalidraw:latest

    restart: always

    ports:

      - "3000:80"

    environment:

      - VITE_APP_DISABLE_TRACKING=true

八、围绕 Excalidraw 的商业变现思路

对于独立开发者和技术服务商，Excalidraw 周围存在真实的变现机会：

变现方向1：企业私有化部署服务

对保密性要求高的企业（律所、医院、政府采购），提供「Excalidraw 私有化部署 + 定制功能 + 运维服务」套餐。部署成本几乎为零，而服务价值对企业来说是解决合规痛点。

变现方向2：打包进建站套餐

为客户搭建企业官网或内部知识库时，将 Excalidraw 作为「团队协作白板」功能附加进去，提升套餐价值，同时增加客户粘性。

变现方向3：基于 Excalidraw 开发定制化产品

Excalidraw 提供了完整的 React 组件 API，可以将其嵌入到自己的产品中。有开发者基于此构建了专门面向教育、项目管理等垂直领域的白板工具，并以 SaaS 形式对外收费。

import { Excalidraw } from '@excalidraw/excalidraw';

// 嵌入到你自己的产品中，完全可定制

变现方向4：图形素材库与模板销售

Excalidraw 的图形库（Libraries）支持自定义和分享。可以制作高质量的行业专用图形包（如：AWS 架构组件、业务流程模板、教学课件模板），在社区或付费平台出售。

九、总结

Excalidraw 是少数几个「打开即用、用了就爱」的工具之一。它不追求功能堆砌，而是极致打磨「快速表达想法」这一核心场景。

对于开发者：把它加入你的工具箱，代替 PPT 和 Visio 来做技术沟通，你会发现架构讨论变得更高效。

对于独立开发者和服务商：围绕它的私有化部署需求是真实的，单个企业客户的价值远超想象。

GitHub 地址：https://github.com/excalidraw/excalidraw

在线体验：https://excalidraw.com

官方文档：https://docs.excalidraw.com

—— END ——

如果本文对你有帮助，欢迎点赞收藏，转发给有需要的朋友 ⭐