「Claude DesktopでMCPの設定がうまくいかない」「設定ファイルがどこにあるか分からない」と悩んでいませんか？
本記事では、Claude Desktopの設定に頼らず、VSCode + Ubuntu(WSL2) + kiro-cli を組み合わせ、スマートに drawio-mcp で構成図を生成する「代替ルート」を最短手順で解説します。
ステップ1：VSCodeのインストール
まずは作業の起点となる Visual Studio Code（VSCode） をインストールします。
- 公式サイトからインストーラーをダウンロード。
- インストール完了後、拡張機能アイコンから「WSL」を検索してインストールしてください。これがWindowsとUbuntuを繋ぐ架け橋になります。
ステップ2：Ubuntu（WSL2）の設定
Windows上でLinuxを動かすためのセットアップです。
- PowerShellを管理者権限で開き、
wsl --installを実行します。 - PCを再起動後、Ubuntuのユーザー名とパスワードを設定します。
- VSCodeを起動し、左下の「><」マークをクリック。「Connect to WSL」を選択してUbuntu環境にログインします。
ステップ3：Node.js のインストール（※重要）
kiro-cli や drawio-mcp はNode.js環境で動作します。Ubuntu側に、安定して管理できる「nvm（Node Version Manager）」を使って導入しましょう。
VSCode上のターミナルで以下のコマンドを順に実行してください。
# nvmのインストール
curl -o- https://raw.githubusercontent.com | bash
# 設定の反映
source ~/.bashrc
# Node.js（推奨版）のインストール
nvm install --lts※今回のツール群はNode.jsベースのため、Pythonのインストールは省略して問題ありません。
ステップ4：kiro-cli のインストール
AWSの専門家エージェントである kiro-cli を導入します。
npm install -g @aws-kiro/cliステップ5：drawio-mcp の設定（kiroに頼む）
ここが本記事の最大のポイントです。面倒な設定ファイルの記述は、kiro自身にやってもらいましょう。
- VSCodeのターミナルで
kiroと入力して起動します。 - kiroに対して、以下のプロンプト（指示）を投げてください。
「drawio-mcpを使えるようにしたい。npmからインストールして、必要な設定を行って」
これだけで、kiroが自動的に依存関係を整理し、利用可能な状態までセットアップしてくれます。
ステップ6：実際に出力
準備完了です。kiroに具体的な構成図の作成を依頼してみましょう。
依頼例：
「ALB、EC2（2台）、RDS（Multi-AZ）の構成図を、draw.io形式でカレントディレクトリに書き出して」
指定した場所に .drawio ファイルが生成されていれば成功です！
そして、実際に作成した構成図がこちらになります。
文字の配置などはもう少し改善の余地はありそうですね…！
まとめ
Claude Desktopでの設定に苦戦していた方も、この「VSCode + kiro-cli」ルートなら、対話形式でスムーズに環境構築が可能です。ぜひ、AIの力を借りて爆速で構成図を作成してみてください。
コメント