다이어그램 하나 그리는 데 1시간. 이제 30초면 됩니다.
AI한테 "로그인 플로우 그려줘" 하면, 채팅창 안에서 진짜로 그려져요.
이게 뭔데?
솔직히 다이어그램 그리는 거 다들 귀찮잖아요. 기획서에 플로우차트 넣어야 하고, 개발 문서에 아키텍처 다이어그램 필요하고. 매번 도구 열어서 사각형 하나하나 배치하고 화살표 연결하는 그 작업, 생각만 해도 한숨 나오죠.
Excalidraw가 이 문제를 풀었어요. 공식 MCP 서버를 출시한 거예요.
Excalidraw는 원래 개발자들 사이에서 유명한 오픈소스 화이트보드 도구인데요, 연필로 직접 그린 듯한 손그림 느낌이 특징이에요. 이걸 MCP(Model Context Protocol)라는 AI 연동 표준과 결합한 거죠.
MCP는 Anthropic이 만든 오픈 프로토콜인데, 쉽게 말하면 "AI가 외부 도구를 직접 조작할 수 있게 해주는 규격"이에요. 2026년 1월에는 Anthropic과 OpenAI가 공동으로 MCP Apps 확장 스펙을 발표하면서, AI 채팅 안에서 인터랙티브 UI를 직접 렌더링할 수 있게 됐어요. Excalidraw MCP는 이 MCP Apps의 대표적인 활용 사례 중 하나고요.
재밌는 건 이 프로젝트의 탄생 스토리예요. Anthropic 엔지니어가 주말에 만든 프로토타입이 Excalidraw 팀 눈에 띄어서, 1주일도 안 되어 공식 MCP 서버로 승격됐어요. Harald Kirschner(VS Code 팀)도 X에서 "proof-of-concept에서 공식 MCP까지 1주일도 안 걸렸다"며 놀라워했고요.
출시 이후 반응도 뜨거워요. GitHub Stars 2,400개 돌파, 포크 154개. MIT 라이선스라 상업적으로도 자유롭게 쓸 수 있어요. Medium의 한 리뷰어는 "AI의 추론 능력이 시각적 표현까지 확장된 것"이라며 "인간-AI 협업의 범주적 전환"이라고 평가했어요.
뭐가 달라지는 건데?
기존에도 AI로 다이어그램을 만들 수는 있었어요. Mermaid 코드를 생성하거나, SVG를 텍스트로 뽑아내는 식이었죠. 근데 이게 좀 불편했어요.
| 기존 방식 | Excalidraw MCP | |
|---|---|---|
| 흐름 | AI가 코드 생성 → 별도 렌더러에서 확인 → 수정 요청 → 재생성 반복 | AI한테 말하면 채팅창에서 바로 렌더링 |
| 편집 | 코드를 직접 수정 | 풀스크린 에디터에서 드래그앤드롭 |
| 수정 | AI가 결과물을 못 봄 (눈 감고 그리는 셈) | AI가 캔버스를 직접 확인하고 수정 가능 |
| 공유 | 이미지 파일로 내보내기 필요 | excalidraw.com 링크 한 번으로 끝 |
| 시간 | 30분~1시간 | 1~5분 |
핵심은 AI가 자기가 그린 걸 직접 본다는 거예요. save_checkpoint와 read_checkpoint 같은 도구로 현재 상태를 저장하고 불러올 수 있어서, "여기 간격 좀 넓혀줘" 같은 세밀한 수정도 대화로 가능해요. 스트리밍 방식으로 다이어그램이 그려지면서 부드러운 애니메이션까지 보여주니까, 누군가가 화이트보드에 그리는 걸 지켜보는 느낌이에요.
Skywork의 기술 분석 글에서는 이걸 "Diagrams as Code" 패러다임이라고 불렀어요. AI가 픽셀 기반 이미지가 아니라 편집 가능한 코드 형태로 다이어그램을 생성하기 때문에, 나중에 수정하거나 CI/CD 파이프라인에서 자동으로 문서를 업데이트하는 것도 가능하다는 거죠.
핵심만 정리: 시작하는 법
- 연결하기 (가장 쉬운 방법)
Claude.ai → Settings → Connectors → "Excalidraw" 검색해서 추가. 끝이에요. - 테스트하기
"Excalidraw로 간단한 사각형 하나 그려줘"라고 보내보세요. 손그림 스타일 사각형이 채팅창에 나타나면 성공. - 실전 프롬프트 날리기
"사용자 → API 서버 → DB로 이어지는 아키텍처 다이어그램 그려줘" 같은 구체적인 요청을 해보세요. 구체적일수록 결과물이 좋아요. - 대화로 수정하기
"로드밸런서를 앞에 추가해줘", "색상 좀 바꿔줘" — 이렇게 계속 대화하면서 다듬으면 돼요. AI가 이전 상태를 기억하니까요. - 공유하기
풀스크린 모드에서 직접 편집하거나, "excalidraw.com 링크로 만들어줘"라고 하면 공유 URL이 생성돼요.
VS Code 사용자라면 MCP: Add Server > HTTP에
https://excalidraw-mcp-app.vercel.app/mcp를 넣으면 바로 연결됩니다.
