# Excalidraw — AI-Friendly Whiteboard & Diagramming

> Open-source virtual whiteboard for hand-drawn style diagrams. Export to SVG/PNG, real-time collaboration, and AI integrations for generating diagrams from text descriptions. 90,000+ stars.

## Install

Save in your project root:

## Quick Use

Visit [excalidraw.com](https://excalidraw.com) — start drawing immediately, no signup needed.

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

Generate diagrams with AI:
```
Prompt: "Draw a system architecture diagram with a React frontend,
         Node.js API, PostgreSQL database, and Redis cache"
```

---

## Intro

Excalidraw is an open-source virtual whiteboard for creating hand-drawn style diagrams with 90,000+ GitHub stars. It is the most popular diagramming tool in the developer community — used for system architecture, flowcharts, wireframes, and brainstorming. Real-time collaboration, export to SVG/PNG, and a growing ecosystem of AI integrations make it perfect for documenting AI systems and workflows. Best for developers and teams who need quick, beautiful diagrams without the overhead of Visio or Figma. Works with: any browser, self-hostable. Setup time: instant.

---

## Why Developers Love It

### Hand-Drawn Style
Diagrams look informal and approachable — perfect for architecture discussions, not formal documentation.

### Instant Start
No account, no login, no install. Open excalidraw.com and start drawing.

### Real-Time Collaboration
Share a link and draw together:
```
https://excalidraw.com/#room=abc123
```

### Developer-Friendly Features

| Feature | Description |
|---------|-------------|
| `.excalidraw` files | JSON format, git-friendly |
| SVG/PNG export | Embed in docs, READMEs, PRs |
| Dark mode | Native dark theme |
| Libraries | Reusable component libraries |
| Embeddable | React component available |

### AI Diagram Generation
Use with Claude Code or ChatGPT to generate diagrams:

```
"Create an Excalidraw diagram showing:
- User sends request to API Gateway
- Gateway routes to Auth Service and Product Service
- Both services connect to PostgreSQL
- Product Service uses Redis cache"
```

AI generates `.excalidraw` JSON that opens directly in Excalidraw.

### Common Diagram Types

| Type | Use Case |
|------|----------|
| System architecture | Microservices, cloud infra |
| Flowcharts | Business logic, algorithms |
| Sequence diagrams | API call flows |
| Wireframes | UI mockups |
| ER diagrams | Database schema |
| Mind maps | Brainstorming, planning |

### React Component

```jsx
import { Excalidraw } from "@excalidraw/excalidraw";

function DiagramEditor() {
  return (
    <div style={{ height: "500px" }}>
      <Excalidraw />
    </div>
  );
}
```

### VS Code Extension
Edit `.excalidraw` files directly in VS Code with the Excalidraw extension.

### Key Stats
- 90,000+ GitHub stars
- No signup required
- Real-time collaboration
- SVG/PNG/JSON export
- React component + VS Code extension

### FAQ

**Q: What is Excalidraw?**
A: An open-source virtual whiteboard for creating hand-drawn style diagrams — system architecture, flowcharts, wireframes, and more — with real-time collaboration.

**Q: Is Excalidraw free?**
A: Yes, fully open-source under MIT. Excalidraw+ (paid) adds team features.

**Q: Can AI generate Excalidraw diagrams?**
A: Yes, Claude and GPT-4 can generate `.excalidraw` JSON files from text descriptions.

---

## Source & Thanks

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

Thanks for making diagramming effortless for developers.

---

<!-- ZH -->

## 快速使用

访问 [excalidraw.com](https://excalidraw.com) — 无需注册，立即开始绘图。

---

## 简介

Excalidraw 是一个开源虚拟白板，GitHub 90,000+ stars。手绘风格图表，实时协作，导出 SVG/PNG。开发者社区最流行的图表工具，用于系统架构、流程图、线框图。支持 AI 从文本描述生成图表。

---

## 来源与感谢

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

---
Source: https://tokrepo.com/en/workflows/492f59b6-623e-47e1-880d-12b629f9e036
Author: AI Open Source