excalidraw

excalidraw / excalidraw

开源的虚拟白板工具,支持手绘风格图表与实时协作,帮助用户快速绘制草图、流程图和架构图。

TypeScript Web 开发 开发工具 白板 手绘风格 实时协作 图表绘制

为什么值得看

编辑点评

Excalidraw 以独特的手绘视觉风格和简洁交互著称,适合产品经理、设计师和开发者快速表达想法。支持实时协作、端到端加密,且易于嵌入到 Web 应用中。缺点是功能相对轻量,复杂图表能力不如专业绘图工具,超大画布下性能可能下降。非常适合做原型草图、技术架构讨论和白板头脑风暴。

Star 趋势

近 7 日
  • Star 总数132,135
  • 今日新增+47
  • 7 日增速+62%
  • Fork15,312

同类项目

同场景 · Web 开发 / 开发工具

项目文档

来自 GitHub README · master 分支

<source media="(prefers-color-scheme: dark)" alt="Excalidraw" srcset="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github/excalidraw_github_cover_2_dark.png" />

Excalidraw Editor | Blog | Documentation | Excalidraw+

An open source virtual hand-drawn style whiteboard.
Collaborative and end-to-end encrypted.

<a href="https://excalidraw.com" target="_blank" rel="noopener">

</a>
<figcaption>
  <p align="center">
    Create beautiful hand-drawn like diagrams, wireframes, or whatever you like.
  </p>
</figcaption>

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

Note: following instructions are for installing the Excalidraw npm package when integrating Excalidraw into your own app. To run the repository locally for development, please refer to our Development Guide.

Use npm or yarn to install the package.

npm install react react-dom @excalidraw/excalidraw
# or
yarn add react react-dom @excalidraw/excalidraw

Check out our documentation for more details!

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

文档抓取自 GitHub 仓库 README,版权归原作者所有;已过滤徽章等噪音并经安全消毒后展示。