텍스트 설명을 라이브 엑스칼리 그림 캔버스에 전문 다이어그램으로 켭니다. 당신의 AI 대리인은, 스크린샷 그것의 자신의 일을 끌고, 그것도 맞을 때까지 iterates.

당신이 얻는 것

• 10 시각적 기술 – 글로우 효과, 컬러 코딩 영역, 경계 화살표, 결정 노드, 글꼴 hierarchy, semantic 색상 및 더 많은
• Self-correcting diagrams – 에이전트는 스크린 샷을 통해 자신의 캔버스를보고 문제를 자동으로 수정
• Layout 모범 사례 – 전략 규칙, 화살표 라우팅, 실제로 작업 영역 라벨 -Quality checklist – 당신이 수출하기 전에 truncation, overlap 및 나쁜 화살표를 잡아 -Multiple export – PNG, SVG, .excalidraw(re-editable), 또는 공유 가능한 URL

필수품

MCP 서버를 설치하고 실행해야 합니다.

##1. 클론과 MCP 서버를 구축

##2. Claude 코드에 추가

/absolute/path/to/] 를 대신하여 repo를 복제합니다.

##3. 캔버스 시작

http://localhost:3000 브라우저에서 라이브 캔버스를 볼 수 있습니다.

기술 설치

또는 수동 : 프로젝트의 .claude/skills/excalidraw/] 폴더에 [T2]을 복사합니다.

그것을 시도

MCP 서버가 실행되면 기술이 설치됩니다

Excalidraw Skill for Claude Code

Turn text descriptions into professional diagrams on a live Excalidraw canvas. Your AI agent draws, screenshots its own work, and iterates until it looks right.

What You Get

• 10 visual techniques – glow effects, color-coded zones, bound arrows, decision nodes, font hierarchy, semantic colors, and more
• Self-correcting diagrams – the agent sees its own canvas via screenshots and fixes issues automatically
• Layout best practices – spacing rules, arrow routing, zone labels that actually work
• Quality checklist – catches truncation, overlap, and bad arrows before you export
• Multiple exports – PNG, SVG, .excalidraw (re-editable), or shareable URL

Prerequisites

You need the Excalidraw MCP server installed and running.

1. Clone and build the MCP server

git clone https://github.com/yctimlin/mcp_excalidraw && cd mcp_excalidraw
npm ci && npm run build

2. Add to Claude Code

claude mcp add excalidraw -s user \
  -e EXPRESS_SERVER_URL=http://localhost:3000 \
  -- node /absolute/path/to/mcp_excalidraw/dist/index.js

Replace /absolute/path/to/ with wherever you cloned the repo.

3. Start the canvas

cd /path/to/mcp_excalidraw
PORT=3000 npm run canvas

Open http://localhost:3000 in your browser to see the live canvas.

Install the Skill

claude skill add --url https://raw.githubusercontent.com/robonuggets/excalidraw-skill/main/.claude/skills/excalidraw/SKILL.md

Or manually: copy .claude/skills/excalidraw/SKILL.md into your project’s .claude/skills/excalidraw/ folder.

Try It

Once the MCP server is running and the skill is installed:

• “Draw an architecture diagram for a web app with a load balancer, two servers, and a database”
• “Create a flowchart showing user authentication with success and failure paths”
• “Make a comparison diagram: monolith vs microservices”

Visual Techniques Included

Known Limitations

• Images: Can’t be added via MCP – drag them into the browser manually
• Freedraw: Draw freehand in the browser, not via MCP
• SVG import: Use the browser’s native paste feature

License

MIT