Excalidraw:手绘风格的开源白板工具,让协作更自然

在远程协作日益普及的今天,画一张清晰又富有表现力的架构图、流程图或草图,往往比千言万语更有效。然而,许多专业绘图工具界面复杂、学习成本高,且缺乏“手绘感”——而 Excalidraw 正是为解决这一痛点而生。

它是一款开源、免费、轻量级的在线白板工具,以简洁的 UI、手绘风格的视觉效果和极致的易用性赢得了全球开发者的喜爱。

image-20251222215409030

1. 什么是 Excalidraw?

Excalidraw 是一个基于浏览器的虚拟白板应用,支持绘制线条、形状、文本、箭头等基本元素,并自动渲染为类似手绘的草图风格(sketch-like appearance)。这种设计不仅亲切自然,还能有效传达“这是初步想法,欢迎讨论”的协作信号。

更重要的是,Excalidraw 完全开源(MIT 许可证),永久免费,无需注册即可使用,且所有数据默认保存在本地(支持导出为 PNG、SVG 或 .excalidraw 文件)。

2. 核心特性

✍️ 手绘风格,拒绝“过度精致”

Excalidraw 的图形边缘带有轻微抖动和不规则性,模拟真实手绘效果。这种“不完美”反而降低了沟通门槛,让团队成员更愿意参与修改和反馈。

🌐 纯前端运行,隐私优先

  • 所有绘图操作在浏览器中完成,无需上传数据到服务器
  • 默认情况下,你的草图只存在于本地(通过浏览器 localStorage 保存)。
  • 支持端到端加密的实时协作(见下文)。

🤝 实时协作(Live Collaboration)

通过点击右上角的 “Collaborate” → “Create Room”,你可以生成一个加密的共享链接:

  • 所有参与者看到的内容实时同步。
  • 数据通过 端到端加密(E2EE) 传输,即使 Excalidraw 官方也无法查看你的内容。
  • 无需账号,只需分享链接即可加入。

注:协作功能依赖第三方信令服务器(如 excalidraw.com 提供的),但你也可以自建协作服务器

💾 完全离线可用 & 多格式导出

  • 支持 PWA(渐进式 Web 应用),可安装到桌面或手机,离线使用。
  • 导出格式包括:
    • PNG(带透明背景)
    • SVG(矢量,可嵌入网页或文档)
    • .excalidraw(JSON 格式,保留可编辑性)
    • 复制为 Base64 图片或嵌入 Markdown

🧩 丰富的集成生态

Excalidraw 已被广泛集成到主流开发者工具中:

  • Obsidian:通过官方插件直接在笔记中绘制和编辑
  • VS Code:使用 Excalidraw VS Code 插件
  • Notion:嵌入 SVG 或 PNG 图片(未来可能支持原生嵌入)
  • Logseq、Zettlr、Tldraw(兼容模式) 等知识管理工具

此外,Excalidraw 还提供 React 组件库,方便开发者将白板功能嵌入自己的 Web 应用。

3. 素材库:无限可能的创意元素

Excalidraw 的素材库(Library)是其强大扩展能力的核心之一,让非设计师也能快速构建专业图表。

image-20251222215548543

🎨 素材多样性

  • 基础组件:矩形、圆形、云朵、数据库图标、服务器、用户头像等常用图形一应俱全。
  • 社区模板:官方和社区贡献了大量预设模板,涵盖系统架构、Kubernetes 集群、AWS/GCP/Azure 云服务图标、UML 草图等。
  • 自定义导入:支持从本地或 URL 导入 SVG 文件作为新素材,极大扩展创作边界。
  • 一键复用:将常用组合(如“微服务模块”)保存为素材,后续拖拽即用。

🔍 智能搜索与分类

素材库支持关键词搜索(如输入 “k8s”、“API”、“firewall”),并按类别组织(网络、用户、云、DevOps 等),大幅提升查找效率。

💼 个人与团队素材库

  • 用户可创建私有素材库,保存项目专属组件。
  • 在协作房间中,素材库可随文档一起共享,确保团队成员使用统一的视觉语言。
  • 素材以 JSON 格式存储,可版本控制、备份或跨项目迁移。

小技巧:在 Obsidian 中使用 Excalidraw 插件时,素材库会自动同步到笔记附件目录,实现跨文档复用。

4. 开源与免费:真正的社区驱动项目

  • 许可证:MIT(非常宽松,允许商用、修改、私有化部署)
  • 源代码:托管于 GitHub – excalidraw/excalidraw,Star 数超 70k(截至 2025 年)
  • 无广告、无追踪、无付费墙:核心功能全部免费开放
  • 社区活跃:全球开发者持续贡献插件、语言包、模板和改进

你不仅可以使用 Excalidraw,还可以轻松 fork 代码、自定义 UI、部署私有实例,甚至构建自己的协作平台。

5. 典型使用场景

  • 系统架构草图:快速绘制微服务、数据流、网络拓扑
  • 产品原型线框图:低保真 UI 原型,聚焦逻辑而非视觉细节
  • 教学/会议白板:远程教学、敏捷站会、头脑风暴
  • 个人知识图谱:在 Obsidian 中绘制概念关系图
  • 技术文档配图:导出 SVG 嵌入 GitHub README 或技术博客

6. 快速开始

  1. 打开 https://excalidraw.com
  2. 直接开始绘制(无需登录)
  3. ? 键查看快捷键(如 R 画矩形,O 画椭圆,T 添加文本)
  4. 点击左下角 “Library” 图标(书本形状)浏览或导入素材
  5. 点击右上角 “Export” 导出图片或文件

小技巧:按住 Shift 可绘制正方形/圆形;拖动元素时按 Alt 可复制;选中多个元素后右键可“Add to library”。

7. 自托管与企业部署

如果你希望在内网或公司环境中使用 Excalidraw,完全可以:

  • 克隆官方仓库并运行 npm run start
  • 使用 Docker 镜像快速部署
  • 结合 excalidraw/excalidraw-room 实现私有协作服务器

这使得 Excalidraw 成为对数据安全要求高的团队的理想选择。

8. 局限与注意事项

  • 不适合绘制高精度工程图或复杂 UML(推荐 PlantUML + Excalidraw 混合使用)
  • 协作房间默认 30 天后过期(可通过自建服务器调整)
  • 移动端体验良好,但精细操作仍建议使用桌面端

9. 结语

Excalidraw 用极简的设计哲学证明了:最好的工具,是让人忘记工具存在的工具。它不追求功能堆砌,而是专注于“快速表达想法”这一核心诉求,并通过开源、免费、隐私友好的方式,真正赋能每一位思考者和创造者。

无论你是开发者、产品经理、教师还是学生,只要需要“画点什么”,Excalidraw 都值得你收藏。


延伸阅读

未经允许不得转载:海淘实验室 » Excalidraw:手绘风格的开源白板工具,让协作更自然

赞 (0)

评论 0