【Claude Code x Draw.io】でAWS構成図の作図を効率化する

はじめに

AWSを使ってインフラを構築する際や、それを記事としてアウトプットする際にインフラ構成図を作図することがあると思います。
今回は、そんな作図作業を[Cursor(VScode), Draw.io, Claude Code]を使用して効率化する方法を実際に試してみました。

今回はこちらの記事を参考にさせていただきました。ぜひご参照ください。

・手元にファイルが残らない
・コンテキストが圧迫する
といった理由から、MCPサーバーではなくSkillを使用します。

準備

1. VS Code 拡張機能の追加

VS codeの拡張機能から、draw.ioで検索し、以下のDraw.io Integrationをインストールします。

インストール完了後、~.drawioというファイルを作成すると以下のように編集できるようになっているかと思います。

デフォルトではVS Codeのカラーテーマに合わせるようになっています。
画面が暗くて見にくかったので、設定から変えようと思います。
設定画面からdraw.ioで検索し、少し下にスクロールすると、Themeの項目から設定することができます。

今回はKennedyで設定してみました。

2. skillの追加

jgraph/drawio-mcp
こちらのリポジトリから、skill-cli/SKILL.mdの部分だけを取得して、お好みの.claude/に配置します。

zsh

cd {.claudeのあるディレクトリ}

mkdir -p .claude/skills/drawio

curl -sL https://raw.githubusercontent.com/jgraph/drawio-mcp/refs/heads/main/skill-cli/drawio/SKILL.md \
  > .claude/skills/drawio/SKILL.md

実際に使ってみた

Claude Codeを起動し、プロンプトにファイルのパスと
「簡単なwebアプリのインフラ構成図をawsのアイコンを使用して作成して」を入力し実行してみました。
skillがちゃんと発動しているのがわかります。

以下のような構成を考えてくれたみたいです。

完成したのがこちら。

期待するアプトプットを出力するにはもう少し修正が必要ですが、１から作成するのに比べたらかなり楽になったのではないかと思います。