Build an AI Diagram Generator with Claude Code + Excalidraw

What you'll build

A Claude Code skill that turns plain-English prompts into clean Excalidraw diagrams - workflows, architectures, business processes - in under a minute, no manual sketching.

What you'll need

• Mac or PC
• Claude Pro subscription ($20/mo)
• Antigravity (or VS Code) as your IDE
• A Claude Code agent with a CLAUDE.md already set up (see the Claude Code 101 lesson if you haven't)
• ~15 minutes

Step 1: Install Claude Code + your IDE

If you don't already have Claude Code running inside Antigravity (or VS Code), do that first. Open terminal, paste the install command from the Claude Code Quickstart, then add the Claude Code extension inside the IDE and pin it to your workspace.

Step 2: Grab the skills from the repo

The two diagram skills + the skill builder are all in one repo:

github.com/austinpeechatt/claude-code-skills

You want three folders:

• /excalidraw-diagram - full version, for complex multi-zone diagrams
• /excalidraw-lite - lightweight version, fewer tokens, for simple flows
• /skill-builder - framework for creating new skills (use this any time you want to build the next one)

Drop all three into your agent's skills/ folder.

Step 3: Lock in a solid CLAUDE.md

Skills only work as well as the agent running them. If your CLAUDE.md is vague, the diagrams will be vague.

Fast path:

1. Open the Claude Code Best Practices page
2. Copy the entire page, paste it into your Claude Code chat
3. Ramble for 2-3 minutes about what this agent is for ("you're my architecture assistant, you help me design clean diagrams for X, Y, Z…")
4. Hit enter - it writes a tight CLAUDE.md based on best practices plus your context

Step 4: Turn on bypass permissions (optional but recommended)

Skills constantly ask for permission to write files. It gets old fast.

In Antigravity: Extensions → Manage (Claude Code) → Settings → Allow bypass permissions mode ON

Sounds aggressive - it's not. The agent is scoped to one workspace folder. This just stops the constant pop-ups.

Step 5: Generate a simple diagram with /excalidraw-lite

In the Claude Code chat, prompt it directly. Example:

Use /excalidraw-lite to build a diagram showing my YouTube video process:
planning → scripting → recording → editing → description → thumbnail → posting.

It'll think, write the .excalidraw file into your diagrams folder, and tell you where it saved it. Open Excalidraw → Load from file → pick the file. Done.

Use /excalidraw-lite for anything ≤10 nodes - flows, simple processes, basic relationships. Lower token cost.

Step 6: Generate a complex diagram with /excalidraw-diagram

Same pattern, more ambition:

Use /excalidraw-diagram to build me a complete workflow for [system].
Make it aesthetically clean - multiple zones, color coding, nested containers.

Give it ~2-3 minutes. Output goes to the same folder. Load it in Excalidraw the same way.

Use this one for architecture, multi-zone systems, anything with nested groups or 10+ components.

Step 7: Tell Claude to remember what it learned

At the end of any session where the agent figured something out (a better prompt pattern, a fix, a layout choice you liked), say:

Update your CLAUDE.md with the lessons learned from this session.

This is the compounding part. Context resets every session - but CLAUDE.md carries forward. The more you do this, the sharper the agent gets at producing diagrams you actually like.

Resources

• claude-code-skills repo - /excalidraw-diagram, /excalidraw-lite, /skill-builder
• Claude Code Best Practices - paste this into chat when building your CLAUDE.md
• Claude Code Quickstart - install instructions
• Wispr Flow - voice dictation, makes the "ramble at Claude" step way faster (1 free month)