draw.io MCP로 SAM 템플릿에서 AWS 아키텍처 다이어그램 자동 생성하기

소개

draw.io MCP (Model Context Protocol) 서버가 출시되어, SAM 템플릿에서 AWS 아키텍처 다이어그램을 자동 생성하는 데 활용해 보았습니다.

https://x.com/drawio/status/2020918870375370825https://x.com/drawio/status/2020918870375370825

MCP란?

MCP(Model Context Protocol)는 Anthropic이 AI 어시스턴트와 외부 도구를 연결하기 위해 제안한 표준 프로토콜입니다. GitHub Copilot도 MCP를 지원하여 MCP 서버를 통해 다양한 외부 서비스 및 도구와 연동이 가능합니다.

이 글에서 사용하는 drawio MCP 서버는 AI 에이전트가 Draw.io 다이어그램을 직접 생성하고 편집할 수 있게 해줍니다.

환경 설정

1. VS Code 확장 설치

먼저 VS Code에 Draw.io Integration 확장을 설치합니다.

1. VS Code에서 확장 탭 열기 (Ctrl/Cmd + Shift + X)
2. "Draw.io Integration" 검색
3. "hediet.vscode-drawio" 설치
   

또는 다음 링크에서 직접 설치:
https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawiohttps://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

이 확장을 통해 VS Code 내에서 .drawio 파일을 직접 편집하고 미리볼 수 있습니다.

2. drawio MCP 서버 설정

drawio MCP 서버는 두 가지 방법으로 사용할 수 있습니다:

방법 A: npx로 실행 (권장)

VS Code 설정(settings.json)에 다음을 추가합니다:

{
  "github.copilot.chat.mcp.servers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "@drawio/mcp"]
    }
  }
}

-y 플래그는 확인 없이 패키지를 자동으로 다운로드하고 실행합니다.

방법 B: 전역 설치

npm install -g @drawio/mcp

VS Code 설정(settings.json)에 다음을 추가합니다:

{
  "github.copilot.chat.mcp.servers": {
    "drawio": {
      "command": "drawio-mcp"
    }
  }
}

3. 설정 확인

Copilot Chat을 열고 채팅 창의 [Configure Tools...] 섹션에서 drawio 서버 도구가 사용 가능한지 확인합니다.

SAM 템플릿 준비

이 예시에서는 다음 구성 요소를 포함한 서버리스 애플리케이션의 SAM 템플릿을 가정합니다:

• API Gateway
• Lambda 함수 (여러 개)
• DynamoDB
• S3 버킷
• CloudWatch Logs
• IAM 역할

아키텍처 다이어그램 자동 생성

프롬프트 작성

GitHub Copilot Chat에 다음 지시를 내립니다:

이 SAM 템플릿을 분석하고 draw.io에서 AWS 아키텍처 다이어그램을 만들어 주세요.

요구사항:
1. 공식 AWS 아이콘 사용
2. 리소스 간 관계를 화살표로 명확하게 표현
3. VPC나 보안 그룹이 있으면 그룹화를 표현
4. 데이터 흐름 방향을 이해하기 쉬운 레이아웃으로 구성
5. 일본어(또는 영어)로 레이블 표시
6. .drawio 파일로 출력

MCP 서버 도구가 사용되고 있습니다:

생성 결과

몇 초 만에 다음 요소가 포함된 AWS 아키텍처 다이어그램이 생성됩니다:

• 적절한 아이콘으로 표현된 모든 AWS 리소스
• Lambda 함수와 API Gateway 간의 연결 관계
• DynamoDB 액세스 패턴
• S3 버킷 용도
• CloudWatch Logs로의 로그 출력
• IAM 역할과 리소스 연결

생성된 .drawio 파일은 VS Code 내에서 직접 열어 확인할 수 있습니다. Draw.io Integration 확장이 편집기에서 다이어그램을 시각적으로 렌더링하여 필요에 따라 수동으로 세부 조정이 가능합니다.
일부 텍스트와 화살표가 겹치는 부분을 제외하면 AWS 아키텍처 다이어그램은 거의 예상한 대로입니다.

실용적인 팁

1. VS Code에서 즉시 확인 및 편집

• 실시간 미리보기: 생성된 .drawio 파일을 클릭하기만 하면 VS Code 내에서 다이어그램이 표시됨
• 수동 조정: GitHub Copilot이 생성한 다이어그램을 바탕으로 위치나 색상을 수동으로 세밀하게 조정
• 내보내기: 확장에서 직접 PNG, SVG, PDF 등의 형식으로 내보내기
• 나란히 표시: SAM 템플릿과 아키텍처 다이어그램을 나란히 표시해 일관성을 확인하면서 작업

2. 복잡한 템플릿을 나누어 생성

먼저 전체 아키텍처 다이어그램을 만들어 주세요.
다음으로 API 레이어의 상세 다이어그램을 별도로 만들어 주세요.

3. 버전 관리 연동

VS Code 내에서 작업하면 다음과 같은 효율적인 워크플로우가 가능합니다:

1. SAM 템플릿 편집
2. GitHub Copilot으로 아키텍처 다이어그램 생성
3. 동일한 VS Code에서 다이어그램 확인 및 세부 조정
4. Git 연동으로 템플릿과 다이어그램을 함께 커밋

4. 점진적 세분화

1차: 기본 아키텍처 생성
2차: 데이터 흐름 추가
3차: 보안 그룹 및 IAM 정책 시각화
4차: 모니터링 및 알림 설정 추가

장점 및 활용 사례

장점

✅ 대폭적인 시간 단축: 다이어그램 작성 시간을 90% 이상 단축
✅ IaC와 완벽한 일치: 템플릿에서 직접 생성하므로 괴리가 발생하지 않음
✅ 지속적인 업데이트: 템플릿 변경 시 즉시 다이어그램 업데이트 가능
✅ 원활한 개발 경험: VS Code 내에서 개발부터 다이어그램 생성 및 확인까지 완결
✅ 유연한 수동 조정: AI 생성을 바탕으로 Draw.io 확장으로 세부 조정

활용 사례

• 🚀 신규 프로젝트 설계 문서 작성
• 📝 기존 시스템 문서 정리
• 🔄 CI/CD 파이프라인에서 자동 문서 생성
• 👥 팀원에게 아키텍처 설명
• 📊 클라이언트를 위한 제안 자료 작성

결론

drawio MCP 서버와 VS Code의 Draw.io Integration 확장을 조합함으로써 SAM 템플릿에서 AWS 아키텍처 다이어그램을 자동으로 생성할 수 있게 되었습니다. 이를 통해:

1. 효율적인 문서 작성: 수동 작성 대비 대폭적으로 빨라짐
2. 품질 향상: IaC와 완벽히 일치함을 보장
3. 유지보수성 향상: 템플릿 변경을 즉시 반영
4. 개발 경험 향상: VS Code 내에서 개발에서 문서 작성까지 완결

모든 작업이 VS Code 내에서 완결된다는 점이 큰 장점입니다:

• 코드 작성
• GitHub Copilot으로 다이어그램 생성
• 동일한 편집기에서 다이어그램 확인 및 편집
• Git으로 함께 관리

AWS 환경 문서화에 어려움을 겪고 있다면, 특히 VS Code를 주 편집기로 사용하는 경우라면 꼭 시도해 보세요.

참고 링크

• drawio MCP Server (npm)
• Draw.io Integration - VS Code Extension
• Model Context Protocol Documentation
• GitHub Copilot Documentation
• AWS SAM Documentation
• draw.io