Stars132.1k
Forks0
主语言TypeScript
分类创意内容生成
作者excalidraw
LicenseMIT

预览

详细介绍

Excalidraw 是由开发者 Christopher Chedeau(vjeux)于 2019 年发起并持续维护的开源虚拟手绘风格白板工具,核心定位是“一个打开浏览器就能用的无限画布,用略带随意的线条把脑子里的想法变成清晰可见的图表”——它不满足于做一份精致的矢量绘图工具或复杂的专业设计软件,而是将无限画布、手绘风格渲染、实时协作、端到端加密、本地优先存储、React 组件嵌入能力等核心能力整合于一套完整的开源工具中,全部配有零注册直接使用excalidraw.com 在线版@excalidraw/excalidraw npm 包Excalidraw+ 付费云端增强版,以及 130k+ GitHub StarsMIT 开源协议

一、Excalidraw 是什么

Excalidraw 采用“浏览器即用 + 组件嵌入 + 云端增强”三位一体的使用体验,通过 GitHub 完全开源免费发布,采用 MIT 许可证。项目由 Christopher Chedeau 于 2019 年在 GitHub 上开源发布,最初是为了在技术会议和分享中快速画出架构草图而构建的小工具,随后迅速成长为全球最受欢迎的开源白板工具之一。截至 2025 年,其 GitHub 仓库已获得超过 100,000 Star10,000 Fork,目前 Star 数已超过 130k。用户无需注册、无需下载,打开浏览器访问 excalidraw.com 即可开始绘制。

Excalidraw 的运作机制与市面常见的“专业矢量绘图软件”或“企业级协作平台”有本质区别。它不是 Figma 或 Draw.io 的替代品,也不是一个追求像素级精确的制图工具,而是一个刻意拥抱“不完美”的手绘风格白板。其核心设计哲学是“让图表看起来像草稿”——线条有轻微的抖动,形状的边缘不那么规整,文字像是随手写的。这种“故意的不正式”消解了制图的压力,让创作者可以专注于表达想法本身,而非纠结于对齐和精确。Excalidraw 的编辑器以 npm 包@excalidraw/excalidraw)的形式发布,开发者可以将其直接嵌入 React 应用中,获得一个完整的内嵌白板编辑器。

二、Excalidraw 能做什么

Excalidraw 的核心能力可以精炼地概括为:画、连、协、导、嵌,围绕这五大维度提供了从快速草图到团队协作的完整路径,覆盖可视化表达的广泛需求,具体包括:

无限画布与手绘风格绘图(画) ——不是“在有限画布里小心翼翼地排版”,而是“在一块无限延伸的画布上自由挥洒”。Excalidraw 提供无限的、基于画布的白色白板,所有图形都呈现手绘风格——矩形、圆形、菱形、箭头、线条、自由绘制和橡皮擦,一应俱全。独特的 Sloppiness 滑杆让用户可以调整手绘感的强度,从“几乎规整”到“相当随意”,满足从技术图表到头脑风暴的不同场景。支持深色模式自定义主题

智能连接与箭头绑定(连) ——不是“画完箭头再手动对齐”,而是“箭头自动吸附到图形、拖动时保持连接”。Excalidraw 的箭头绑定功能让箭头可以吸附到矩形、圆形等形状上,当形状被移动时,箭头会自动跟随并保持连接。支持带标签的箭头,让流程图的语义表达更加清晰。文本会自动居中于形状内部,无需手动调整。

实时协作与端到端加密(协) ——不是“生成链接后别人只能看”,而是“多人同时在一张白板上绘制,内容只有参与者能看到”。Excalidraw 支持实时协作——通过一个链接即可邀请他人共同绘制。所有协作内容采用端到端加密,服务器无法读取白板内容。支持本地优先存储——自动保存到浏览器,即使关闭页面也不会丢失。支持导出为只读分享链接,方便向未参与协作的人展示成果。

多格式导出与开放数据格式(导) ——不是“只能在线查看”,而是“一份内容,多种格式,永久可读”。Excalidraw 支持导出为 PNG、SVG剪贴板格式。更关键的是,它采用开放格式——将所有图形导出为 .excalidraw JSON 文件,这意味着作品不被平台锁定,可以在任何支持该格式的工具中打开和编辑。Frames 功能可以将画布上的元素分组、命名并单独导出为图片,在演示时可以通过搜索 Frame 标签直接跳转到对应区域。

React 组件嵌入与生态集成(嵌) ——不是“只能作为独立网站使用”,而是“可以嵌入到任何 React 应用中”。Excalidraw 以 npm 包形式发布,开发者可以通过 npm install @excalidraw/excalidraw 将其直接嵌入自己的 React 应用。它已被 Google Cloud、Meta、CodeSandbox、Obsidian、Replit、Slite 等广泛集成。社区还提供了 VS Code 扩展、Obsidian 插件、离线 Chrome 扩展等多种集成方式。

三、Excalidraw 适合谁用

Excalidraw 的内容设计使其适配各类需要快速可视化想法、绘制图表或进行团队协作的人群,核心聚焦那些“需要画图但不想学专业设计软件、需要协作但不想注册复杂平台”,希望从“打开专业工具”升级为“打开浏览器就画”的人群,主要涵盖以下几类:

软件工程师与系统架构师——日常工作中需要绘制系统架构图、流程图、数据流图、API 调用关系图。Excalidraw 的手绘风格让技术图表不再枯燥,箭头绑定功能让架构图的修改和维护变得轻松。Google Cloud 的架构速查表就是用 Excalidraw 构建的。

产品经理与设计师——需要快速制作 UI 线框图、用户流程图、产品原型草图。Excalidraw 的“故意不正式”风格让产品讨论中的草图不再需要追求“画得好看”,而是聚焦于“讲清楚逻辑”。Frames 功能让产品演示可以按模块跳转。

教育工作者与培训师——需要制作教学示意图、概念图或课堂互动白板。Excalidraw 的手绘风格天然适合教学场景——像在黑板上画图一样自然,同时支持实时协作,可以让学生也参与进来。

技术写作者与内容创作者——需要在文章、博客、文档中嵌入示意图。Excalidraw 的 SVG 导出和 npm 包嵌入能力,让图表可以无缝集成到网页和文档中。Obsidian 用户可以通过 Excalidraw 插件在笔记中直接画图。

远程团队与分布式协作团队——需要在一个共享的视觉空间里讨论问题、梳理思路、绘制共识。Excalidraw 的实时协作和端到端加密让团队可以安全地在一张白板上共同创作。

四、Excalidraw 的应用场景是什么

基于其内容设计与定位,Excalidraw 的应用场景主要围绕技术架构与流程设计、产品与设计协作、教学与知识分享、远程团队头脑风暴和内容创作配图,覆盖从个人草图到团队协作的广泛场景,具体包括:

软件架构与系统设计场景——工程师需要绘制微服务架构、数据库关系图、部署拓扑或 API 调用流程。Excalidraw 提供了一条“打开浏览器 → 拖拽形状和箭头 → 箭头自动吸附到目标形状 → 调整 Sloppiness 使风格统一 → 导出 SVG 嵌入文档”的完整路径。社区库中还有预制的 AWS 架构图标和流程图符号可供使用。

产品线框图与原型草图场景——产品经理需要快速画出 UI 线框图或用户旅程图,用于团队讨论或用户测试。Excalidraw 的简洁工具集——矩形、文字、箭头——让线框图的绘制变得极其快速,无需从零构建组件库。

教学与课堂互动场景——教师需要制作教学示意图或进行课堂实时演示。Excalidraw 的手绘风格让教学内容显得亲切自然。实时协作功能让教师可以创建一个共享白板,让学生在课堂上共同参与绘制。

远程头脑风暴与团队共识场景——分布式团队需要在一个共享空间中梳理思路、绘制思维导图或进行方案讨论。Excalidraw 的实时协作和只读分享链接让“大家一起画一张图”成为远程协作的默认方式。

技术文档与博客配图场景——技术写作者需要在文章中插入架构图、流程图或示意图。Excalidraw 的 SVG 导出确保图表在任何分辨率下都清晰可读,.excalidraw JSON 格式则让图表可以被版本控制和团队复用。

五、Excalidraw 为什么值得关注

Excalidraw 之所以值得关注,核心在于它将“可视化表达从专业工具的复杂门槛中解放出来,回归到‘像在纸上画图一样自然’的体验”,并具备“手绘风格、无限画布、实时协作、端到端加密、React 组件嵌入、MIT 开源”的独特价值,具体体现在以下几点:

从“专业制图工具”到“手绘草稿”的体验革命。大多数绘图工具追求精确——对齐、等距、规整的线条。Excalidraw 反其道而行之,刻意拥抱“不完美”——线条有轻微的抖动,形状的边缘不那么规整。这种“故意的不正式”消解了“画图”的心理压力:你不需要成为一个设计师才能画出一张好看的架构图。正如一位用户所说:“Excalidraw 的手绘风格消除了完美主义”。这种“松弛感”是它区别于所有专业绘图工具最核心的价值。

从“注册登录”到“打开浏览器就用”的零摩擦体验。大多数协作工具需要注册账号、创建团队、邀请成员。Excalidraw 的在线版零注册即可使用——打开 excalidraw.com,立刻开始画。想协作?生成一个链接发出去就行。想保存?自动存在浏览器里。这种“零摩擦”的设计,让 Excalidraw 成为了“当你想画一张图时,第一个打开的工具”。

从“独立网站”到“React 组件”的嵌入能力。大多数白板工具只能作为独立网站使用。Excalidraw 以 npm 包形式发布,开发者可以将其直接嵌入 React 应用。Google Cloud、Meta、CodeSandbox、Obsidian、Replit 等都在用它。这种“白板即组件”的定位,让 Excalidraw 的能力可以被任何应用调用,而非局限于一个独立的网站。

从“云端依赖”到“本地优先 + 端到端加密”的数据主权。大多数协作工具将数据存储在云端,用户无法控制。Excalidraw 的本地优先设计让白板内容自动保存在浏览器中。协作时采用端到端加密——服务器无法读取内容。开源 MIT 协议允许任何团队将其私有化部署,完全掌控数据。

开放格式,不被平台锁定。Excalidraw 的所有图形可以导出为 .excalidraw JSON 文件——一种开放的、可读的格式。这意味着你的作品不被平台锁定,可以在任何支持该格式的工具中打开和编辑。对于注重数据长期可访问性的用户来说,这是一个关键优势。

130k+ Stars + MIT 开源 + 广泛生态集成。Excalidraw 在 GitHub 上获得超过 130k Stars。采用 MIT 许可证,完全开源免费可商用。生态集成覆盖 VS Code 扩展、Obsidian 插件、离线 Chrome 扩展、Nextcloud 集成等多种场景。Excalidraw+ 付费版提供云存储、团队库和密码保护链接分享等增强功能。

现实挑战与生态成熟度。Excalidraw 并非没有短板。首先,Excalidraw 不支持图层——这意味着在演示时无法像 Draw.io 那样逐层揭示图表的不同部分。其次,社区库中的图标质量参差不齐——热门图标(如 AWS 架构)容易找到,但其他图标可能需要费力搜索。再次,免费在线版的功能相对基础——云存储、团队库、密码保护链接等高级功能需要 Excalidraw+ 付费版。最后,Excalidraw 定位为“手绘风格白板”,对于需要精确尺寸、严格对齐或专业制图标准的场景,可能不如专用工具合适。

但恰恰是这些“短板”构成了 Excalidraw 在开源可视化工具生态中的独特位置:它不是一份可以“替代所有专业绘图软件”的全能工具,也不是一个“追求像素级精确”的制图软件,而是为那些希望快速把想法画出来、用草图沟通、用手绘风格降低表达压力的人准备的虚拟白板。

当越来越多的人开始意识到“画图不应该是离开思路去做另一件事”“手绘草图比精美图表更适合沟通想法”“真正的协作效率来自于打开就能画、发个链接就能一起画”,Excalidraw 给出了一种不同的答案。它无法让你一夜之间成为图表设计专家,但它为你铺设了一条从打开浏览器到无限画布、从拖拽形状到智能连接、从单人草图到实时协作、从 PNG/SVG 导出到 React 组件嵌入的可视化表达之路——这是开源白板工具领域最具“松弛感”和“零摩擦”精神的项目,也是无数人从“想画图但不知道用什么工具”走向“打开 Excalidraw 就画”的第一站。