손으로 그린 Excalidraw 다이어그램을 부드러운 뷰포트 카메라 제어와 인터랙티브 전체 화면 편집으로 스트리밍하는 MCP 서버입니다.

설치

MCP 앱을 지원하는 모든 클라이언트에서 작동합니다 — Claude, ChatGPT, VS Code, Goose 등 등. 문제가 있으면 문제를 열어주세요.

원격 (추천)

https://mcp.excalidraw.com

아직 공식 통합이 없는 앱의 경우, 커스텀 MCP / 커넥터를 추가할 수 있습니다(앱마다 이름이 다를 수 있습니다).

지역

**옵션 A: 확장 프로그램 다운로드 **

1. 릴리스에서 excalidraw-mcp-app.mcpb 다운로드
2. Claude 데스크톱에 더블 클릭하여 설치하기

옵션 B: 소스에서 빌드

~/Library/Application Support/Claude/claude_desktop_config.json에 추가:

Claude 데스크톱을 재시작하세요.

사용

예시 프롬프트:

• “엑스칼리드로우로 귀여운 고양이를 그리기”
• “데이터베이스와 통신하는 API 서버에 연결하는 사용자를 보여주는 아키텍처 다이어그램을 그려보세요”

MCP 앱이란 무엇이며 어떻게 만들 수 있을까요?

텍스트 답변만으로는 한계가 있습니다. 때로는 사용자가 단순히 읽는 것이 아니라 데이터를 직접 접해야 할 때도 있습니다.

Excalidraw MCP App Server

MCP server that streams hand-drawn Excalidraw diagrams with smooth viewport camera control and interactive fullscreen editing.

Install

Works with any client that supports MCP Apps — Claude, ChatGPT, VS Code, Goose, and others. If something doesn’t work, please open an issue.

Remote (recommended)

https://mcp.excalidraw.com

For apps that don’t yet have an official integration, you can add a custom MCP / connector (naming can vary between apps).

Local

Option A: Download Extension

1. Download excalidraw-mcp-app.mcpb from Releases
2. Double-click to install in Claude Desktop

Option B: Build from Source

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

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

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

Restart Claude Desktop.

Usage

Example prompts:

• “Draw a cute cat using excalidraw”
• “Draw an architecture diagram showing a user connecting to an API server which talks to a database”

What are MCP Apps and how can I build one?

Text responses can only go so far. Sometimes users need to interact with data, not just read about it. MCP Apps is an official Model Context Protocol extension that lets servers return interactive HTML interfaces (data visualizations, forms, dashboards) that render directly in the chat.

• Getting started for humans: documentation
• Getting started for AIs: skill

Contributing

PRs welcome! See Local above for build instructions.

Deploy your own instance

You can deploy your own copy to Vercel in a few clicks:

1. Fork this repo
2. Go to vercel.com/new and import your fork
3. No environment variables needed — just deploy
4. Your server will be at https://your-project.vercel.app/mcp

Release checklist

Credits

Built with Excalidraw — a virtual whiteboard for sketching hand-drawn like diagrams.

License

MIT