excalidraw-skill

Excalidraw Toolkit

An AI-powered diagramming toolkit for Claude Code. Say "diagram this repo" and watch your codebase turn into an architecture diagram on a live Excalidraw canvas.

> diagram this repo

I found 6 components and 5 connections:
  - Next.js Frontend → API Routes (REST)
  - API Routes → Prisma ORM → PostgreSQL (SQL)
  - API Routes → NextAuth (auth) + Stripe API (payments)

Does this look right?

> looks good

[Building diagram on live canvas...]

Install

npx excalidraw-toolkit init
npx excalidraw-toolkit start

Two commands. init copies skills to ~/.claude/plugins/ and configures the MCP server. start clones, builds, and launches the canvas server (first run), then opens your browser.

Restart Claude Code and try: "diagram this repo"

Verify setup with:

npx excalidraw-toolkit doctor

/plugin marketplace add edwingao28/excalidraw-skill
/plugin install excalidraw@excalidraw-skill

What You Get

Auto-Diagram — Zero-Config Codebase Visualization

Just say "diagram this repo". No description needed.

The auto-diagram skill runs a 6-phase pipeline:

1. Detect project type (monorepo, microservices, standard app) and framework (Next.js, Django, Go, Rails, etc.)
2. Discover components (frontend, API routes, database, queues, cache, auth, external services)
3. Map connections between components (REST, SQL, gRPC, events, imports)
4. Verify with you before drawing — presents a summary, asks for confirmation
5. Choose layout (vertical flow, horizontal pipeline, hub-and-spoke, or zoned modules)
6. Generate the diagram on the live canvas with color-coded components

Works with any language. Context budget prevents blowout on large codebases.

Agentic Self-Critique

Every diagram goes through an automatic quality check before you see it:

1. Snapshot the canvas for rollback safety
2. Geometric validation via query_elements — detects overlapping shapes, cramped spacing, broken zones
3. Visual validation via screenshot — checks arrow labels, text readability, title, centering
4. Auto-fix up to 2 rounds. If fixes make things worse, rolls back to the snapshot

You never see a broken diagram. The self-critique loop catches layout issues that would otherwise require manual tweaking.

Described Diagrams

When you know what you want, describe it:

"Draw a microservices architecture with: React frontend, API Gateway,
Auth Service, User Service, Order Service, RabbitMQ, PostgreSQL, Redis"

Or trace data flows:

"Trace how the auth token flows from login to API request to database query"

Or convert from Mermaid:

"Create an excalidraw diagram from this mermaid:
graph TD; A[Frontend] -->|REST| B[API]; B -->|SQL| C[Database]"

Examples

Same prompt, two renderers: Markdown (Mermaid via create_from_mermaid) vs Excalidraw (native canvas via batch_create_elements).

Microservices Architecture

Markdown	Excalidraw

CI/CD Pipeline

Markdown	Excalidraw

Event-Driven System

Markdown	Excalidraw

Data Pipeline

Markdown	Excalidraw

Architecture

The toolkit has three layers — only the first is bundled:

How It Works

Two skills, one toolkit:

Both skills use MCP tools to draw on a live Excalidraw canvas: