Excalidraw

用于绘制手绘图表的虚拟白板。「Virtual whiteboard for sketching hand-drawn like diagrams.」

Github stars Tracking Chart

Excalidraw

开源虚拟手绘风格白板。协作式、端到端加密。

一个开源的虚拟手绘式白板。协作性和端到端加密。

创建漂亮的手绘图,线框图,或任何你喜欢的。

功能介绍

Excalidraw 编辑器(npm 包)支持:

  • 💯 免费和开源。
  • 🎨 无限的、基于画布的白板。
  • ✍️ 像手绘的风格。
  • 🌓 黑暗模式。
  • 🏗️ 可定制。
  • 📷 图像支持。
  • 😀 形状库支持。
  • 👅 本地化(i18n)支持。
  • 🖼️ 输出到 PNG、SVG 和剪贴板。
  • 💾 开放格式--以 .excalidraw json 文件导出图纸。
  • ⚒️ 广泛的工具 - 矩形、圆形、菱形、箭头、直线、自由绘制、橡皮擦...
  • ➡️ 箭头绑定和标记的箭头。
  • 🔙 撤销/重做。
  • 🔍 支持缩放和平移。

Excalidraw.com

excalidraw.com 上的应用程序是一个最小的展示,展示了你可以用 Excalidraw 建立什么。它的源代码也是这个资源库的一部分,该应用的特点是:

  • 📡 支持PWA(离线工作)。
  • 🤼 实时协作。
  • 🔒 端到端加密。
  • 💾 本地优先支持(自动保存到浏览器)。
  • 🔗 可共享链接(导出为只读链接,可与他人共享)。

我们将在未来把这些功能作为 npm 包的插入式插件来添加。

快速启动

安装 Excalidraw npm 包。

npm install react react-dom @excalidraw/excalidraw

或者通过 yarn

yarn add react react-dom @excalidraw/excalidraw

不要忘记查看我们的文档。

运行代码

代码沙盒

本地安装

这些说明会让你在你的本地机器上得到一个项目的副本,并在你的本地机器上运行,用于开发和测试。

克隆 Repo

git clone https://github.com/excalidraw/excalidraw.git

命令

命令 描述
npm install 安装依赖
npm start 运行项目
npm run fix 用 Prettier 重新格式化所有文件
npm test 运行测试
npm run test:update 快照更新测试
npm run test:code 用 Prettier 测试格式化

Docker Compose

如果不想设置Node.js env,可以使用docer -compose在本地处理excalidraw。

docker-compose up --build -d

自我托管(Self hosting)

我们在 excalidraw/excalidraw 发布了一个带有 Excalidraw 客户端的 Docker 镜像。你可以用它在自己的域名下、Kubernetes、AWS ECS 等平台上自助托管自己的客户端。

docker build -t excalidraw/excalidraw
docker run --rm -dit --name excalidraw -p 5000:80 excalidraw/excalidraw:last

Docker 镜像不含分析和其他跟踪库。

目前,自助托管自己的实例不支持共享或协作功能。

我们正在努力为自托管自己的 Excalidraw 提供一个完整的解决方案。

贡献

欢迎提出拉请求。对于重大的改动,请先打开一个问题来讨论你想改动的内容。

翻译

要将 Excalidraw 翻译成其他语言,请访问 我们的 Crowdin 页面。要添加新的语言,请打开一个问题,这样我们就可以先在我们的终端上进行设置。

如果翻译的完成度超过一定的阈值(目前为85%),就可以在应用上使用。

Excalidraw 是使用这些超棒的工具构建的。

而启动这个项目的主要灵感来源就是厉害的 Zwibbler 应用。

 

Main metrics

Overview
Name With Ownerexcalidraw/excalidraw
Primary LanguageTypeScript
Program languageHTML (Language Count: 8)
PlatformDocker, Linux, Mac, Web browsers
License:MIT License
所有者活动
Created At2020-01-02 01:04:43
Pushed At2025-04-18 09:11:14
Last Commit At2025-04-18 11:11:12
Release Count20
Last Release Namev0.18.0 (Posted on )
First Release Namev0.9.0 (Posted on )
用户参与
Stargazers Count97.8k
Watchers Count446
Fork Count9.5k
Commits Count3.7k
Has Issues Enabled
Issues Count3996
Issue Open Count1700
Pull Requests Count3605
Pull Requests Open Count408
Pull Requests Close Count957
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private

Features

The Excalidraw editor (npm package) supports:

  • 💯 Free & open-source.
  • 🎨 Infinite, canvas-based whiteboard.
  • ✍️ Hand-drawn like style.
  • 🌓 Dark mode.
  • 🏗️ Customizable.
  • 📷 Image support.
  • 😀 Shape libraries support.
  • 👅 Localization (i18n) support.
  • 🖼️ Export to PNG, SVG & clipboard.
  • 💾 Open format - export drawings as an .excalidraw json file.
  • ⚒️ Wide range of tools - rectangle, circle, diamond, arrow, line, free-draw, eraser...
  • ➡️ Arrow-binding & labeled arrows.
  • 🔙 Undo / Redo.
  • 🔍 Zoom and panning support.

Excalidraw.com

The app hosted at excalidraw.com is a minimal showcase of what you can build with Excalidraw. Its source code is part of this repository as well, and the app features:

  • 📡 PWA support (works offline).
  • 🤼 Real-time collaboration.
  • 🔒 End-to-end encryption.
  • 💾 Local-first support (autosaves to the browser).
  • 🔗 Shareable links (export to a readonly link you can share with others).

We'll be adding these features as drop-in plugins for the npm package in the future.

Quick start

Install the Excalidraw npm package:

npm install react react-dom @excalidraw/excalidraw

or via yarn

yarn add react react-dom @excalidraw/excalidraw

Don't forget to check out our Documentation!

Contributing

Integrations

Who's integrating Excalidraw

Google CloudMetaCodeSandboxObsidian ExcalidrawReplitSliteNotionHackerRank • and many others

Sponsors & support

If you like the project, you can become a sponsor at Open Collective or use Excalidraw+.

Thank you for supporting Excalidraw

Last but not least, we're thankful to these companies for offering their services for free:

Vercel Sentry Crowdin