Excalidraw Architect MCP

익숙하지 않고 복잡한 코드베이스를 이해하려고 노력하는 것은 인지적 과부하를 관리하고 모든 것이 어떻게 맞물려 돌아가는지 상상해야 하기에 끊임없는 고군분투였습니다.

문제점

코드베이스에 온보딩하거나, 새로운 시스템을 설계하거나, 기존 아키텍처를 문서화할 때, 시각적 다이어그램은 수 페이지의 텍스트로는 전달할 수 없는 내용을 단 몇 초 만에 전달합니다. 하지만 오늘날의 선택지들은 그리 좋지 않습니다. Mermaid 다이어그램은 생성하기는 빠르지만 기능이 제한적입니다. 노드를 드래그하여 위치를 변경하거나 컴포넌트를 시각적으로 그룹화할 수 없습니다. Excalidraw는 이러한 문제를 해결하지만, LLM이 Excalidraw를 직접 생성하려고 하면 좌표를 환각(hallucinate)하여 상자가 겹치고 화살표가 엉키며, 결국 다이어그램을 수동으로 수정하게 됩니다.

Related MCP server: Excalidraw MCP App

해결책

excalidraw-architect-mcp는 *무엇(what)*과 *어디(where)*를 분리합니다. AI는 구조에 집중하고, 엔진은 적절한 그래프 레이아웃 알고리즘을 사용하여 픽셀 계산을 처리합니다.

LLM이 컴포넌트와 연결을 설명하면, MCP가 적절한 그래프 레이아웃 알고리즘을 사용하여 레이아웃, 스타일링 및 렌더링을 처리합니다. 50개 이상의 기술(Kafka, PostgreSQL, Redis 등)이 자동으로 스타일링되며, 자연어로 다이어그램을 반복적으로 편집할 수 있고("DB 앞에 캐시 추가"), Cursor/Windsurf에서 API 키 없이 완전히 오프라인으로 실행됩니다.

• 항상 완벽한 레이아웃 - 적응형 간격이 적용된 Sugiyama 알고리즘; 겹치는 상자 없음

• 아키텍처 인식 스타일링 - "Kafka"라고 말하면 일반적인 직사각형이 아닌 스트림 스타일의 노드를 얻습니다.

• 다이어그램과 대화 - 자연어를 사용하여 기존 다이어그램의 컴포넌트를 추가, 제거 또는 재연결합니다.

• 허브 노드 시각화 - 게이트웨이와 로드 밸런서가 연결된 서비스에 맞춰 자동으로 확장됩니다.

• SVG 및 PNG로 내보내기 - 브라우저 없이도 모든 .excalidraw 파일을 휴대용 이미지로 변환합니다.

작동 방식

아래의 모든 프레임은 수동 위치 지정 없이 이 MCP를 사용하여 AI가 완전히 생성한 것입니다.

전자상거래 플랫폼 아키텍처

결제 처리 흐름

사용 사례

• 새로운 코드베이스 온보딩 - 마이크로서비스를 가리키면 코드 한 줄 읽지 않고도 상위 수준의 아키텍처 다이어그램을 얻을 수 있습니다. 세부 정보가 필요할 때는 클래스 세트를 가리켜 하위 수준의 흐름 다이어그램을 얻으세요.

• 브레인스토밍 및 시스템 설계 - 새로운 서비스를 화이트보드에 그리거나 트레이드오프를 논의할 때, 진행하면서 아키텍처를 시각화하도록 요청하세요. 처음부터 다시 그릴 필요 없이 "여기에 캐시 추가" 또는 "Kafka를 SQS로 교체"라고 말하여 반복 수정하세요.

• 살아있는 문서화 - .excalidraw 파일을 저장소에 넣고 시스템이 발전함에 따라 자연어로 업데이트하세요. 6번의 스프린트 전의 낡은 다이어그램은 이제 그만 사용하세요.

빠른 시작

설치

pip install excalidraw-architect-mcp

PNG 내보내기 지원(SVG는 즉시 작동):

pip install excalidraw-architect-mcp[png]

또는 설치 없이 실행(uv 필요):

uvx excalidraw-architect-mcp

IDE에서 MCP 구성

Cursor - .cursor/mcp.json에 추가:

{
  "mcpServers": {
    "excalidraw-architect": {
      "command": "excalidraw-architect-mcp",
      "transport": "stdio"
    }
  }
}

Claude Code - 이 한 줄 명령어를 실행하세요:

claude mcp add-json excalidraw-architect '{"type":"stdio","command":"excalidraw-architect-mcp"}' --scope user

또는 프로젝트 루트의 .mcp.json에 수동으로 추가:

{
  "mcpServers": {
    "excalidraw-architect": {
      "type": "stdio",
      "command": "excalidraw-architect-mcp"
    }
  }
}

Windsurf / 기타 IDE - 동일한 패턴; stdio를 통해 excalidraw-architect-mcp 명령을 가리키세요.

다이어그램 디자인 기술 설치(권장)

이 저장소에는 AI에게 최상의 결과를 얻기 위한 다이어그램 구조화 방법(노드 수 제한, 토폴로지 규칙, 엣지 라벨 가이드라인 및 일반적인 패턴)을 가르치는 Diagram Design Skill이 포함되어 있습니다.

Cursor 사용자:

mkdir -p ~/.cursor/skills/excalidraw-diagram-design && \
curl -o ~/.cursor/skills/excalidraw-diagram-design/SKILL.md \
  https://raw.githubusercontent.com/BV-Venky/excalidraw-architect-mcp/main/.skills/excalidraw-diagram-design/SKILL.md

기타 IDE: SKILL.md 파일을 다운로드하여 IDE의 프롬프트 컨텍스트나 시스템 지침에 추가하세요.

AI는 다이어그램을 생성할 때 자동으로 기술을 습득하고 적용합니다. 노드 제한 조정, 자신만의 패턴 추가, 스타일링 가이드라인 조정 등 선호도에 맞게 규칙을 자유롭게 수정하세요.

다이어그램 복잡성에 대한 참고 사항: 컴포넌트와 연결 수가 증가함에 따라 다이어그램은 읽기 어려워집니다. 이는 자동 레이아웃뿐만 아니라 사람이 직접 그릴 때도 마찬가지입니다. 최상의 결과를 얻으려면 아키텍처 다이어그램은 6-15개 노드, 상세 흐름은 10-25개 노드를 목표로 하세요. 시스템이 더 크다면 모든 것을 하나에 담으려 하지 말고 여러 개의 집중된 다이어그램으로 나누세요.

사용 방법

AI IDE에 자연스럽게 요청하세요:

"이 코드베이스의 상위 수준 아키텍처 다이어그램을 만들어줘"

"API 게이트웨이, 인증 서비스, 사용자 서비스, 주문 서비스, PostgreSQL, Redis 캐시, Kafka 이벤트 버스가 포함된 마이크로서비스 시스템의 아키텍처 다이어그램을 만들어줘"

"이 mermaid 다이어그램을 excalidraw 다이어그램으로 변환해줘"

"상위 수준 아키텍처 다이어그램의 주문 서비스 앞에 캐싱 계층을 추가해줘"

"아키텍처 다이어그램을 SVG로 내보내줘"

"다이어그램을 3배 해상도의 PNG로 내보내줘"

AI는 관계 맵과 함께 MCP 도구를 호출합니다. MCP는 레이아웃, 스타일링 및 출력을 처리합니다. 결과로 생성된 .excalidraw 파일을 Excalidraw VS Code 확장 프로그램으로 열거나 excalidraw.com으로 드래그하세요.

기능

자동 레이아웃 엔진

다음과 같은 Sugiyama 계층 레이아웃 알고리즘을 사용합니다:

• 적응형 레이어 간격 - 엣지 라벨 길이에 따라 간격 조정

• 허브 노드 확장 - 게이트웨이/로드 밸런서가 연결된 서비스에 맞춰 확장

• 장애물 인식 엣지 라우팅 - 화살표가 중간 노드를 통과하지 않고 우회하도록 곡선 처리

• 연결되지 않은 컴포넌트 스태킹 - 별도의 서브그래프(예: 모니터링 스택)가 겹치지 않게 배치

컴포넌트 라이브러리

자동 시각적 스타일링이 포함된 50개 이상의 기술 매핑:

상태 유지 편집

다이어그램 메타데이터가 .excalidraw 파일에 포함되어 있습니다. AI에게 요청하세요:

"기존 다이어그램의 데이터베이스 앞에 Redis 캐시를 추가해줘"

MCP가 현재 상태를 읽고, 수정을 적용한 뒤 적절한 레이아웃으로 다시 렌더링합니다.

Mermaid 변환

이미 Mermaid 순서도가 있나요? 변환하세요:

"이 Mermaid 다이어그램을 Excalidraw로 변환해줘" (Mermaid 구문 붙여넣기)

이미지 내보내기

모든 .excalidraw 다이어그램을 휴대용 이미지로 내보내세요. 브라우저, Excalidraw 앱 또는 Node.js가 필요하지 않습니다.

• SVG - 추가 종속성 없음; 직사각형, 타원, 다이아몬드, 텍스트(다중 라인 포함), 화살촉이 있는 화살표를 처리하는 순수 Python 렌더러 사용

• PNG - 선택적 cairosvg 패키지 필요 (pip install excalidraw-architect-mcp[png]); 구성 가능한 해상도 배율 지원(기본값 2배)

"아키텍처 다이어그램을 SVG로 내보내줘"

MCP 도구

기여

자세한 내용은 CONTRIBUTING.md를 참조하세요.

라이선스

MIT - LICENSE 참조.