[Claude Code] Excalidraw MCP 설정하기

Excalidraw MCP?

AI에게 자연어로 다이어그램을 그리게 할 수 있는 MCP 서버다. 아키텍처 다이어그램, 플로차트, 시퀀스 다이어그램 등을 Excalidraw 특유의 손그림 스타일로 생성한다.

Mermaid 문법으로 다이어그램을 만들던 방식과 달리, Excalidraw MCP는 시각적 요소(위치, 크기, 색상, 화살표 바인딩 등)를 직접 제어하기 때문에 더 자유롭고 세밀한 다이어그램이 나온다.

GitHub: excalidraw/excalidraw-mcp

공식 vs 커뮤니티

Excalidraw MCP는 여러 종류가 있다.

	공식 (excalidraw/excalidraw-mcp)	커뮤니티 (yctimlin/mcp_excalidraw 등)
방식	MCP Apps (인라인 렌더링)	로컬 Canvas 서버 + 브라우저
설치	.mcpb 원클릭 또는 로컬 빌드	clone → build → 서버 2개 실행
다이어그램 확인	채팅 내 인라인 + 풀스크린 편집	localhost:3000 브라우저에서 확인
실시간 편집	풀스크린 모드에서 직접 수정 가능	브라우저 Canvas에서 수정
도구 수	create_view, read_me, export_to_excalidraw 등	26개 도구 (CRUD, 스냅샷, 스크린샷 등)
적합 대상	빠른 다이어그램 생성	반복 수정·정밀 제어가 필요한 경우

이 글에서는 공식 MCP 설정을 다룬다.

사전 준비

• Node.js
• pnpm
• Claude Code 또는 Claude Desktop

1. 설치

Claude Desktop에서 사용하는 경우

방법 A: .mcpb 파일 설치 (가장 간단)
GitHub Releases에서 excalidraw-mcp-app.mcpb 파일을 다운로드하고 더블클릭하면 끝이다.
Claude Desktop 전용. 별도 설정 없이 바로 사용 가능하다.

 

방법 B: 로컬 빌드

git clone https://github.com/excalidraw/excalidraw-mcp.git
cd excalidraw-mcp/excalidraw-mcp-app
npm install && npm run build

 

claude_desktop_config.json
(macOS 기준 경로: ~/Library/Application Support/Claude/claude_desktop_config.json)에 추가

{
  "mcpServers": {
    "excalidraw": {
      "command": "node",
      "args": ["/absolute/path/to/excalidraw-mcp/excalidraw-mcp-app/dist/index.js", "--stdio"]
    }
  }
}

 

Claude Code에서 사용하는 경우

Excalidraw 팀이 https://mcp.excalidraw.com에 MCP 서버를 호스팅해두었기 때문에 아래 명령어 한 줄이면 된다

claude mcp add excalidraw --scope user --transport http https://mcp.excalidraw.com/mcp

• 원격 (http) — Excalidraw가 운영하는 서버에 HTTP로 통신. 로컬 설치 불필요

2. 등록 확인

claude mcp list

 

excalidraw이 목록에 보이면 등록 완료다.

Claude Code에서 /mcp 치면 연결 상태도 확인 가능하다.

 

3. 사용법

기본 흐름

1. Claude가 read_me 도구를 호출해 Excalidraw 요소 포맷 레퍼런스를 로드
2. create_view 도구로 다이어그램 생성
3. 채팅 내에서 인라인으로 렌더링되고, 풀스크린 버튼으로 직접 편집 가능

주요 도구

도구설명

read_me	Excalidraw 요소 포맷 레퍼런스 로드
create_view	다이어그램 생성/업데이트
export_to_excalidraw	excalidraw.com 공유 URL 생성

사용 예시

"사용자 → API 서버 → DB 구조의 아키텍처 다이어그램 그려줘"
"이 코드베이스의 모듈 의존성 플로차트 만들어줘"
"주문 프로세스 시퀀스 다이어그램으로 시각화해줘"

 

반복 수정

create_view 호출 시 restoreCheckpoint를 사용하면 이전 상태를 복원한 뒤 수정할 수 있다. AI가 그린 초안을 기반으로 풀스크린 편집기에서 직접 수정하고, 변경 사항은 자동으로 저장된다.

주의

• MCP Apps를 지원하는 클라이언트에서만 인라인 렌더링 가능 (Claude Desktop, ChatGPT, VS Code 등)
• Claude Code CLI에서는 인라인 렌더링 대신 JSON 형태로 출력될 수 있음
• 복잡한 다이어그램은 한 번에 완성되지 않을 수 있으므로, 점진적으로 요소를 추가하는 방식이 효과적
• export_to_excalidraw으로 생성한 URL은 누구나 접근 가능하므로 민감한 내용 주의