AIエージェントで構成図を作る方法（MCP）

AI アシスタントは、説明文を図に変えるのが得意です。問題はその翌日から始まります。チャットに貼られた PNG や、プルリクエストに含まれる Mermaid のスニペットとして存在する図は、コピーにすぎません。コピーは誰も更新しないので、1 か月後には、説明しているはずのシステムと食い違ってしまいます。

Model Context Protocol（MCP）は、エージェントが作業する場所を変えます。MCP で Archboard に接続したエージェントは、画像を渡す代わりに、チームがブラウザで開いているのと同じ構造化された図を読み取り、編集します。変更はキャンバスにライブで表示され、誰の代理で動いているかがラベルで示されます。そして、その本人が 1 ステップで元に戻せます。

このガイドでは、AI アプリを Archboard に接続する方法を紹介し、最初のドラフトからレビューまでの実例をたどったうえで、実際に重要になるプロンプト、権限、制限について説明します。

エージェントが Archboard でできること

Archboard の図は、ノードパックに含まれる型付きのノードで構成されます。Kubernetes の Deployment、クラウドのデータベース、C4 のコンテナ、BPMN のタスクは、どれもラベルを貼っただけのボックスではなく、ポートとプロパティを持つノードです。MCP を通じて、エージェントは次のことができます。

• アクセスできる図を、概要（フレーム、件数、誰が作業しているか）またはノードとエッジの完全なレコードとして一覧表示し、読み取れます。
• 説明文、操作のリスト、または実際のノード型に対応付けた Mermaid のフローチャートから、図を作成できます。
• 操作のバッチを 1 つの変更として適用し、図を編集できます。ノードの追加、ポートの接続、移動、スタイルの変更、削除が可能です。
• PNG のスナップショットをレンダリングして作業を確認できます。MCP Apps に対応したアプリでは、会話の中に図を表示することもできます。
• 自分の変更を 1 つ元に戻せます。

Archboard 自体には AI モデルは含まれていません。エージェントはあなたが用意します。Claude、Cursor、VS Code のほか、OAuth サインイン付きのリモート MCP サーバーを追加できるアプリなら使えます。AI エージェントのページ に簡単な概要があります。

AI アプリを接続する

Archboard の MCP サーバーは https://getarchboard.app/mcp にあります。Streamable HTTP と OAuth を使うので、コピーする API キーはありません。アプリが接続すると Archboard のサインインページが開くので、Google または GitHub でサインインし、アプリが求めるアクセスを承認します。

同意画面では、アプリが使える組織とワークスペースを選び、それぞれで許可する操作を閲覧・編集・削除から選びます（削除は図をゴミ箱に移す操作です）。アプリの名前の変更、使える範囲やできることの変更、アクセスの削除は、あとから 設定 > 連携アプリ で行えます。

主なアプリでの設定方法は次のとおりです。

Claude（Web 版・デスクトップ版）。 Customize > Connectors を開き、Add custom connector を選んで https://getarchboard.app/mcp を入力します。Team プランと Enterprise プランでは、まず Owner が Organization settings > Connectors で追加し、そのあとであなたが Customize > Connectors から接続します。

Claude Code。

claude mcp add --transport http archboard https://getarchboard.app/mcp

そのあと、セッション内で /mcp を実行してサインインします。

Cursor。 ~/.cursor/mcp.json にサーバーを追加します。

{
  "mcpServers": {
    "archboard": { "url": "https://getarchboard.app/mcp" }
  }
}

VS Code。 mcp.json に追加します（VS Code では servers キーを使います）。

{
  "servers": {
    "archboard": { "type": "http", "url": "https://getarchboard.app/mcp" }
  }
}

その他のアプリ。 プランで許可されていれば、アプリのコネクタ設定または MCP 設定で、https://getarchboard.app/mcp をリモート MCP サーバーとして追加します。アプリには、クライアントシークレットを使わない OAuth サインインへの対応が必要です。クライアント開発者向けの詳細は MCP ドキュメント にあります。

実例: オンラインショップをドラフトからレビューまで

Archboard に接続したエージェントとのセッションを見てみましょう。プロンプトは実際に入力するようなもので、かっこ内のツール名は、エージェントが裏で呼び出しているものです。

1. 最初のドラフトを頼む

オンラインショップの C4 コンテナ図を描いて。Web アプリ、API、注文メールをメール配信サービス経由で送るバックグラウンドワーカー、PostgreSQL データベース、決済用の Stripe を入れて。自分たちで運用しているものは、すべてシステム境界の中に入れて。

エージェントはワークスペースを選び（list_workspaces）、必要な C4 のノード型を検索して（search_node_types）、図を作成します（create_diagram）。続いてスナップショットをレンダリングし（render_snapshot）、重なりがないこと、すべてのエッジにラベルがあることを確認してから、結果を会話の中に表示します（show_diagram）。

ドラフトは出発点です。エージェントはあなたの文章からコンテナを選んだだけなので、ワーカーがデータベースからも読み取ることは、あなたが伝えない限りわかりません。

2. 言葉で編集し、キャンバスで確認する

ワーカーはデータベースからも注文を読み取る。API と PostgreSQL の間に Redis キャッシュを追加して、すべての接続線にプロトコルのラベルを付けて。

エージェントは現在の図を読み取り（get_canvas）、操作を 1 つのバッチとして適用します（apply_ops）。図を開いていれば、アプリ名とあなたの名前が付いたカーソルの隣に、新しいノードが現れるのが見えます。図を開いているチームメイトにも、同じように見えます。

最初の 2 つのプロンプトのあとの図がこちらです。

3. 気に入らない変更を元に戻す

直前の変更を元に戻して。

エージェントによる変更は、1 つひとつが 1 ステップです。エージェントが自分の変更を取り消すこともできますし（revert_change）、変更の直後にエディタに表示される通知から、あなたが 1 ステップで元に戻すこともできます。その間に他の人が変更した項目は保持されます。

4. 既存の図について質問する

PostgreSQL と通信しているコンテナはどれ？ プロトコルは何？

このような質問では、エージェントは読み取るだけです（get_canvas）。既存の図を新しいメンバーに説明するのは、エージェントの最も役立つ使い方の 1 つで、書き込みのアクセスはまったく必要ありません。

うまくいくプロンプト

• 図の種類を指定する。 「C4 コンテナ図」「namespace ごとにフレームを 1 つ置いた Kubernetes の図」「チームごとにレーンを 1 本置いた BPMN プロセス」のように伝えると、エージェントは汎用のボックスではなく、対応するノードパックを使います。
• 各境界の中に何を入れるかを伝える。 フレーム、namespace、VPC には意味があるので、何をどこに置くかをエージェントに伝えましょう。
• エッジにラベルを付けるよう頼む。 「すべての接続線にプロトコルとポートのラベルを付けて」と頼むと、矢印がドキュメントになります。
• 変更は小さく保つ。 1 回の変更につき依頼を 1 つにすると、全面的な書き直しよりもレビューしやすく、元に戻すのも簡単です。
• エージェントに作業を確認させる。 「スナップショットをレンダリングして、重なりを直して」と頼めば、あなたが見る前にレイアウトの問題を見つけられます。
• 要約を頼む。 「変更した内容を一覧にして」と頼めば、プルリクエストやチームのチャットに使えるレビュー用のメモが手に入ります。

誰が何を管理するのか

チームが作業している図に AI アプリを接続するとなれば、疑問が出てくるのは当然です。Archboard が適用するルールは次のとおりです。

• 範囲はあなたが選ぶ。 アプリが見られるのは許可した組織とワークスペースだけで、そこでできるのも許可した操作（閲覧、編集、削除）だけです。実際にできることは、その設定、付与されたスコープ、あなたのロール、プランのうち、最も制限の厳しいものに従います。
• 変更は見え、誰によるものかがわかる。 エージェントのカーソルと変更には、アプリ名と、代理で作業している相手の名前がラベルとして付きます。キャンバス上でもバージョン履歴でも同じです。
• 取り消しは 1 ステップ。 あなたのエージェントの変更は、エディタの通知から元に戻すことも、7 日以内にエージェントに取り消しを頼むこともできます。組織のオーナーと管理者も元に戻せます。
• 削除は復元できる。 エージェントが図をゴミ箱に移すには削除の権限が必要で、Archboard はエージェントに、あなたが頼んだときだけそうするよう指示しています。図はゴミ箱から復元できます。
• 図の中のテキストはデータ。 Archboard はエージェントに、図の中のラベル、メモ、名前を指示ではなく常にデータとして扱うこと、そして画像はあなたが頼んだときだけ追加することを指示しています。

エージェントに任せるとき、手で描くとき

エージェントが得意なのは、最初のドラフト、繰り返しの多い編集（「orders-* のサービスをすべて checkout-* にリネームして」）、どのみち行う変更に合わせて図を最新に保つこと、そして他の人が描いた図の説明です。サービスを変更したばかりのコーディングエージェントなら、同じセッションのうちに構成図も更新できます。

何が重要かを決めるには、今でも手で描くほうが向いています。図はシステムについての主張であり、何を省くかは判断の問題です。入力作業はエージェントに任せ、判断は自分の手に残しましょう。

知っておきたい制限

• プランの上限が適用される。 MCP はすべてのプランで、エディタと同じプラン上限で動作します。Free プランでは、図は 3 つまで、1 つの図につきダイアグラムノード 15 個と、メモ・テキスト・ステッカー・マインドマップのトピック 150 件までです。
• ツール呼び出しには 1 分あたりのレート制限がある。 エージェントが上限に達すると、Archboard は再試行までどれだけ待てばよいかをエージェントに伝えます。
• エージェントが知っているのは、あなたが伝えたことと図の中身だけ。 Archboard を通じて、稼働中のクラスターやコードベースを見ることはできません。重要な依存関係があるなら、それを伝えるか、コーディングエージェントにコードを読ませましょう。

よくある質問

Archboard に接続できる AI アプリはどれですか？ OAuth サインイン付きのリモート MCP サーバーを追加でき、クライアントシークレットを必要としないアプリです。AI エージェントのページ に、Claude、Cursor、VS Code、Claude Code などのクイックセットアップがあります。

Archboard は独自の AI モデルを使っていますか？ いいえ。Archboard は図のためのワークスペースで、推論は接続した AI アプリが行います。

エージェントは私の図をすべて見られますか？ 見られるのは、接続時に許可した組織とワークスペースだけで、それぞれ選んだ権限の範囲内に限られます。デフォルトでは、後から参加するものも含めたすべてが、削除の権限付きで許可されます。範囲は同意画面で、またはあとから 設定 > 連携アプリ で絞り込めます。

エージェントがしたことを元に戻せますか？ はい。エージェントの変更は 1 つひとつが、エディタの通知から元に戻せる 1 ステップです。アプリ自身も、過去 7 日以内の自分の変更を取り消せます。

Free プランでも使えますか？ はい。MCP はすべてのプランで、エディタと同じプラン上限で使えます。

無料で始める — 1 シート、クレジットカード不要。