💎

ClineにAWS Diagram MCP Serverを使って図を描画してもらってみる

2025/04/19に公開

AWS

diagram

Model Context Protocol

Cline

tech

ClineにAWS Diagram MCP Serverを使って図を描画してもらってみる

公式手順(awslabs/mcp)はこちら

1.Astral または GitHub の README から uv をインストールする
2.uv python install 3.10 を使って Python をインストールする
3.GraphViz をインストールする https://www.graphviz.org/

との事
※Graphizについての記事はこちらを読みました

事前準備

# 最新のPython バージョン管理ツールuvをインストール（pyenv + pipenv のような役割）
brew install uv

# 図の描画に必要なGraphvizインストール
brew install graphviz

# Graphvizインストール確認（バージョン表示）
dot -v

# 作業用ディレクトリ作成&移動
mkdir testDiagramMcpServer && cd testDiagramMcpServer

# awslabs/mcp (Model Context Protocol) のリポジトリをクローン
git clone https://github.com/awslabs/mcp.git

# AWS Diagram MCP Server のソースDirに移動
cd mcp/src/aws-diagram-mcp-server/

# Python3.10をuvでインストール（初回のみ必要）
uv python install 3.10

# Pythonバージョン確認
python --version

# Python 3.10仮想環境を .venv に作成
uv venv .venv -p 3.10

# 仮想環境有効化
source .venv/bin/activate

# DirにあるPythonパッケージを開発モードインストール
pip install -e .

# AWS Diagram MCP Server が依存している図描画ライブラリ diagrams をインストール
# 足りないよと言われて追加でinstallしたので不要だったらすいません
pip install diagrams

cline_mcp_settings.jsonにMCP　Server追加

cline_mcp_settings.jsonに以下を追加
filesystemのパスはhogeにしてますのでご自身の環境に合わせてください。

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/hoge/Desktop",
        "/Users/hoge/Downloads"
      ]
    },
    "awslabs.aws-diagram-mcp-server": {
      "command": "uvx",
      "args": ["awslabs.aws-diagram-mcp-server"],
      "env": {
        "FASTMCP_LOG_LEVEL": "ERROR"
      },
      "autoApprove": [],
      "disabled": false
    }
  }
}

何書いてもらおう

試しに以下をCloneして描画してもらいました。

一連のやりとり(と言っても私はAproveを押下しているだけ)

/Users/hoge/Desktop/testDiagramBlea/baseline-environment-on-aws/usecases/blea-gov-base-standalone のアーキテクチャをDiagram MCP を利用して図にしてください。(以降はすべて日本語で回答してください。)
Tokens:
52
8.1k
Cache:
+60.2k
453.7k
Context Window:
61.5k
200.0k
API Cost:
$0.4840

《中略》
BLEA（Baseline Environment on AWS）のガバメントベースのスタンドアロン環境のアーキテクチャ図を作成するために、まずはファイルの内容を確認させてください。
メインのスタックファイルを確認しました。次に、実際のスタック定義を見てみましょう。
次に、スタックの実装を確認するために、メインのスタック定義ファイルを読み取ります。
スタックの定義を確認しました。このスタックは以下のコンストラクトで構成されています：
Iam - IAM関連のリソース
Logging - ロギング関連のリソース
Detection - 検出関連のリソース
Notification - 通知関連のリソース
次に、各コンストラクトの詳細を確認しましょう。まずはIAMから見ていきます。
各コンストラクトの詳細を確認していきます。まずはIAMコンストラクトから見ていきましょう。
IAMコンストラクトの内容を確認しました。次に、Loggingコンストラクトを見てみましょう。
次に、Loggingコンストラクトの内容を確認します。
Loggingコンストラクトの内容を確認しました。次に、Detectionコンストラクトを見てみましょう。
次に、Detectionコンストラクトの内容を確認します。
Detectionコンストラクトの内容を確認しました。最後に、Notificationコンストラクトを見てみましょう。
すべてのコンストラクトの内容を確認しました。これらの情報を基に、BLEA（Baseline Environment on AWS）のガバメントベースのスタンドアロン環境のアーキテクチャ図を作成します。

アーキテクチャの主要コンポーネントは以下の通りです：

IAM - IAMポリシー、ロール、グループの設定

SysAdmin、IAMAdmin、InstanceOps、ReadOnlyAdminのポリシー、ロール、グループ
Logging - ログ関連のリソース

CloudTrail（S3バケット、KMSキー、CloudWatch Logsグループ）
AWS Config（設定レコーダー、配信チャネル、S3バケット）
Detection - 検出関連のリソース

GuardDuty
SecurityHub
AWS Config Conformance Pack
AWS Config Rules（DefaultSgClosedRule）
CloudWatch Alarms（IAMポリシー変更、不正アクセス試行、新しいアクセスキー作成、ルートユーザーアクティビティ）
CloudWatch Events Rules（セキュリティグループ変更、ネットワークACL変更、CloudTrail変更、SecurityHub検出、GuardDuty検出）
SNSトピック（アラーム通知用）
Notification - 通知関連のリソース

AWS Chatbot（Slack連携）
これらの情報を基に、Diagram MCPを使用してアーキテクチャ図を作成します。

これまでの情報を基に、BLEA（Baseline Environment on AWS）のガバメントベースのスタンドアロン環境のアーキテクチャ図を作成します。まず、利用可能なアイコンを確認しましょう。
アイコンのリストを確認しました。次に、ダイアグラムの例を確認して、どのようなダイアグラムが作成できるかを理解しましょう。

次に、ダイアグラムの例を確認して、どのようなダイアグラムが作成できるかを理解しましょう。

AWSのダイアグラム例を確認しました。これらの例を参考にして、BLEA（Baseline Environment on AWS）のガバメントベースのスタンドアロン環境のアーキテクチャ図を作成します。

コードを確認した結果、このアーキテクチャは以下のコンポーネントで構成されています：

IAM - IAMポリシー、ロール、グループの設定

SysAdmin、IAMAdmin、InstanceOps、ReadOnlyAdminのポリシー、ロール、グループ
Logging - ログ関連のリソース

CloudTrail（S3バケット、KMSキー、CloudWatch Logsグループ）
AWS Config（設定レコーダー、配信チャネル、S3バケット）
Detection - 検出関連のリソース

GuardDuty
SecurityHub
AWS Config Conformance Pack
AWS Config Rules（DefaultSgClosedRule）
CloudWatch Alarms（IAMポリシー変更、不正アクセス試行、新しいアクセスキー作成、ルートユーザーアクティビティ）
CloudWatch Events Rules（セキュリティグループ変更、ネットワークACL変更、CloudTrail変更、SecurityHub検出、GuardDuty検出）
SNSトピック（アラーム通知用）
Notification - 通知関連のリソース

AWS Chatbot（Slack連携）
これらの情報を基に、ダイアグラムを作成します。


エラーが発生しました。GuardDutyというクラスがdiagrams.aws.securityからインポートできないようです。正しいクラス名を確認するために、利用可能なAWSのセキュリティアイコンを確認してみましょう。

GuardDutyというクラスがdiagrams.aws.securityからインポートできないようです。正しいクラス名を確認して、ダイアグラムを修正します。

今度はChatbotというクラスがdiagrams.aws.businessからインポートできないというエラーが発生しました。利用可能なAWSのアイコンを再確認して、正しいクラス名とパッケージを使用するようにコードを修正しましょう。

Chatbotというクラスがdiagrams.aws.businessからインポートできないというエラーが発生しました。利用可能なAWSのアイコンを再確認して、正しいクラス名とパッケージを使用するようにコードを修正します。

ダイアグラムが正常に生成されました。生成されたダイアグラムは /Users/hoge/Desktop/generated-diagrams/blea_gov_base_standalone_architecture.png.png に保存されています。

このダイアグラムは、BLEA（Baseline Environment on AWS）のガバメントベースのスタンドアロン環境のアーキテクチャを表しています。主要なコンポーネントは以下の通りです：

IAM - IAMポリシー、ロール、グループの設定

SysAdmin、IAMAdmin、InstanceOps、ReadOnlyAdminのポリシー
Logging - ログ関連のリソース

CloudTrail（S3バケット、KMSキー、CloudWatch Logsグループ）
AWS Config（設定レコーダー、配信チャネル、S3バケット）
Detection - 検出関連のリソース

GuardDuty
SecurityHub
AWS Config Rules（DefaultSgClosedRule）
CloudWatch Alarms（IAMポリシー変更、不正アクセス試行、新しいアクセスキー作成、ルートユーザーアクティビティ）
CloudWatch Events Rules（セキュリティグループ変更、ネットワークACL変更、CloudTrail変更、SecurityHub検出、GuardDuty検出）
SNSトピック（アラーム通知用）
Notification - 通知関連のリソース

AWS Chatbot（Slack連携）
これらのコンポーネント間の関連性も表示されています。

ダイアグラムが正常に生成されました！生成されたダイアグラムは /Users/hoge/Desktop/generated-diagrams/blea_gov_base_standalone_architecture.png.png に保存されています。

このダイアグラムは、BLEA（Baseline Environment on AWS）のガバメントベースのスタンドアロン環境のアーキテクチャを表しています。主な構成要素は以下の通りです：

1. IAM（アイデンティティとアクセス管理）
SysAdmin Policy
IAMAdmin Policy
InstanceOps Policy
ReadOnly Policy
2. Logging（ログ記録）
CloudTrail
CloudTrail Bucket（ログ保存用S3バケット）
CloudTrail Access Log Bucket（アクセスログ用S3バケット）
CloudTrail KMS Key（暗号化キー）
CloudTrail Log Group（CloudWatchロググループ）
AWS Config
Config Recorder（設定レコーダー）
Config Bucket（設定保存用S3バケット）
3. Detection（検出）
GuardDuty（脅威検出サービス）
SecurityHub（セキュリティ状態の一元管理）
Config Rules（DefaultSgClosedRule - デフォルトセキュリティグループの閉鎖確認）
CloudWatch Alarms（監視アラーム）
IAM Policy Change（IAMポリシー変更検知）
Unauthorized Attempts（不正アクセス試行検知）
New Access Key Created（新規アクセスキー作成検知）
Root User Activity（ルートユーザー活動検知）
CloudWatch Events Rules（イベントルール）
Security Group Change（セキュリティグループ変更検知）
Network ACL Change（ネットワークACL変更検知）
CloudTrail Change（CloudTrail設定変更検知）
SecurityHub Finding（SecurityHub検出結果）
GuardDuty Finding（GuardDuty検出結果）
Security Alarm Topic（SNSトピック - アラーム通知用）
4. Notification（通知）
AWS Chatbot（Slack連携 - セキュリティ管理者への通知）
このアーキテクチャは、セキュリティイベントの検出から通知までの一連のフローを示しており、AWS環境のセキュリティガバナンスの基盤となる設計です。ユーザーのアクションはIAMとCloudTrailによって記録され、様々な検出メカニズムによって監視され、問題が発生した場合はセキュリティ管理者に通知される仕組みになっています。

Cline wants to execute this command:
open /Users/hoge/Desktop/generated-diagrams/blea_gov_base_standalone_architecture.png.png

出来たもの

生成された画像(拡張子png.pngになっちゃってますが)

以上でした

AnthropicのAPI Keyを紐づけていますが一連のやりとりで以下金額かかりました。
$0.4840
Clineさんちゃんと「いくら使ったよ」って計算して出してくれるんですね。

私個人はまだまだ生成AIビギナーなので、高いのか安いのかもあまり感覚ないんですが、この辺も色々使いながら感覚養っていきたいなと思いました。

有難うございました。

ClineにAWS Diagram MCP Serverを使って図を描画してもらってみる

事前準備

cline_mcp_settings.jsonにMCP Server追加

何書いてもらおう

出来たもの

以上でした

Discussion

cline_mcp_settings.jsonにMCP　Server追加