こんにちは。認証チームのいまひろです。
私たち認証チームは、ここ最近 「チームの作業をできる限り可視化・計測し、アウトプットの形式を統一する」 という方針で動いています。モブプログラミング主体の開発スタイルでは、誰が・いつ・何を・どんな手順でやったかが揃っていないと、振り返りも改善もしづらいからです。
そのために柱として進めているのが、「できる限り多くの作業を Claude Code をインターフェースとして、スキル化して実行する」 という取り組みです。
チームのトレンド: できる限り多くの作業を Claude Code 経由にする ─ 作業の可視化 ─── セッションログ（航海日誌）に自動で残る ─ 作業の計測 ──── ツール呼び出し時間が定量的に取れる ─ アウトプット統一 ─ プラグインのスキルでフォーマットが揃う
Jira / Confluence / コード実装 / Git / ローカル DB やログ調査 / Gherkin テストの実施 ― ここまでは過去のブログで紹介した取り組みを通じて、Claude Code 経由で完結する状態になっています。
今回はこのトレンドをさらに一歩進めて、これまで取り残されていた領域 ― Miro 上の作図作業 ― も Claude Code 経由で完結できるようにした話を書きます。
課題：Miro の作業は航海日誌に載らない
私たちのチームでは、設計議論やリファインメント、画面遷移の整理、ロードマップ共有など、ホワイトボード的な場として Miro を多用しています。Jira や Confluence は Atlassian の MCP 経由で Claude Code に操作してもらえますが、Miro は各メンバーが自分のブラウザで直接開いて手作業していました。
チケットの起票・更新 → Claude Code 経由（航海日誌に記録） 仕様調査・議事録 → Claude Code 経由（航海日誌に記録） コード実装・テスト → Claude Code 経由（航海日誌に記録） Miro での作図・改訂 → 各自のブラウザで手動 ← 航海日誌に載らない
ブラウザ手動テストを Gherkin スキルで置き換えた時と同じ構造の問題で、「いつ、誰が、何を、どう描いたか」が航海日誌から抜け落ちていました。
既存の Miro MCP でできること、できないこと
Miro 公式が提供している MCP サーバーがあり、実際に手を動かして確認した範囲では、Miro MCP 単独でも以下はカバーできます。
- 新規ボード作成
- 付箋・シェイプ・カード・テキストの DSL 一括配置（
layout_create） - 既存アイテムの位置・サイズ・色・テキストを後から書き換え（
layout_update、find-and-replace 方式） - フローチャート / UML / ER 図の定型生成（
diagram_create） - 画像のアップロードと初期配置
- ドキュメント・テーブル・コメントの差し込み
一方で、「チームが日常的に Miro でやっている作図」を MCP だけ でカバーしようとすると、以下が埋まりません。
| やりたいこと | Miro MCP では難しい理由 |
|---|---|
| 自由レイアウトの中で 矢印（コネクタ） を引く | layout DSL に コネクタ型そのものが無い。diagram_create の定型図表内でしか矢印は使えない |
| カードに タグ を作って付与・付け替えする | タグ関連ツールが提供されておらず、DSL の CARD にも tagIds 相当が無い |
| カードの 塗り色 を変える | CARD の theme= で指定できるのはテーマ色のみで、それを背景塗りとして適用する切り替え（fillBackground 相当）が DSL に無い |
| 画像 を後から動かす・サイズを変える | image_create で配置はできるが、layout_update の対象に画像が含まれない |
| 配置後にカメラを対象フレームへ自動で合わせる | viewport 操作（zoomTo 相当）が無い |
要は 「DSL で表現できるアイテム（付箋・シェイプ・カード・テキスト）の作成と編集」までは Miro MCP 単独で完結する が、矢印・タグ・画像の事後調整あたりは MCP の表現範囲を超える、というのが今回の整理です。
アプローチ：chrome-devtools MCP から Miro Web SDK を直接叩く
そこで採ったのが、chrome-devtools MCP を経由して Miro Web SDK を直接呼び出す方式です。
Miro は認証済みブラウザ内で、自前のキャンバスを操作するための JavaScript API（Web SDK）を公開しています。chrome-devtools MCP からはブラウザ内のスクリプト実行が可能なので、この SDK を Claude Code から直接叩けます。
今回: 開発者 → Claude Code（スキル）
├─ chrome-devtools MCP 経由で Miro Web SDK を呼ぶ
│ ├─ 付箋・シェイプ・カードの配置・編集
│ ├─ 矢印（コネクタ）を細かい経路で繋ぐ
│ ├─ タグの作成と付け替え
│ └─ カメラをフレームに合わせる
└─ スクリーンショットで結果を確認 → 微調整
見た目は「ブラウザ操作」ですが、実体は Miro 公式の SDK を直接叩いている ので、UI で提供されている多くの機能に API レベルでアクセスできます。
chrome-devtools MCP 経由で「できるようになる」こと
Miro MCP で埋まらなかった範囲を、SDK 直叩きで一気に埋められます。
- 自由レイアウト内の矢印: 任意の 2 要素間に矢印を引ける。同じノードから複数本出る時も、起点を左寄り・右寄りにずらして経路を分散できる
- タグの作成と付け替え: MVP / 拡張のようなリリースタグ、ドメインタグの動的な付け替えができる
- カードの塗り色: テーマ色（cardTheme）と背景塗り ON 切り替え（fillBackground）の 2 つを組み合わせて、本体の塗り色を黄・ピンクなどに変えられる（Miro MCP では fillBackground 相当が DSL に無いため枠線色だけになる）
- 配置済み画像の位置・サイズ調整:
layout_updateで触れない領域も、SDK なら後追い調整できる - スクショで自己確認 → 微調整のループ: viewport を対象フレームに合わせて、Claude Code 自身が結果を読み取って判定する
実践：USM （ユーザーストーリーマッピング）と画面遷移図を Claude Code に描いてもらう
題材として、汎用的なタスク管理アプリのスケッチを Claude Code に描いてもらいました。認証チームでは、これを /miro-visualize <フレームURL> <作図対象> というスキルとして整備しています。
同じフレームの上半分に USM（カード × タグ運用）、下半分に画面遷移図（付箋 × シェイプ × 矢印 × テキスト）を配置しています。
画面遷移図でとくに効くのが、ハブ画面から複数本の矢印が出るケースの経路制御 です。例えば「ログイン画面」から「新規登録」「パスワード忘れ」の 2 本が下方向に出るとき、両方を同じ起点（ノード下端の中央）から出すと矢印が重なります。起点を「左寄り（30%）」「右寄り（70%）」にずらすことで経路が分かれ、戻り矢印も逆側に振り分けることで往復経路の重なりを避けられます。
画面遷移図は最初は付箋で骨組みを作り、議論が固まったら 実画面のキャプチャ画像 に差し替えると一気に伝わりやすくなります。ここで MCP と SDK の役割分担が活きます。
- chrome-devtools MCP でローカルの HTML モックを開いてスクショを撮る
- Miro MCP の画像アップロード経路で Miro 上に配置する
- SDK 側で旧付箋を削除し、矢印を画像 ID で繋ぎ直す
「アップロードは Miro MCP、編集は SDK 直叩き」という補完関係が、複合作業で活きてきます。
効果：航海日誌に「描いた作業」が記録されるようになった
スキルを通じて Miro を Claude Code 経由で操作するようになったことで、
- 航海日誌に Miro 改訂が自動記録される:
/miro-visualizeのスキル実行はセッション内のツール呼び出しとして残るため、週次レポートにも「今週の Miro 改訂」が乗るようになった - 「描く」が議論の延長線になる: 「議論する → 誰かが Miro を開いて写し取る」の 2 段階が、「議論する → そのまま Claude Code に描いてもらう」に短縮された
- 既存ボードへの「差し込み」運用: 「ボードを最初から作り直す」のではなく 「ボードを育てる」 ことが当たり前にできるようになった
Gherkin テスト自動化が「テスト実施」を補完したのに対し、今回は「作図・設計議論の可視化」を補完するピースになっています。
Claude Code を通じて記録されるようになった作業
┌─ コード実装・コミット・PR ── ✓ 元から
├─ Jira / Confluence の操作 ── ✓ 元から
├─ ローカルリソース調査・ログ ── ✓ ブログ8で追加
├─ Gherkin テストの実施 ── ✓ ブログ8で追加
└─ Miro での作図・改訂 ── ✓ 今回追加 ← ★
運用上の注意点
実際に使ってみる中で、ハマりやすい点が 2 つあります。
1. 矢印の経路の最終調整は、現状 Miro UI で手動が現実解
エルボ矢印の折れ曲がり位置は Miro が自動計算する仕様で、SDK でも直接 Y 座標を指定する手段がありません。一方 Miro UI ではドラッグで折れ線を上下に動かせるので、「9 割自動 + 最後の 1 割を人間が秒で直す」割り切りに落ち着いています。
2. Claude Code に「操作スコープ」を明示しないと、他の領域を巻き込んだ事故が起きる
実際、最初に試した時に対象判定のスコープが甘いまま矢印を一括処理してしまい、ボード全体の別エリアにあった矢印まで巻き込んで 100 本以上削除する という事故を出しました（幸い Miro のバージョン履歴で復元できました）。スキル側で以下を徹底するようにしています。
- 削除・改変対象は「対象フレームの子要素」だけに限定する
- 矢印の削除判定は「両端ともフレーム子」を必須にする
- 大量削除の前に件数の事前確認を出す
共有ボードで作業する時はとくに注意が必要で、自分のフレーム外には絶対に触れない前提でスキルを組むことを推奨します。
おわりに：Miro MCP と chrome-devtools MCP は補完関係
両者は否定し合うものではなく、ユースケースに応じて使い分け・組み合わせるのが現実解です。3 層に整理すると、
| シーン | 採用ツール |
|---|---|
| 定型図表の初期描画（フローチャート / UML / ER） | Miro MCP（diagram_create） |
| 自由レイアウト（USM / ロードマップ等）の配置 + 後追い編集 | Miro MCP（layout_create + layout_update） |
| 画像のアップロードと初期配置 | Miro MCP（image_*） |
| アップロード画像で既存付箋を置き換え＋矢印を繋ぎ直す | Miro MCP × chrome-devtools MCP |
| 描いた結果をスクショで自己確認＋微調整 | Miro MCP × chrome-devtools MCP |
| 自由レイアウト内の矢印・経路制御 | chrome-devtools MCP（Web SDK） |
| タグの作成・付与・付け替え | chrome-devtools MCP（Web SDK） |
| カードの塗り色・装飾 | chrome-devtools MCP（Web SDK） |
| 配置済み画像の位置・サイズ調整 | chrome-devtools MCP（Web SDK） |
ただスキル化してしまえば、Claude Codeが適切なツールを選択して作図してくれるので、上記についてこちらが特に意識する必要はありません。
ネット上では Miro MCP 単体でフロー図を生成するサンプルは見かけますが、矢印・タグ・画像の事後調整など MCP の範囲外に踏み込みたい場合に、chrome-devtools MCP 経由で Web SDK を直接叩く というアプローチはまだ知見が少ない領域だと思います。
これまでのブログで紹介してきた取り組み ― プラグインによる開発プラクティスのコード化、セッション記録による航海日誌、Gherkin テストの自律実行 ― に今回の Miro 連携が加わったことで、「Claude Code を介さずに行われる作業」がまた一つ減りました。
開発プロセスの中で「どこが見えていて、どこが見えていないか」を一つずつ潰していく取り組みは、地味ですが効いてきます。次に潰すべき「見えない作業」を、また少しずつ探していきたいと思います。
