ai-agent

Excalidraw

Name: Excalidraw
Author: excalidraw

Virtual whiteboard for sketching hand-drawn like diagrams

129,920 stars14,900 forksTypeScriptUpdated 8/16/2026100% free · open source

What it does

A browser‑based whiteboard that lets you draw hand‑sketch style diagrams and export them as PNG, SVG or JSON.

When to use it

•Rapidly sketch user‑flow or product‑feature diagrams for investor decks.
•Create collaborative visual brainstorming sessions with remote team members.
•Export a clean, sketch‑style image to embed in landing‑page mockups.

Ready-to-paste prompt

`npm i @excalidraw/excalidraw && echo "import { Excalidraw } from '@excalidraw/excalidraw';\nexport default function App() { return <Excalidraw/>; }" > src/App.tsx && npm start`  // launches a minimal React page with the Excalidraw canvas ready for you to draw.

Heads up: Excalidraw requires Node 14 or newer; running it with Node 12 will cause a syntax error during the build.

Saves to your device

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

🛠️ Technical setup

Expect 20–40 minutes in a terminal — or let your AI agent drive it.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/excalidraw && curl -fsSL https://workflowstacks.com/api/skills/excalidraw/claude-skill -o ~/.claude/skills/excalidraw/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How Excalidraw works

Codeflow

Free to inspect

Excalidraw is a very large TypeScript project (~105k lines across 560 code files, plus 104 test files). It is a full software project: use it through its install path rather than reading it end to end. Last commit this month, MIT license, has a test suite.

Size

Very large codebase

~105k lines · 560 code files · days to read — use, don't read

Setup

Developer setup

A real software project. Use it via its install path; don't expect to read it all.

Runs on

Node.js · Docker

No API keys detected

TypeScript 94%SCSS 3%MDX 2%JavaScript 1%

Where to start reading

1
README.md
Start here — what it does and how to install it
2
CLAUDE.md
The instructions the AI actually follows
3
excalidraw-app/App.tsx
Where the program starts running
4
package.json
Dependencies and the commands it exposes
5
packages/excalidraw/index.tsx
Inside packages/excalidraw/ — the main logic begins here

What's in each folder

packages/excalidraw/Core code — the actual logic838 files

examples/Examples you can copy37 files

packages/element/Package84 files

dev-docs/Folder70 files

excalidraw-app/Folder51 files

packages/common/Package32 files

packages/math/Package29 files

scripts/Helper scripts20 files

READMEHas testsDocumentedCI checksDocker readyExamples includedMIT licenseUpdated this month

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

🛠️ Technical setup

Expect 20–40 minutes in a terminal — or let your AI agent drive it.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/excalidraw && curl -fsSL https://workflowstacks.com/api/skills/excalidraw/claude-skill -o ~/.claude/skills/excalidraw/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

Quick Actions

Details

Creator

excalidraw

Language

TypeScript