Excalidraw

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

Github星跟蹤圖

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 应用。

 

主要指標

概覽
名稱與所有者excalidraw/excalidraw
主編程語言TypeScript
編程語言HTML (語言數: 8)
平台Docker, Linux, Mac, Web browsers
許可證MIT License
所有者活动
創建於2020-01-02 01:04:43
推送於2025-06-07 16:05:21
最后一次提交2025-06-07 18:05:20
發布數20
最新版本名稱v0.18.0 (發布於 )
第一版名稱v0.9.0 (發布於 )
用户参与
星數101.4k
關注者數454
派生數10k
提交數3.8k
已啟用問題?
問題數4101
打開的問題數1734
拉請求數3655
打開的拉請求數436
關閉的拉請求數979
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?

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