Claude Code と Miro を繋いで Web アプリの全画面を自動キャプチャして画面遷移図を作ってみた
製造ビジネステクノロジー部の小林です。
最近開発している Web アプリ（React + Django）の画面が増えてきて、「全画面のキャプチャを Miro に貼って、動線を矢印で結んだ画面遷移図が欲しい」という話になりました。
画面数は 50 を超えます。手作業で進める場合、ログインして 1 画面ずつスクリーンショットを撮り、Miro に貼り、矢印を引いてラベルを付ける、という作業に半日から 1 日ほどかかりそうです。
そこで Claude Code に依頼してみました。Miro ボードの URL を渡してから、54 画面のキャプチャと 68 本の動線が配置されたボードができあがるまで、私が行ったのは Miro のトークン発行だけでした。
全体の流れ
- Claude Code がフロントエンドのルーティング定義を読んで、画面一覧と遷移動線を洗い出す
- Playwright でローカル起動中のアプリに自動ログインし、全画面をキャプチャする
- Miro REST API（または Miro MCP サーバー）で、画像・説明テキスト・コネクタをボードに配置する
この方法の特徴は、画面遷移の情報を人の記憶に頼らず、コードから読み取る点です。react-router の <Route> 定義、サイドメニューの onClick、各ページの navigate() 呼び出しを Claude Code が grep して、ノード（画面）とエッジ（遷移）を組み立てます。
前提環境
| 項目 | 内容 |
|---|---|
| Claude Code | 対象アプリのリポジトリで起動 |
| 対象アプリ | React + TypeScript + antd（フロント）、Django REST Framework（バック）。ローカルで起動済み |
| キャプチャ | Playwright |
| Miro | 旧 Business プラン。REST API と Miro MCP サーバーは全プランで利用可能 |
Claude Code への依頼は次の内容だけです。
https://miro.com/app/board/xxxxxxxxx=/
上記の Miro に、Web アプリの全ての画面のキャプチャを動線引いて貼り付けて欲しいです
画面一覧と動線をコードから洗い出す
Claude Code はまず App.tsx のルート定義と、サイドメニューコンポーネントの onClick、各ページの navigate(...) を読みに行きました。
grep -rn "navigate(\"\|navigate('\|navigate(\`" src/pages src/components
この調査で、次のことが分かりました。
- ルートは 25 本。ただし
/update-listのような画面はlocation.stateで選択中のプロジェクトを受け取る前提のため、URL を直接開いても表示されない - サイドメニューの「Create/Edit Projects」「List Item Management」は画面遷移ではなくモーダルを開き、モーダル内のボタンから各画面へ遷移する
- 1 つの画面にタブが 5 つあり、タブごとに別のツールバー・別のモーダル群を持っている
- メニューやボタンから到達する経路がない画面が 2 つある（旧経路の画面と、工事中ページ）
つまり、ルート一覧がそのまま画面一覧になるわけではありません。モーダルやタブ、画面内のモード切替まで含めて、はじめて「全画面」になります。
Claude Code はこれを踏まえて、キャプチャ対象を次の 3 グループに分けました。
| グループ | 例 |
|---|---|
| 直リンクで開ける画面 | ルート定義から URL を組み立てて開ける画面 |
| クリック操作が必要な画面 | location.state を前提とする画面、タブ |
| モーダル・サブ画面 | サイドメニューや画面内ボタンから開くモーダル |
Miro に配置する
OAuth トークンの発行
OAuth のアクセストークンを発行します。Miro の「プロフィールの設定 → 作成アプリ」でアプリを作成し、対象のチームにインストールしてトークンを取得します。
スコープに boards:read と boards:write を付けて「アプリをインストールして OAuth トークンを取得」を押すと、アクセストークンが画面に表示されます。
OAuth トークンの発行では、次の 2 点に注意します。
- トークンはインストール先のチームに紐づくため、対象ボードがあるチームを選びます。別チームのボードにアクセスすると 403 が返ります
- 「ユーザー認証トークンの有効期限を失効させる」がオンの場合、トークンの有効期限は 1 時間です。発行後すぐに使うか、期限が切れたら再発行します
Claude Code にトークンを渡します。トークンを渡すときは、チャットに貼らず、環境変数で 1 回だけ渡すようにしました。
MIRO_TOKEN=<token> MIRO_BOARD_ID='xxxxxxxxx=' node miro.mjs
実行結果
画面がグループごとに列で並び、コネクタでつながった遷移図ができました！
Miro MCP サーバーも試す
Miro には公式の MCP サーバー（https://mcp.miro.com/）があり、Claude Code 用の公式プラグインも用意されています。
導入は次のコマンドで行います。
claude plugin install miro@claude-plugins-official
続けて、Claude Code 上で次の操作を行います。
/reload-pluginsを実行して、起動中のセッションにプラグインを反映する/mcpを実行し、plugin:miro:miroを選んで Authenticate を選択する
ブラウザで OAuth の同意画面が開き、組織とチームを選ぶとトークンが Claude Code 側に保存されます。どちらも OAuth のトークンを使う点は同じですが、MCP ではトークンの取得と受け渡しを Claude Code が行うため、トークンをコピーして渡す手順はありません。
OAuth トークン（REST API）と MCP の使い分け
どちらの方法でも、Claude Code に会話で依頼する流れは同じです。違いは、Claude Code が Miro を操作する方法とトークンの扱いにあります。画像のアップロードやコネクタの作成は MCP のツールにもあるので、できること自体に大きな差はありません。差が出るのは効率と再現性です。
| 観点 | OAuth トークン（REST API） | Miro MCP |
|---|---|---|
| 認証 | アプリを作成・インストールして OAuth トークンを取得し、自分で管理する | /mcp からブラウザで OAuth 認可。トークンは Claude Code が保存・管理する |
| Claude Code による操作方法 | REST API を呼び出すスクリプト（今回は miro.mjs）を書いて実行する |
MCP のツール（image_create、canvas_create_from_svg など）を会話の中で呼び出す |
| 大量のアイテムを配置する場合 | スクリプトが数十秒で完走する。失敗しても同じコマンドを再実行するだけ | 画像 1 枚につきアップロード URL 取得と作成で 2 回のツール呼び出しになり、54 枚だと 100 回超を会話の中で回すことになる |
| 再現性 | スクリプトがファイルとして残るので、画面が増えても同じレイアウトを再生成できる | 毎回 Claude が組み立て直すので、配置が揺れる可能性がある |
| 向いている場面 | 今回のように座標を計算して数十〜数百アイテムを規則的に並べる作業 | できたボードを見ながら「この矢印のラベルを直して」「この画面は隣の列に」といった手直し |
今回は 54 枚を規則的に並べる作業だったので REST スクリプトを選びました。なお MCP の SVG 一括作成（canvas_create_from_svg）は今回試していないので、1 回の呼び出しでどこまで置けるかは未確認です。
まとめ
Claude Code でコードから画面と動線を洗い出し、Playwright でキャプチャを撮影し、Miro REST API で並べる。この 3 ステップで、50 画面を超える遷移図をほぼ手作業なしで作成できました。
コードから機械的に拾うため、見落としていたモーダルや到達経路のない画面も見つかり、アプリの棚卸しとしても役立ちました。
アプリの画面や機能を把握するうえでも、遷移図を手軽に作れるのは便利ですね。
この記事がどなたかの参考になれば幸いです。
