excalidraw/excalidraw-mcp View GitHub Homepage for Latest Official Releases

AI 클라이언트가 대화창에서 직접 부드러운 뷰포트 카메라 제어 및 전체 화면 편집 기능을 통해 대화형 손그림 Excalidraw 다이어그램을 생성하고 렌더링할 수 있도록 하는 빠르고 스트리밍 가능한 MCP 서버.

TypeScriptexcalidraw-mcpexcalidraw 2.7k Last Updated: February 20, 2026

Excalidraw MCP 앱 서버

빠르고 스트리밍 가능한 Excalidraw MCP 앱 — AI 채팅 클라이언트 내에서 직접 아름다운 손그림 다이어그램을 생성하세요.

📌 개요

Excalidraw MCP는 Excalidraw 팀에서 구축한 오픈 소스 모델 컨텍스트 프로토콜(MCP) 서버입니다. AI 클라이언트(Claude, ChatGPT, VS Code, Goose 등)가 Excalidraw로 구동되는 대화형 손그림 스타일 다이어그램을 생성하고 렌더링할 수 있도록 하여 AI 언어 모델과 시각적 다이어그램 간의 격차를 해소합니다. — 이 모든 것이 채팅 인터페이스 자체 내에서 이루어집니다.

이 MCP 서버는 다이어그램의 텍스트 설명을 반환하는 대신, 부드러운 뷰포트 카메라 제어 및 전체 화면 편집 모드를 갖춘 대화형 HTML 캔버스를 클라이언트로 스트리밍합니다.

✨ 주요 기능

  • 스트리밍 가능한 다이어그램: 정적 이미지가 아닌 채팅 창에 직접 렌더링되는 라이브 대화형 HTML로 다이어그램을 반환합니다.
  • 손그림 미학: 생성된 모든 다이어그램에 Excalidraw의 시그니처인 스케치되고 손으로 그린 듯한 시각적 스타일을 활용합니다.
  • 부드러운 카메라 제어: 뷰포트 이동 및 확대/축소를 지원하여 사용자가 큰 다이어그램을 편안하게 탐색할 수 있습니다.
  • 전체 화면 편집: 사용자는 AI 생성 후 생성된 다이어그램을 전체 화면 편집기에서 열어 수동으로 수정할 수 있습니다.
  • MCP 앱 표준: 서버가 일반 텍스트 대신 풍부한 대화형 UI 구성 요소를 반환할 수 있도록 하는 공식 MCP 앱 확장을 기반으로 구축되었습니다.
  • 다중 클라이언트 지원: Claude, ChatGPT, VS Code Copilot, Goose 등 MCP 호환 클라이언트와 함께 작동합니다.
  • 쉬운 배포: 환경 변수 없이 Vercel에 원클릭 배포가 가능합니다.

🏗️ 아키텍처

사용자 프롬프트 (예: "아키텍처 다이어그램을 그려줘")
        │
        ▼
  AI 클라이언트 (Claude / ChatGPT / VS Code)
        │  MCP 프로토콜
        ▼
  Excalidraw MCP 서버 (Node.js / TypeScript)
        │  대화형 HTML 스트리밍
        ▼
  Excalidraw 캔버스 (채팅 UI에 렌더링됨)
        │
        ▼
  사용자가 다이어그램을 실시간으로 보고 편집

서버는 TypeScript로 작성되었으며 Vercel(서버리스)을 통해 제공되고 프론트엔드 번들링에는 Vite를 사용합니다. MCP 앱 프로토콜을 따라 전체 Excalidraw 캔버스를 대화형 아티팩트 응답으로 포함합니다.

🚀 시작하기

옵션 1: 원격 (권장)

설치가 필요 없습니다. 다음 URL을 클라이언트의 원격 MCP 서버로 추가하세요.

https://excalidraw-mcp-app.vercel.app/mcp

Claude.ai 예시: 설정 → 커넥터 → 사용자 지정 커넥터 추가 → URL 붙여넣기.

옵션 2: 확장 파일을 통한 로컬 설치

  1. 릴리스 페이지에서 excalidraw-mcp-app.mcpb를 다운로드합니다.
  2. Claude 데스크톱에 설치하려면 두 번 클릭합니다.

옵션 3: 소스에서 빌드

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

그런 다음 Claude 데스크톱 구성의 ~/Library/Application Support/Claude/claude_desktop_config.json에 추가합니다.

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

Claude 데스크톱을 다시 시작하면 준비가 완료됩니다.

💬 예시 프롬프트

연결되면 다음과 같은 자연어 프롬프트를 사용할 수 있습니다.

  • "Excalidraw를 사용하여 귀여운 고양이 그림을 그려줘"
  • "사용자가 API 서버에 연결하고 해당 서버가 데이터베이스와 통신하는 아키텍처 다이어그램을 그려줘"
  • "CI/CD 파이프라인의 순서도를 만들어줘"
  • "서버 3대와 로드 밸런서가 있는 네트워크 토폴로지를 스케치해줘"

AI는 MCP 서버를 호출하고, 서버는 다이어그램을 생성하여 채팅에 대화형 캔버스로 스트리밍합니다.

🛠️ 기술 스택

계층 기술
언어 TypeScript (90.1%), JavaScript (4.7%)
프론트엔드 Excalidraw, Vite, CSS
백엔드 Node.js (Express 스타일 서버리스)
배포 Vercel
프로토콜 모델 컨텍스트 프로토콜 (MCP) + MCP 앱 확장

🌐 자체 호스팅 / 배포

몇 분 안에 자신만의 인스턴스를 Vercel에 배포할 수 있습니다.

  1. 리포지토리를 포크합니다.
  2. vercel.com/new로 이동하여 포크를 가져옵니다.
  3. 환경 변수는 필요하지 않습니다. 배포를 클릭하기만 하면 됩니다.
  4. 서버는 https://your-project.vercel.app/mcp에서 사용할 수 있습니다.

🤝 기여

PR을 환영합니다! 이 프로젝트는 Excalidraw 팀과 커뮤니티 기여자들이 적극적으로 유지 관리하고 있습니다. 기여하려면 다음을 수행하세요.

  1. 리포지토리를 포크하고 로컬로 복제합니다.
  2. npm install && npm run build를 실행하여 개발 환경을 설정합니다.
  3. 변경 사항을 적용하고 풀 리퀘스트를 제출합니다.

🔗 관련 리소스

🏷️ 요약

MCP — 이것은 모델 컨텍스트 프로토콜을 기반으로 구축된 MCP 서버로, AI 클라이언트가 채팅 인터페이스 내에서 직접 Excalidraw 손그림 스타일 다이어그램을 생성하고 대화형으로 편집할 수 있도록 합니다.

Star History Chart