Excalidraw Skill for Claude Code

A Claude Code skill that transforms any text prompt into a hand-drawn Excalidraw-style diagram, saved as SVG + PNG locally. No browser, no Puppeteer, no MCP server.

What it does

Describe a diagram in plain English and get a hand-drawn sketch rendered locally in under a second:

• Flowcharts — decision trees, process flows, user journeys
• Architecture diagrams — services, databases, APIs, connections
• System designs — components, data flows, deployment pipelines

Output uses the authentic Excalidraw look: Virgil handwritten font for labels, Cascadia monospace for annotations, and roughjs for sketchy hand-drawn shapes.

Install

# Clone into your Claude Code skills directory
git clone https://github.com/aref-vc/excalidraw-skill.git ~/.claude/skills/excalidraw

# Install renderer dependencies
cd ~/.claude/skills/excalidraw/scripts && npm install

Usage

Once installed, trigger the skill in Claude Code:

/excalidraw user -> API gateway -> auth service -> database

Or describe what you want naturally:

draw me a hand-drawn architecture diagram with a load balancer,
three API servers, a Redis cache, and a PostgreSQL database

Output

By default, diagrams are saved to ~/Downloads/Excalidraw/ as both SVG and PNG (2x resolution).

To change the output directory, edit the OUTPUT_DIR line in SKILL.md:

OUTPUT_DIR: ~/Documents/My Diagrams/

Supported Elements

Features

Inline annotations

Add technical details directly on shapes with the annotation property. Annotations render in monospace below the label and auto-truncate with ellipsis if they exceed the shape bounds.

{
  "type": "rectangle",
  "label": "API Gateway",
  "annotation": "REST + WebSocket | Rate limited | JWT auth",
  "width": 200, "height": 100
}

Section labels

Group related shapes in zone rectangles with sectionLabel. The label renders bold at the top-left corner, inset from the edge.

{
  "type": "rectangle",
  "x": 30, "y": 80,
  "width": 500, "height": 220,
  "fill": "#e7f5ff",
  "sectionLabel": "API LAYER"
}

Title with subtitle