ScriptsApr 3, 2026·2 min read

Excalidraw — Collaborative Whiteboard & Diagrams

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

TO
TokRepo精选 · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

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 (
console.log(elements)} initialData={{ elements: [] }} />
); } ``` 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'; 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+

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets