Claude Code로 AWS 다이어그램 그리기 비교

AI 에이전트에게 AWS 아키텍처 다이어그램을 부탁해 본 적이 있다면, 아마 이런 결과를 본 적이 있을 겁니다. 둥근 아이콘과 상자, 엉킨 선들, 그리고 대체로 “이대로는 배포할 수 없다”는 느낌이 드는 그림 말입니다.

제가 알고 싶었던 건, 해결책이 더 나은 도구인지 더 나은 프롬프트인지였습니다. 그래서 AWS와 draw.io의 공식 MCP 서버와 스킬을 포함한 5가지 설정에 똑같은 아키텍처를 넣고, 뭔가 어색할 때마다 지시를 계속 추가해 봤습니다. 끝까지 가 보니 모든 설정이 많이 좋아졌고, MCP 서버나 스킬이 전혀 없는 평범한 Claude Code 세션도 어느 것 못지않게 잘 해냈습니다. 아래는 최종 프롬프트로 그린 다이어그램입니다.

이 실험은 2026년 9월에 Claude Code 2.1.278과 Claude Opus 5로 진행했습니다. 프롬프트는 일본어였고, 아래에 적은 프롬프트는 레이블 언어를 지정한 한 줄을 뺀 영어 번역입니다. 이 글에서는 .drawio 출력물의 일본어 레이블을 영어로 바꿔 다시 내보냈으며, 레이아웃과 선은 그대로 유지했습니다. Diagram MCP Server는 PNG만 출력하므로, 이 글의 첫 번째 이미지는 같은 프롬프트를 영어로 다시 실행한 결과입니다(Claude Code 2.1.285, 같은 모델).

비교한 5가지 설정

링크: AWS Diagram MCP Server , aws-architecture-diagram skill , draw.io MCP Tool Server , draw.io Claude Code plugin , Claude Code docs .

처음 시작하게 된 이유는 첫 번째 항목입니다. AWS는 2026년 3월 Diagram MCP Server를 deprecated 했고, 이후 PyPI의 모든 릴리스가 yanked 되었습니다. 공지에는 deploy-on-aws 플러그인의 다이어그램 스킬이 “실행 중인 MCP 서버 없이 Claude Code를 통해 직접 동등한 다이어그램을 생성한다”고 적혀 있습니다. 동등하다고 했지, 더 낫다고 하지는 않았습니다. 실제로 어떤 모습인지 확인해 보고 싶었습니다.

2번부터 5번까지는 .drawio 파일을 비교할 수 있도록 draw.io XML을 요청했습니다. 1번 설정은 PNG만 만들 수 있어서, 프롬프트의 마지막 줄만 PNG를 요청하도록 바꿨습니다.

사용 가능한 다이어그램의 기준

실제로 업무에서 쓸 수 있는 다이어그램인지 보려면, 다음 6가지를 확인했습니다.

• 재현성. 같은 프롬프트를 넣으면 거의 같은 다이어그램이 매번 나와야 합니다

• 비용. 토큰은 적게, 시간은 짧게

• 충실성. 내가 요청한 것만 있어야 하며, 불필요한 번호 매기기나 설명 패널이 없어야 합니다

• 가독성. 선과 레이블이 서로 겹치지 않아야 합니다

• 외형. AI가 만든 것처럼 보이게 하는 둥근 아이콘이나 장식 상자가 없어야 합니다

• 편집 가능성. 손으로 수정할 수 있는 출력물이어야 하므로, .drawio 파일이어야 합니다

비교를 공정하게 유지하기

내가 만든 스킬, 플러그인, 또는 CLAUDE.md처럼 Claude Code에 따로 불러오는 것들은 출력에 영향을 줄 수 있습니다. 그래서 각 세션은 프로젝트 설정만 적용하고, 테스트 대상인 MCP 서버만 사용하도록 시작했습니다.

1234567891011# AWS Diagram MCP Server, draw.io MCP Tool Server
claude --setting-sources project --strict-mcp-config --mcp-config mcp.json

# aws-architecture-diagram skill
claude --setting-sources project --strict-mcp-config --plugin-dir agent-plugins/plugins/deploy-on-aws

# draw.io Claude Code plugin
claude --setting-sources project --strict-mcp-config --plugin-dir drawio-mcp/plugins/claude-code

# Plain Claude Code
claude --setting-sources project --strict-mcp-config

--strict-mcp-config를 사용하지 않으면, claude.ai에서 설정해 둔 MCP 커넥터(제 경우에는 AWS 문서 검색)도 세션에 계속 나타납니다. --safe-mode도 시험해 봤는데, 이 옵션은 CLAUDE.md, 스킬, 플러그인, MCP 서버를 한꺼번에 꺼 버립니다. 하지만 비교하고 싶었던 플러그인들까지 꺼져 버려서, 이 테스트에는 맞지 않았습니다.

1라운드: 같은 짧은 프롬프트, 서로 다른 다섯 가지 문제

첫 번째 프롬프트는 아키텍처만 설명했습니다.

1234567891011Draw an architecture diagram of the following AWS setup.

- Put an ALB behind CloudFront
- The ALB targets an ECS Fargate service spread across two AZs
- The database is Aurora MySQL, with one writer and one reader in different AZs
- Static files are stored in S3 and delivered through CloudFront
- Logs and metrics are collected in CloudWatch
- The VPC spans two AZs, each with a public subnet and a private subnet
- The ALB is in the public subnets, ECS and Aurora are in the private subnets
- Each AZ has a NAT Gateway in its public subnet for outbound traffic from ECS
- Save the diagram as a draw.io XML file under out/

다섯 개 결과 중 어느 것도 수정 없이 쓸 수 있는 것은 없었고, 각각 다른 방식으로 실패했습니다. Diagram MCP Server는 이 글 맨 위에 있는 것 같은 얽히고 둥근 다이어그램을 만들어냈습니다. AWS의 skill은 번호가 붙은 배지와 제가 요청하지 않은 데이터 흐름 패널을 추가했고, 모든 서비스 아이콘마다 상자를 둘렀습니다.

draw.io MCP server와 plugin은 더 근접했지만, 둘 다 텍스트 위로 선이 지나갔습니다. MCP server는 제가 요청하지 않은 주석도 추가했고, plugin은 선의 모서리를 둥글게 처리했습니다. 일반 Claude Code는 꽤 깔끔했지만, S3를 주황색으로 칠했고 서비스 이름을 아이콘 위와 아래 양쪽에 모두 표시했습니다.

프롬프트에 무엇을 추가했는지, 그리고 그 이유

그다음부터는 라운드마다 반복해서 다듬었습니다. 매번 다섯 개 출력물을 모두 보고, 무엇이 거슬리는지 골라서 프롬프트에 한두 줄씩 추가했습니다. 어떤 수정은 새로운 문제를 만들기도 했는데, 그래서 이 목록은 협상처럼 보입니다.

최종 프롬프트는 아키텍처에 이런 규칙들을 더한 것이었습니다.

12345678- Write AZ names in full, not as "A" or "B"
- Put users at the top of the diagram
- In each AZ, put the public subnet above the private subnet
- Always use the official AWS icons. Don't substitute boxes or circles. Use service-level icons, not icons for individual resources such as instances
- Put each icon's label below the icon
- Don't let lines cross icons or label text. Lines may start below a label. Lines must not run on top of each other, though they may cross
- Start lines from the middle of an icon's edge where possible
- No title, legend, or explanation panel outside the diagram. Line labels and short notes attached to elements are fine

결과

최종 프롬프트를 각 설정마다 세 번씩 실행했습니다. 시간과 토큰 수는 세 번의 실행 평균입니다.

Diagram MCP Server는 곡선 선으로 바뀌었고 둥근 아이콘을 그대로 유지했습니다. 또 PNG만 출력하기 때문에 손으로 수정할 수도 없었습니다. AWS의 skill은 깔끔한 레이아웃을 만들어냈지만, CloudWatch와 Aurora 복제 연결선은 빠져 있었고 NAT Gateway에는 VPC 아이콘을 사용했습니다. draw.io MCP server의 선이 제 개인적인 취향으로는 가장 좋았지만, 같은 NAT Gateway 실수를 저질렀습니다.

draw.io plugin은 아이콘을 거의 적당한 수준의 디테일로 제대로 가져왔습니다. Plain Claude Code는 선이 한 번도 교차하지 않았고, 실행 간 변동도 가장 적었습니다.

내가 배운 것

좋은 다이어그램이 어떤 모습인지 프롬프트가 말해 주기만 하면, 모든 설정이 훨씬 좋아졌습니다. 마지막에는 draw.io MCP server, draw.io plugin, 그리고 Plain Claude Code 모두 제가 실제로 사용할 만한 수준이었고, 어느 것도 다른 것보다 분명히 우세하지 않았습니다.

그러니 MCP server나 skill을 무엇으로 고르느냐보다, 원하는 결과를 얼마나 명시적으로 말하느냐가 더 중요했습니다. 코드도 마찬가지입니다. 원하는 것을 말하지 않으면, 필요하지 않은 주석과 요청하지 않은 추상화를 얻게 됩니다. 다이어그램도 다르지 않습니다.

이 테스트의 한계

• 다이어그램 취향은 개인적입니다. 사용자를 위에 둘지 왼쪽에 둘지, 무엇을 묶을지, 무엇을 빼둘지. 이 규칙들은 제 취향을 반영합니다

• 이것은 하나의 아키텍처, 표준적인 2-AZ 웹 앱입니다. 여기서는 멀티 계정, 하이브리드, 또는 매우 큰 다이어그램은 테스트하지 않았습니다

• 설정당 세 번의 실행은 경향을 보기에는 충분하지만, 분산을 정확하게 측정하기에는 부족합니다

• 재현성 열은 이미지 비교(아이콘 개수, 선 개수, 레이아웃)를 바탕으로 한 대략적인 판단이며, 정확한 지표는 아닙니다

그 프롬프트를 스킬로 만들었습니다

그렇게 긴 프롬프트를 매번 쓰는 건 번거로워서, 규칙들을 Claude Code 스킬로 묶었습니다: sagochiko/aws-drawio-diagram-skill . 이걸 쓰면 아키텍처만 설명하면 됩니다. 영어 요청으로도 시도해 보았는데(두 개의 아키텍처에 걸쳐 총 4회 실행), 일본어 요청과 마찬가지로 같은 규칙을 따랐습니다. 아래는 위의 Round 1 프롬프트로 그려낸 결과입니다.

또한 VPC가 없는 아키텍처도 처리합니다. 예를 들면 Lambda Web Adapter를 실행하는 Lambda 함수가 앞단에 있는 Amazon Bedrock AgentCore 에이전트 같은 경우입니다.

나중에는 Claude Opus 5.5에서 이 스킬을 테스트했습니다. 그때 다이어그램 하나를 만드는 데 약 3~5분이 걸렸고, 비용은 대략 US$1 이하였습니다. 이 스킬은 Apache 2.0 라이선스를 따르며, 공식 draw.io 및 AWS 스킬을 기반으로 만들어졌습니다.

여러분은 AI 에이전트에서 어떻게 쓸 만한 다이어그램을 만들어 내고 있나요? 추가한 규칙이 있다면 듣고 싶습니다.

이 글은 AWS Builder Center 에 처음 게재되었습니다. 이는 Qiita에 올린 일본어 원문 의 영어판입니다. 다이어그램에는 AWS Architecture Icons 를 사용했습니다.

일본어 원문은 제가 직접 썼고, 이 영어판은 AI의 도움을 받아 다시 작성했습니다.

출처

• 원문: https://dev.to/sagochiko/i-compared-5-ways-to-make-claude-code-draw-aws-diagrams-the-prompt-mattered-more-than-the-tool-4pa6 (2026-10-02 · Ryota Sago)