Excalidraw Skill — Design skill for Claude Code

excalidraw-skill

A [Claude Code](https://docs.claude.com/en/docs/claude-code/overview) / [Agent SDK](https://docs.claude.com/en/api/agent-sdk/overview) skill for programmatically generating **`.excalidraw`** files — architecture diagrams, flowcharts, annotated screenshots, side-by-side design reviews, timelines, mind maps, wireframes, and any other canvas layout you'd otherwise draw by hand.

The skill bundles a small pure-Python library for composing scenes, instructions that teach Claude how to use it well, and a set of runnable examples. When invoked, Claude writes a `.excalidraw` file to disk; you open it in [excalidraw.com](https://excalidraw.com) via **File → Open** (or `Cmd+O`) and see the full scene — images, shapes, arrows, text, annotations — all editable.

Why

Excalidraw stores entire scenes as a single JSON document. That means Claude can write one directly with no browser automation, no plugin API, and no clipboard hacks. The hard part is getting the element schema exactly right (every element needs `seed`, `version`, `versionNonce`, `boundElements`, `groupIds`, `roundness`, `updated`… and missing any of them causes Excalidraw to refuse the file). The library in `scripts/excalidraw.py` handles all of that so the caller only thinks about geometry and content.

Install

Clone into your Claude Code skills directory:

git clone https://github.com/nintynick/excalidraw-skill.git ~/.claude/skills/excalidraw-author

Or any other path Claude Code scans for skills. The directory name becomes the skill name — this repo ships as `excalidraw-author` because that's the identifier declared in `SKILL.md`'s frontmatter.

Restart Claude Code. The skill will appear in the registry and trigger automatically the next time you ask for an Excalidraw file.

What it does

Trigger phrases that reliably activate the skill:

• "Build me an Excalidraw file showing our authentication flow"
• *"Generate a .excalidraw diagram for this architecture: client