Excalidraw Architect MCP

왜 쓰나요

핵심 기능

자동 레이아웃 — 수동 배치 불필요
스윔레인, 클러스터, 시퀀스 형식 흐름
Excalidraw .json (편집 가능) 및 PNG 출력 (선택적 cairo)
선명한 PNG를 위한 해상도 배율 설정 가능
로컬 — SaaS 없음, 원격 측정 없음

라이브 데모

실제 사용 모습

excalidraw-architect-mcp.replay ▶ 준비됨

0/0

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "excalidraw-architect-mcp",
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "excalidraw-architect-mcp": {
      "command": {
        "path": "uvx",
        "args": [
          "excalidraw-architect-mcp"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add excalidraw-architect-mcp -- uvx excalidraw-architect-mcp

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: Excalidraw Architect MCP

설계 문서용 아키텍처 다이어그램 생성

👤 설계 문서를 작성하는 엔지니어 ⏱ ~10 min beginner

언제 쓸까: 설계 문서에 시스템 다이어그램이 필요하지만 Excalidraw에 한 시간을 쓰고 싶지 않을 때.

사전 조건

Excalidraw (웹 또는 데스크톱) — excalidraw.com — .json 출력 붙여넣기

흐름

설명

Generate an Excalidraw diagram: API gateway → auth service → user service & orders service → Postgres. Add a Redis cache between API and user service.✓ 복사됨

→ Excalidraw .json 반환
정제

Add a sidecar logging agent on each service. Group services in a 'core' cluster.✓ 복사됨

→ 클러스터 + 사이드카가 추가된 업데이트된 다이어그램
내보내기

Render to PNG at 3x and save to /docs/arch.png.✓ 복사됨

→ PNG 파일 저장됨

결과: 30분이 아닌 2분 만에 문서용 다이어그램 완성.

함정

노드가 너무 많으면 다이어그램이 읽기 어려워짐 — 먼저 클러스터와 더 높은 추상화 수준을 요청

함께 쓰기: filesystem

코드베이스를 통한 호출 흐름 시각화

👤 낯선 코드를 검토하는 엔지니어 ⏱ ~5 min beginner

언제 쓸까: 요청을 스텝별로 따라갔을 때 — 이제 그림이 필요할 때.

흐름

관찰 내용 설명

Diagram a request flow: HTTP handler → validator → service → repo → DB. Show validation error path branching off.✓ 복사됨

→ 시퀀스 형식 다이어그램

결과: PR 설명에서 200단어를 대체하는 그림.

함정

시퀀스 vs 박스-화살표 혼동 — 명시적으로 '시퀀스 다이어그램' 또는 '컴포넌트 다이어그램'이라고 지정

조합

다른 MCP와 조합해 10배 효율

excalidraw-architect-mcp + filesystem

설계 문서 옆에 버전별 다이어그램 저장

excalidraw-architect-mcp + github

PR 설명에 다이어그램 첨부

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
generate_diagram	description, layout?	프롬프트에서 초기 다이어그램 생성	무료
modify_diagram	json, instruction	반복 편집	무료
to_png	json, scale?	문서에 삽입	무료

비용 및 제한

운영 비용

API 쿼터: 로컬 — 없음
호출당 토큰: 300–2000
금액: 무료
팁: 처음부터 재생성하지 말고 modify_diagram으로 반복

보안

권한, 시크릿, 파급범위

최소 스코프: 로컬 파일 쓰기

자격 증명 저장: 없음

데이터 외부 송신: 없음 — 완전 로컬

문제 해결

자주 발생하는 오류와 해결

PNG 내보내기 실패

선택적 cairo 의존성 설치: pip install excalidraw-architect-mcp[png]

레이아웃이 너무 빽빽함

클러스터 그룹화 또는 더 작은 노드 집합 요청

Excalidraw 가져오기 거부

JSON 스키마가 약간 맞지 않을 수 있음; Claude에게 최신 Excalidraw 스키마로 유효성 검사 요청

대안