"AI로 다이어그램 그린다"는 말, 이제 식상하죠. Mermaid 코드 뽑아주는 것도 한참 됐고요.
그런데 기존 방식엔 다들 그냥 참고 넘긴 결정적 결함이 하나 있었어요. AI가 자기가 만든 그림을 못 본다는 거예요. 코드만 뱉어놓고, 그게 실제로 어떻게 보이는지는 깜깜이. 화살표가 엉키든 박스가 겹치든 AI는 알 길이 없으니, 결국 사람이 렌더러 열어서 확인하고 "여기 틀렸어" 일러주는 핑퐁이 반복됐죠.
Excalidraw가 공식 MCP 서버를 내면서 바로 이 지점을 깼어요. 진짜 뉴스는 "AI가 그림을 그린다"가 아니라 "AI가 그림을 보면서 그린다"예요.
왜 이게 진짜 다른가
기존에도 AI로 다이어그램을 만들 수는 있었어요. Mermaid 코드를 생성하거나 SVG를 텍스트로 뽑는 식이었죠. 문제는 흐름 전체가 "눈 감고 그리기"였다는 거예요. 차이를 한눈에 보면 이래요.
| 기존 방식 | Excalidraw MCP | |
|---|---|---|
| 흐름 | AI가 코드 생성 → 별도 렌더러에서 확인 → 수정 요청 → 재생성 반복 | 말하면 채팅창에서 바로 렌더링 |
| 수정 | AI가 결과물을 못 봄 (눈 감고 그리는 셈) | AI가 캔버스를 직접 확인하고 수정 |
| 편집 | 코드를 직접 손봄 | 풀스크린 에디터에서 드래그앤드롭 |
| 공유 | 이미지 파일로 내보내기 필요 | excalidraw.com 링크 한 번으로 끝 |
| 시간 | 30분~1시간 | 1~5분 |
핵심 장치는 save_checkpoint와 read_checkpoint예요. 현재 캔버스 상태를 저장하고 다시 불러올 수 있어서, "여기 간격 좀 넓혀줘" 같은 세밀한 수정도 대화만으로 가능하죠. 다이어그램이 스트리밍으로 그려지면서 부드러운 애니메이션까지 보여주니, 누군가 화이트보드에 그리는 걸 어깨너머로 지켜보는 느낌이에요.
한 가지 더. 결과물이 픽셀 이미지가 아니라 편집 가능한 코드라는 점이에요. Skywork는 이걸 "Diagrams as Code" 패러다임이라 불렀는데, 덕분에 나중에 다시 손보거나 CI/CD 파이프라인에서 문서를 자동 갱신하는 것도 가능해져요.
5분이면 됩니다: 직접 연결해보기
설명은 여기까지. 백 마디보다 직접 한 번 그려보는 게 빨라요. Claude.ai 기준 가장 쉬운 경로예요.
- 연결하기
Claude.ai → Settings → Connectors → "Excalidraw" 검색해서 추가. 이게 전부예요. - 한 번 찔러보기
"Excalidraw로 간단한 사각형 하나 그려줘"라고 보내보세요. 손그림 스타일 사각형이 채팅창에 뜨면 연결 성공. - 실전 프롬프트 날리기
"사용자 → API 서버 → DB로 이어지는 아키텍처 다이어그램 그려줘"처럼 구체적으로 요청하세요. 구체적일수록 결과가 좋아져요. - 대화로 다듬기
"앞에 로드밸런서 추가해줘", "색상 좀 바꿔줘" — 계속 말로 고치면 됩니다. AI가 이전 상태를 기억하니까요(여기서 checkpoint가 일해요). - 공유하기
풀스크린 모드에서 직접 편집하거나, "excalidraw.com 링크로 만들어줘"라고 하면 공유 URL이 생성돼요.
VS Code 사용자라면 MCP: Add Server > HTTP에
https://excalidraw-mcp-app.vercel.app/mcp를 넣으면 바로 연결됩니다.
잠깐, 이건 어디서 나온 도구죠?
Excalidraw는 개발자들 사이에서 유명한 오픈소스 화이트보드예요. 연필로 슥슥 그린 듯한 손그림 느낌이 시그니처죠. 여기에 MCP(Model Context Protocol)를 결합한 게 이번 서버예요.
MCP는 Anthropic이 만든 오픈 프로토콜로, 쉽게 말하면 "AI가 외부 도구를 직접 조작하게 해주는 규격"이에요. 2026년 1월엔 Anthropic과 OpenAI가 공동으로 MCP Apps 확장 스펙을 발표하면서 AI 채팅 안에 인터랙티브 UI를 직접 띄울 수 있게 됐고요. Excalidraw MCP가 바로 이 MCP Apps의 대표 사례예요.
탄생 스토리도 좋아요. Anthropic 엔지니어가 주말에 만든 프로토타입이 Excalidraw 팀 눈에 띄어, 1주일도 안 돼 공식 서버로 승격됐어요. VS Code 팀의 Harald Kirschner도 X에서 "proof-of-concept에서 공식 MCP까지 1주일도 안 걸렸다"며 놀라워했죠. 출시 후 반응도 뜨거워서 GitHub Stars 2,400개 돌파, 포크 154개를 기록했고, MIT 라이선스라 상업적으로도 자유롭게 쓸 수 있어요. Medium의 한 리뷰어는 이걸 두고 "AI의 추론 능력이 시각적 표현까지 확장된, 인간-AI 협업의 범주적 전환"이라고 평했고요.
더 깊이 파고 싶다면
주제별로 가장 좋은 자료만 골라왔어요.
- Excalidraw MCP 공식 GitHub — 설치 3가지 방법, 지원 클라이언트, 도구 전체 목록. README만 읽어도 시작 가능해요.
- DeepWiki — Getting Started — 설치부터 검증까지 단계별 정리.
read_me,create_view,export_to_excalidraw등 도구별 역할도 표로 깔끔해요. - MCP 공식 블로그 — MCP Apps 소개 — 이 서버가 기반하는 확장 스펙의 공식 설명. 기술 배경이 궁금하면 추천.
- Skywork — Excalidraw MCP Deep Dive — 여러 구현체 비교 분석. 공식 서버 vs 커뮤니티 서버 차이를 이해하기 좋아요.
- Eri Perspective (Medium) — 세 가지 설치 방법을 다 테스트해본 사용자 리뷰. 실사용 경험이 궁금할 때.
