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