SVG + PNG로 저장 된 Hand-drawn Excalidraw-style 다이어그램으로 텍스트 프롬프트를 변환하는 Claude Code 기술. 브라우저 없음, Puppeteer 없음, MCP 서버 없음.

무엇 그것

일반 영어의 다이어그램을 설명하고 두 번째 아래에서 손으로 그리는 스케치 렌더링을 얻을:

• Flowcharts - 결정 나무, 프로세스 흐름, 사용자 여행
• Architecture diagrams - 서비스, 데이터베이스, API, 연결
• 시스템 설계 — 구성 요소, 데이터 흐름, 배포 파이프라인

출력은 정통 Excalidraw 보기를 이용합니다: 상표를 위한 Virgil handwritten 글꼴, annotations를 위한 Cascadia monospace, sketchy 손 그림 모양을 위한 roughjs.

설치

사용법

설치되면 Claude Code의 기술을 트리거하십시오.

또는 자연스럽게 원하는 것을 설명:

산출

기본적으로, 다이어그램은 SVG와 PNG (2x 해상도) 모두로 ~/Downloads/Excalidraw/에 저장됩니다.

출력 디렉토리를 변경하려면 OUTPUT_DIR] 줄을 SKILL.md:

지원 요소

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