# Excalidraw — Collaborative Whiteboard & Diagrams

> Draw hand-sketched diagrams with real-time collaboration. Embeddable React component. The most popular whiteboard tool. 120K+ stars.

## Install

Save as a script file and run:

# Excalidraw — Collaborative Whiteboard & Diagrams

## Quick Use

Use instantly at [excalidraw.com](https://excalidraw.com) — no account needed.

Embed in your React app:
```bash
npm install @excalidraw/excalidraw
```

```tsx
import { Excalidraw } from '@excalidraw/excalidraw';

function App() {
    return (
        <div style={{ height: '600px' }}>
            <Excalidraw
                onChange={(elements, state) => console.log(elements)}
                initialData={{ elements: [] }}
            />
        </div>
    );
}
```

Self-host:
```bash
git clone https://github.com/excalidraw/excalidraw.git
cd excalidraw && npm install && npm start
```

---

## Intro

Excalidraw is an open-source virtual whiteboard with 120,000+ GitHub stars for creating hand-drawn style diagrams with real-time collaboration. It's the most popular diagramming tool on GitHub, used by millions for architecture diagrams, wireframes, flowcharts, and brainstorming. Available as a React component you can embed in any app, it supports dark mode, end-to-end encryption for shared sessions, and exports to PNG/SVG. For AI teams, Excalidraw is perfect for system design, architecture planning, and collaborative whiteboarding — with an AI-powered text-to-diagram feature.

Works with: React, any web browser, VS Code (extension), Obsidian, Notion. Best for teams who need visual collaboration for system design and architecture. Setup time: instant (web) or under 2 minutes (embed).

---

## Excalidraw Features

### Hand-Drawn Style

All shapes render with a hand-sketched aesthetic that's both beautiful and readable. Rectangles, circles, arrows, text, and freeform drawing.

### Real-Time Collaboration

Share a link and multiple people draw simultaneously:
- See each other's cursors
- End-to-end encrypted sessions
- No account required

### React Component

```tsx
import { Excalidraw } from '@excalidraw/excalidraw';

<Excalidraw
    initialData={{ elements: savedElements }}
    onChange={(elements) => saveToBackend(elements)}
    theme="dark"
    viewModeEnabled={false}
    zenModeEnabled={false}
    gridModeEnabled={true}
/>
```

### Export Options

- PNG (with transparent background option)
- SVG (scalable)
- JSON (for saving/loading)
- Clipboard copy
- Embeddable links

### Libraries

Import pre-made shape libraries:
- Architecture diagrams (AWS, GCP, Azure icons)
- UML components
- Flowchart shapes
- Wireframe elements
- Custom libraries from the community

### AI Features

- Text-to-diagram generation
- Shape recognition from freehand drawing
- Smart arrow connections

### Integrations

| Platform | Integration |
|----------|------------|
| **VS Code** | Excalidraw extension |
| **Obsidian** | Excalidraw plugin |
| **Notion** | Embed via iframe |
| **Docusaurus** | MDX component |
| **Any React app** | npm package |

---

## FAQ

**Q: What is Excalidraw?**
A: Excalidraw is an open-source whiteboard with 120,000+ GitHub stars for hand-drawn style diagrams with real-time collaboration. Available as a web app and embeddable React component.

**Q: Is Excalidraw encrypted?**
A: Yes, shared collaboration sessions use end-to-end encryption. No one (including Excalidraw servers) can read your drawings.

**Q: Is Excalidraw free?**
A: Yes, open-source under MIT license. The web app at excalidraw.com is free forever.

---

## Source & Thanks

> Created by [Excalidraw](https://github.com/excalidraw). Licensed under MIT.
>
> [excalidraw](https://github.com/excalidraw/excalidraw) — ⭐ 120,000+

---

<!-- ZH -->

## 快速使用

直接访问 [excalidraw.com](https://excalidraw.com) 开始画图，无需账号。

---

## 简介

Excalidraw 是拥有 120,000+ GitHub stars 的开源白板工具，手绘风格图表 + 实时协作。可作为 React 组件嵌入任何应用。支持端到端加密、暗色模式、PNG/SVG 导出。

---

## 来源与感谢

> Created by [Excalidraw](https://github.com/excalidraw). Licensed under MIT.
>
> [excalidraw](https://github.com/excalidraw/excalidraw) — ⭐ 120,000+


---
Source: https://tokrepo.com/en/workflows/3dd25a34-a489-45fe-8a2e-74d58792f9c8
Author: TokRepo精选