excalidraw-diagram-skill: Skill to give Claude Code (and any coding agent) the ability to generate beautiful and practical Excalidraw diagrams.

🔗 View on GitHub: coleam00/excalidraw-diagram-skill

🚀 Quick Installation

Generate beautiful and practical Excalidraw diagrams from natural language descriptions.

Clone & Copy

git clone https://github.com/coleam00/excalidraw-diagram-skill.git
cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram

Setup Renderer

cd .claude/skills/excalidraw-diagram/references
uv sync
uv run playwright install chromium

What It Does

A coding agent skill that generates beautiful and practical Excalidraw diagrams from natural language descriptions. Not just boxes-and-arrows — diagrams that argue visually.

Key Features

• 🎯 Diagrams that argue, not display — Every shape/group mirrors the concept: fan-outs for one-to-many, timelines for sequences, convergence for aggregation. No uniform card grids.
• 📋 Evidence artifacts — Technical diagrams include real code snippets and actual JSON payloads.
• ✅ Built-in visual validation — Playwright-based render pipeline lets the agent see its own output, catch layout issues, and fix them before delivering.
• 🎨 Brand-customizable — All colors and styles live in a single file (references/color-palette.md). Swap it out and every diagram follows your palette.

How It Works

1. Concept Mapping — Analyze the request and map to visual concepts
2. Layout Design — Plan the visual structure and flow
3. JSON Generation — Create Excalidraw-compatible JSON
4. Rendering — Convert to PNG via Playwright
5. Visual Validation — Check for overlaps, misalignments, spacing issues

Example Usage

"Create an Excalidraw diagram showing how the AG-UI protocol streams events from an AI agent to a frontend UI"

"Diagram the microservices architecture of our e-commerce platform"

"Visualize the data flow in our authentication system"

Skill Structure

excalidraw-diagram/
├── SKILL.md              # Design methodology + workflow
├── references/
│   ├── color-palette.md  # Brand colors (customize here)
│   ├── element-templates.md  # JSON templates
│   ├── json-schema.md    # Excalidraw format reference
│   ├── render_excalidraw.py  # Render to PNG
│   └── render_template.html  # Browser template
└── pyproject.toml        # Python dependencies

👤 Built by Cole Medin | 🎨 Excalidraw | 🐛 Report Issues