ExcaliClaude: Claude가 브라우저의 Excalidraw 캔버스에 직접 그림을 그리게 하는 MCP 도구

커뮤니티 반응

실시간으로 캔버스에 도형이 그려지는 기능에 대해 긍정적인 반응이며, 특히 아키텍처 설계 시 유용할 것이라는 기대가 많다.

주요 논점

01찬성다수

기존 Claude.ai의 제한적인 드로잉 환경을 극복하고 실제 작업 중인 캔버스에서 협업할 수 있어 실무 효율성이 높다.

합의점 vs 논쟁점

합의점

Excalidraw의 협업 프로토콜을 활용한 접근 방식이 창의적이고 실용적이다.
단순 생성을 넘어 기존 요소를 수정하고 그룹화하는 기능이 에이전트로서의 가치를 높인다.

논쟁점

텍스트 렌더링 시 DOM 측정값이 없어 정확한 중앙 정렬이나 픽셀 단위 배치가 어렵다는 기술적 한계가 존재한다.

실용적 조언

Claude Code 사용자라면 npx 명령어로 즉시 설정하여 시스템 아키텍처나 UI 와이어프레임 초안 작성에 활용할 수 있다.
다이어그램 생성 시 요소가 겹친다면 MCP 도구 설명에 정의된 레이아웃 규칙을 참고하여 프롬프트를 보강하면 도움이 된다.

섹션별 상세

Excalidraw의 네이티브 협업 프로토콜을 활용하여 별도의 브라우저 확장 프로그램이나 API 키 없이도 실시간 드로잉이 가능하다. 사용자가 공유 링크를 Claude에게 제공하면 Claude가 협업자로 참여하여 캔버스에 도형을 생성하고 텍스트를 입력하는 방식으로 작동한다. 이 방식은 기존 요소를 읽고 부분적으로 업데이트하거나 실행 취소(Undo)를 수행하는 등 고도화된 상호작용을 지원한다.

모바일 애플리케이션의 계정 생성 흐름을 보여주는 Excalidraw 다이어그램 예시 — DiagramExcaliClaude를 통해 생성된 것으로 보이는 7단계의 사용자 흐름도이다. 회원가입, 비밀번호 설정, 인증, 프로필 입력 등 복잡한 UI 흐름을 Claude가 논리적으로 배치하고 화살표로 연결할 수 있음을 증명하는 근거 자료로 활용된다.

Claude가 다이어그램 레이아웃을 적절히 배치하도록 MCP 도구 설명 내에 구체적인 레이아웃 규칙을 내장했다. 화살표가 텍스트를 가로지르거나 요소가 겹치는 문제를 해결하기 위해 도형 간 간격 확보 및 textAlign 속성 사용 등의 지침을 프롬프트 수준에서 강제한다. 이를 통해 픽셀 단위의 완벽함은 아니더라도 실무에서 즉시 사용 가능한 수준의 아키텍처 다이어그램 생성이 가능해졌다.

bash

npx excaliclaude setup

Claude Code 환경에서 excaliclaude MCP 도구를 설정하는 명령어

Claude Code CLI 환경을 주 타겟으로 설계되었으나 MCP 표준을 준수하므로 Cursor나 Windsurf와 같은 다른 에이전트 환경에서도 호환된다. npx 명령어를 통한 간편한 설치를 지원하며 깃허브 저장소를 통해 오픈소스로 공개되어 커뮤니티의 피드백을 수용하고 있다.

용어 해설

모델 컨텍스트 프로토콜(Model Context Protocol): — Anthropic이 제안한 개방형 표준으로 AI 에이전트가 외부 도구, 데이터 소스 및 서비스와 안전하고 일관되게 상호작용할 수 있도록 설계된 인터페이스 규격이다. 이를 통해 서로 다른 AI 클라이언트에서도 동일한 도구를 재사용할 수 있다.
엑스칼리드로우(Excalidraw): — 가상 화이트보드 도구로 손으로 그린 듯한 느낌의 다이어그램과 와이어프레임을 제작할 수 있는 오픈소스 웹 서비스이다. 실시간 협업 기능을 지원하며 개발자들 사이에서 시스템 아키텍처 설계용으로 널리 사용된다.
npx: — Node.js 패키지 실행 도구로 패키지를 로컬에 영구적으로 설치하지 않고도 최신 버전의 실행 파일을 즉시 실행할 수 있게 해준다. MCP 도구와 같은 CLI 기반 유틸리티를 빠르게 설정하고 실행할 때 유용하다.

언급된 도구

ExcaliClaude추천

Claude가 Excalidraw 캔버스에 실시간으로 그림을 그리게 하는 MCP 도구

Excalidraw추천

협업 가능한 가상 화이트보드 서비스

언급된 리소스

GitHubexcaliclaude GitHub Repository