你們過去請 Claude 或 Codex（之後統稱為「AI 代理」）幫忙製作的架構圖，是不是長這樣？
圖示和子網路的角看起來都圓圓的，很有 AI 味吧。「這樣還不如自己畫算了」就會這麼想。
雖然不只程式開發，連雜務等日常工作都能交給 AI 代理了，但為什麼還是生成不出理想中那種漂亮的架構圖呢？
為了找出能做出符合期待架構圖的方法，我實際用幾種 MCP 和 Skill 做了驗證。
結果做出了（我個人覺得）相當滿意的架構圖，所以接下來要分享的是：如何輸出業務上也能用的（我個人認為）架構圖！
我是以 2026 年 9 月的 Claude Code 2.1.278（模型為 Claude Opus 5）進行驗證的。
構成圖的喜好本來就帶有一點宗教性。
（例如：元素要放哪裡、使用者需求是從上往下看，還是從左往右看等等……）
這次是出於我個人「做出漂亮的架構圖了！想分享給大家！」的心情來做驗證並寫成文章，所以如果你有自己的喜好，也可以自行客製化使用。
常見的煩惱
你是否也有以下這些煩惱或不滿？我以前常常這麼覺得。
- 想讓 AI 代理生成架構圖，但生成品質不好
- 明明也用了官方的 MCP、Skill、外掛，看起來好像不錯，但總覺得還差一點
- 最後還是不知道到底該用哪個工具（MCP、Skill 等）
因此這次我用 AWS 和 draw.io 官方提供的 MCP 與 Skill，再加上什麼都沒設定的 Claude Code，一共 5 種模式，用同一組指示來做架構圖。
接著觀察生成結果中讓人介意的地方，逐步把那些內容加回指示裡，看看能改善到什麼程度。
比較的 5 種模式
這次比較的是以下 5 種模式：
使用的工具 輸出物 URL
1 AWS Diagram MCP Server 1.0.23（MCP・不建議） 只有 PNG PyPI
2 aws-architecture-diagram Skill（Skill） .drawio（如果有要求也可輸出 PNG、SVG、PDF） GitHub
3 draw.io 官方 MCP Tool Server（MCP） 開啟 draw.io 的 URL（可改寫既有 .drawio） GitHub
4 draw.io 官方 Claude Code 外掛（Skill） .drawio（如果有要求也可輸出 PNG、SVG、PDF、URL） GitHub
5 Claude Code（無 Skill・MCP） 依指示而定 文件
輸出 PNG 或 SVG 需要 draw.io desktop。
這次除了 1 以外，其餘模式我都要求「以 draw.io 的 XML 格式保存成檔案」，所以 3 和 5 也輸出了 .drawio。
應達成的目標
如果要在業務中使用，我認為需要達成以下內容：
- 同樣的指示每次都能產生相似的架構圖（可重現性）
- 用較少的 token 和時間完成（性價比）
- 只畫出指示的內容，不要出現沒要求的編號或說明文字（對指示的忠實度）
- 線條與標籤不重疊，易於閱讀（可讀性）
- 沒有圓角圖示或多餘框線，不會有 AI 感（外觀）
- 生成後可手動修改的格式（
.drawio）（易編輯性）
主要就是從這 6 個面向，對包含官方 MCP 與 Skill 在內的 5 種模式做了架構圖比較。
測試時特別注意的事項
這次的驗證是比較多個 MCP 和 Skill 的生成結果。若已有使用者自訂的 Skill、外掛、CLAUDE.md（AGENTS.md），都可能影響輸出結果。
因此我只載入專案設定，並加上只使用指定 MCP 的選項來啟動（這部分是我一邊問 Claude Code 一邊調整的）。
如果不加 --strict-mcp-config，claude.ai 那邊連動的 MCP（例如 AWS 文件搜尋）會殘留著。
# 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 外掛
claude --setting-sources project --strict-mcp-config --plugin-dir drawio-mcp/plugins/claude-code
# Claude Code（無 Skill・MCP）
claude --setting-sources project --strict-mcp-config
可以看到只有要比較的 MCP 被載入，Claude Code 內建的 Skill 則仍保留著。
一開始我也試過 --safe-mode。這個選項會把 CLAUDE.md、Skill、外掛、MCP 全部停用，但這樣連這次要比較的 MCP 和外掛也都無效了，所以不能用。
先讓它照普通方式畫看看
一開始我用下面這段指示來請它畫架構圖。
以下のAWS構成の構成図を作ってください。
- CloudFront の背後に ALB を置く
- ALB のターゲットは ECS Fargate のサービスで、2つのAZに分散する
- データベースは Aurora MySQL、Writer 1台とReader 1台を2つのAZに分ける
- 静的ファイルは S3 に置き、CloudFront から配信する
- ログとメトリクスは CloudWatch に集約する
- VPC は 2AZ 構成で、各AZにパブリックサブネットとプライベートサブネットを持つ
- ALB はパブリックサブネット、ECS と Aurora はプライベートサブネットに置く
- 各AZのパブリックサブネットに NAT Gateway を置き、ECS からの外向き通信を通す
- ラベルは日本語で書く。ただし AWS のサービス名は英語のままにする
- 図は draw.io の XML 形式で、out/ 配下にファイルとして保存するAWS Diagram MCP Server 只能輸出 PNG，所以最後一行我改成「圖請以 PNG 形式保存到 out/ 底下」再送出。
這個指示在 5 種模式下執行後，生成了以下架構圖。
裡面有多餘的文字、圖示角落圓圓的等等，若直接拿去業務使用會有問題，所以我覺得還需要再微調。
AWS Diagram MCP Server（不建議）
線條很雜，看起來很難讀。
圖示和子網路等的角也都偏圓，AI 感非常重。
AWS Diagram MCP Server 已經被標示為不建議使用，而且也停止更新了。
這次是為了比較才拿來用，但不建議之後再使用。
aws-architecture-diagram Skill
加入了指示中沒有的方框數字，以及圖片右側的資料流。
服務圖示周圍也有方框，看起來還是很有 AI 味。
draw.io MCP Tool Server
和其他架構圖相比算不錯，但線條有重疊，閱讀性稍差。
還有一些沒要求的文字（例如「ECS / Aurora は各AZのプライベートサブネットに配置」）也被寫進去了。
draw.io Claude Code 外掛
這個也比其他幾個看起來更好一些。
不過線條角度有點圓，文字和線重疊的地方也有一些。
Claude Code（無 Skill・MCP）
我也讓沒有設定 MCP 或 Skill 的 Claude Code 來生成，作為比較。
整體其實整理得蠻乾淨，但圖示顏色有些怪異之處（例如 S3 是橘色），而且服務名稱同時寫在圖示上下兩側。
一步步加進去的指示
我把同樣的指示丟給 5 種模式後，會查看生成出來的架構圖，把覺得不順眼的地方加回指示中。
追加的內容大致如下。
| 覺得不對勁的地方 | 加進去的指示 |
|---|---|
| 文字和線重疊 | 不要讓線和標籤重疊 |
| 為了避免重疊，圖示被改成方框 | 改用 AWS 官方圖示，不要用方框代替 |
| ECS 還是方框 | 一定要使用圖示 |
| 文字放在圖外面 | 不要把文字放在圖外 |
| 線的標籤都消失了 | 線的標籤可以保留 |
| 子網路的上下順序與顏色提示都消失了 | 可接受附加在元素上的簡短補充說明 |
| AZ 被擅自寫成 A、C | 請寫正式的 AZ 名稱 |
| 使用者位置上上下下、左右不一 | 把使用者放在圖的最上方 |
| 新舊圖示混雜 | 圖示統一使用最新設計（但沒成功，最後的指示中拿掉了） |
| Aurora 變成了執行個體圖示 | 使用服務層級的圖示 |
| 標籤位置每次都不同 | 圖示標籤固定放在圖示下方 |
| 線從圖示的奇怪位置接出去 | 線從圖示邊框的中央引出 |
驗證結果
最後我是用下面這段指示來請它畫架構圖。
以下のAWS構成の構成図を作ってください。
- CloudFront の背後に ALB を置く
- ALB のターゲットは ECS Fargate のサービスで、2つのAZに分散する
- データベースは Aurora MySQL、Writer 1台とReader 1台を2つのAZに分ける
- 静的ファイルは S3 に置き、CloudFront から配信する
- ログとメトリクスは CloudWatch に集約する
- VPC は 2AZ 構成で、各AZにパブリックサブネットとプライベートサブネットを持つ
- アベイラビリティゾーンの名前は正式名称で書く。「A」「B」のような略記にしない
- ALB はパブリックサブネット、ECS と Aurora はプライベートサブネットに置く
- 利用者は図の上端に置く
- 各AZの中は、パブリックサブネットを上、プライベートサブネットを下に置く
- 各AZのパブリックサブネットに NAT Gateway を置き、ECS からの外向き通信を通す
- AWS 公式のアイコンを必ず使う。四角や丸で代用しない。サービス単位のアイコンを使い、インスタンスなど個別リソースのアイコンは使わない
- ラベルは日本語で書く。ただし AWS のサービス名は英語のままにする
- アイコンのラベルはアイコンの下に置く
- アイコンやラベルの文字に線を重ねない。ラベルの下から線を出すのはかまわない。線どうしを重ねない。交差するのはかまわない
- 線はできるだけアイコンの辺の中央から出す
- 図の外にタイトル、凡例、説明パネルを置かない。線のラベルや、要素に付く短い補足は入れてよい
- 図は draw.io の XML 形式で、out/ 配下にファイルとして保存する順帶一提，同樣的指示執行 3 次時，時間與 token 的平均如下：
| 模式 | 時間 | 輸出 token | 可重現性 |
|---|---|---|---|
| AWS Diagram MCP Server（MCP） | 5.5 分 | 23,393 | 每次差異都蠻大 |
aws-architecture-diagram Skill（Skill） |
5.4 分 | 33,510 | 變動時有點多 |
| draw.io MCP Tool Server（MCP） | 4.1 分 | 25,439 | 幾乎一樣。NAT Gateway 圖示每次不同 |
| draw.io Claude Code 外掛（Skill） | 5.8 分 | 34,544 | 幾乎一樣。S3 的位置會變 |
| Claude Code（無 Skill・MCP） | 5.4 分 | 32,805 | 幾乎一樣 |
AWS Diagram MCP Server（不建議）
線條仍然是曲線，圖示角落也還是圓的，AI 感還是沒完全消除。
而且只能輸出 PNG，後續沒辦法再修改不滿意的地方，這點也很麻煩。
aws-architecture-diagram Skill
框線和配置整理得很漂亮。
不過和其他模式相比，線條還是偏少，像是到 CloudWatch 的線，以及 Aurora 的複寫都沒有畫出來。
NAT Gateway 的圖示變成 VPC 圖示也讓人有點在意（也可能是我的指示下得不好）。
draw.io MCP Tool Server
線條很俐落，我個人相當喜歡。
不過這裡 NAT Gateway 的圖示也變成了 VPC 圖示，還差一點點。
draw.io Claude Code 外掛
圖示一致，資訊量也剛剛好，我覺得不錯。
Claude Code（無 Skill・MCP）
明明什麼都沒加，卻沒有線條交叉，而且即使重複多次生成架構圖，差異也是最小的。
結論
只要逐步補上指示，各種模式都比一開始好很多了！
就我個人而言，draw.io MCP、draw.io 外掛、Claude Code 這三種模式都表現得不錯。
與其糾結到底該用哪個官方 MCP 或 Skill，更重要的是要有明確的指示，像是「我想要這種架構圖，請考慮這些點來畫」。
寫程式也是一樣，指示不夠時，就會冒出多餘的註解或過度實作。架構圖也是如此。
……話雖如此，每次都要寫這麼長的指示，不會很麻煩嗎？
補充
所以我把這次一路加進去的指示，整理成一個 Skill 了！
如果有興趣可以試試看。
用這個 Skill 生成與本文相同的需求時，會變成這樣。
也可以畫沒有 VPC 的架構，例如 Amazon Bedrock AgentCore 和 Lambda Web Adapter 的範例。
大家在讓 AI 代理畫架構圖時，都會下什麼指示呢？如果能在留言告訴我，我會很開心！
本文中的架構圖使用的是 AWS Architecture Icons。
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
