ClaudeとEraserを連携してシステム構成図を生成・更新する

Eraser MCPは、Eraserのワークスペースにある図・ドキュメント・ファイルをClaudeから読み書きできるリモートMCPサーバーです。自然文で「こういう構成を描いて」と頼めば図が生成され、続けて「キャッシュ層を足して」と頼めば同じ図が更新されます。

接続先のURLは https://app.eraser.io/api/mcp です。Claude.aiからはコネクタとして、Claude Codeからは claude mcp add で追加できます。

Eraser MCPで何ができるか

Eraser MCPの対象は図そのものに限りません。Eraserの資料では、機能が次の9種類に分かれています。

機能	内容
図の生成	内容システムやフローを自然文で説明すると、スタイル・色・書体・レイアウト方向を指定して図が作られる
図の編集	内容既存の図を自然文の指示で繰り返し直せる
ドキュメントの生成と編集	内容ファイルのドキュメント部分をプロンプトから作り、指示で直せる
図の書き出し	内容PNG・JPEG(テーマ・品質・背景を指定可)、または編集可能なdraw.ioファイル
ファイル管理	内容作成・一覧・読み取り・更新・検索・アーカイブ
図の管理	内容ファイル内の個別の図を作成・読み取り・更新・削除
フォルダ管理	内容ファイルをフォルダで整理
プリセット管理	内容生成の文体や用語を決めるAIプリセット、そのルール、テンプレートと参照
全文検索	内容ワークスペース内のファイルと図を横断検索

Claude側の説明ページでは、Eraserコネクタは「Anthropic verified」で、カテゴリはDeveloper tools、サインインが必要と記載されています。追加時期は2026年5月です。

「生成」と「手動」の二系統がある

ツール名の頭に manually_ が付くものは、渡したコードやMarkdownをAIを通さずそのまま書き込みます。付かないものは自然文の指示を受け取り、EraserのAIが図や文書を作ります。

つまり、図の中身をClaudeが自分で組み立てたいときは manually_create_diagram、Eraser側のAIに任せたいときは create_diagram という使い分けになります。後者はAIクレジットを消費します。

接続する手順

Claude.aiの場合

Eraserのコネクタページを開いて「Connect」を押します。初回はブラウザでEraserアカウントへのサインインと許可を求められます。

Claude Codeの場合

次のコマンドで追加します。

claude mcp add --transport http eraser https://app.eraser.io/api/mcp

追加しただけでは未認証です。Claude Codeを起動して /mcp を開くと、認証が必要なサーバーとして eraser が表示されます。そこからOAuthのブラウザ認証を済ませると、ツールが使えるようになります。

なお claude mcp add は、スコープを指定しなければ現在のプロジェクト専用(ローカルスコープ)として ~/.claude.json に保存されます。チームで共有したいときは --scope project を付けると、プロジェクト直下の .mcp.json に書かれ、バージョン管理で共有できます。

認証方式は二つ

Eraser側の認証は、OAuthとAPIキーの二通りです。違いは課金と帰属にあります。

項目	OAuth	APIキー
向く場面	OAuth個人の対話利用(推奨)	APIキーCI、ヘッドレス環境、OAuth非対応のクライアント
消費されるAIクレジット	OAuthサインインしたユーザー個人分	APIキーチーム分
作られたファイルの帰属	OAuthそのユーザー	APIキーチーム

APIキーはEraserのアカウント設定から取得します。組織単位のAPIトークンは使えず、チームトークンを使う点に注意が必要です。キーはパスワードと同様に扱い、設定ファイルへ直書きせず、シークレット管理か環境変数に置きます。

構成図を生成してから更新するまで

接続できたら、最初の依頼は具体的な構成を渡す形が向いています。次は依頼文の一例です。

Eraserに「決済システム構成」というファイルを作って、
API Gateway、認証サービス、決済サービス、PostgreSQL、
外部決済プロバイダの関係を構成図にしてください。
レイアウトは左から右で。

ここでClaudeが呼ぶのは、ファイルを作る create_file と、図を生成する create_diagram が中心になると考えられます。実際にどのツールが選ばれるかは、Claudeの判断とクライアント側の承認設定で変わります。

既存の図を直す

更新では、まず list_diagrams や get_diagram で今の図のコードを読み、そのうえで update_diagram に自然文の指示を渡す流れになります。依頼の例を挙げます。

さっきの決済システム構成図に、決済サービスとDBの間の
Redisキャッシュ層を追加してください。
他の部分のレイアウトは変えないでください。

ここで効くのが、図の「コード」を読めることです。Eraserの図はコードで表現されるため、Claudeは差分の影響範囲を把握したうえで編集を頼めます。意図しない箇所まで書き換わったと感じたら、get_diagram でコードを読ませて、どこが変わったかを説明させるのが手早い確認方法です。

コードベースから描かせる

Claude Codeでは、リポジトリを読んだ内容を元に図を作る使い方ができます。Eraserのコネクタ説明にも「コードや会話から技術ドキュメントを作る」使い方が挙がっています。

このリポジトリの docker-compose.yml と services/ 配下を読んで、
サービス間の依存関係をEraserの構成図にしてください。
読み取れなかった接続は図に入れず、最後に一覧で報告してください。

最後の一文が実務では重要です。図は推測で補うと見栄えが整う反面、実在しない接続が混ざります。「読み取れた根拠のあるものだけ」と条件を付けると、レビューしやすくなります。

書き出しと文書化

作った図は export_diagram でPNG・JPEG・draw.ioに書き出せます。draw.ioで書き出したファイルは、Eraserを使わない相手に渡して編集してもらう用途に向きます。ファイル全体のPDF書き出しは、アプリ内の書き出しリンクを返す形になります。

ドキュメント部分は create_document で生成し、update_document で直せます。構成図と設計メモを同じファイルに置けるため、README用の図と説明文を一つのファイルで更新する運用が組めます。

勝手に消されないための権限設定

Eraser MCPには、図の削除(delete_diagram)、ファイルのアーカイブ(delete_file)、ドキュメントの消去(delete_document)、共有設定の変更を含む update_file があります。対話で使うならClaude Codeが承認を求めるので足りますが、自動実行や長いセッションでは念のため絞っておくと安心です。

Claude Codeの権限ルールは、MCPツールを mcp__<サーバー名>__<ツール名> の形で指定できます。次は、削除系を拒否する設定の一例です。

{
  "permissions": {
    "deny": [
      "mcp__eraser__delete_diagram",
      "mcp__eraser__delete_document",
      "mcp__eraser__delete_file",
      "mcp__eraser__delete_folder"
    ]
  }
}

サーバー名の eraser は、claude mcp add で付けた名前です。別の名前で追加したなら、その名前に読み替えます。ツール名を一つずつ書く代わりに、サーバー名のみを指定する mcp__eraser で全ツールを対象にするルールも書けますが、拒否に使うと更新系まで止まります。

CLAUDE.mdに運用ルールを書く

権限で止めるのは「やってはいけない操作」です。「どう描くか」は CLAUDE.md に書いておくと、毎回の依頼文が短くなります。次は規約の一例です。

## 図の描き方(Eraser)
- 構成図は新規ファイルを作らず、「システム構成」ファイルの該当の図を更新する
- 図のラベルはサービス名を英語、補足を日本語にする
- コードから読み取れない接続は描かず、報告に回す
- 削除系のツールは使わない。消したいときは理由を添えて確認する

「新規ファイルを作らない」と明示しておくと、同じ構成図の複製が増えにくくなります。

ツールの一覧と使い分け

リモートサーバーが提供するツールは、対象ごとに分かれています。権限ルールを書くときや、Claudeに「この操作だけ使って」と指示するときの手がかりになります。

対象	読む・探す	作る・直す(AI)	作る・直す(手動)	消す
図	読む・探す`list_diagrams` / `get_diagram`	作る・直す(AI)`create_diagram` / `update_diagram`	作る・直す(手動)`manually_create_diagram` / `manually_update_diagram`	消す`delete_diagram`
ドキュメント	読む・探す`get_document`	作る・直す(AI)`create_document` / `update_document`	作る・直す(手動)`manually_create_document` / `manually_update_document`	消す`delete_document`
ファイル	読む・探す`list_files` / `get_file`	作る・直す(AI)`update_file`(テンプレートから埋める場合)	作る・直す(手動)`create_file` / `manually_update_file`	消す`delete_file`(アーカイブ)
フォルダ	読む・探す`list_folders` / `get_folder`	作る・直す(AI)なし	作る・直す(手動)`create_folder` / `update_folder`	消す`delete_folder`(空のみ)

検索と書き出しには、search(ファイル内容・ファイル名・図の検索)、export_diagram(PNG・JPEG・draw.io)、export_document(Markdown)、export_file(PDF用のリンク)があります。アカウント関係は get_me、list_teams、select_team の三つです。

delete_folder は空のフォルダしか消せず、delete_file は消去ではなくアーカイブです。それでも、図の削除やドキュメントの消去は元に戻せるとは書かれていないため、拒否ルールの対象に入れておく価値があります。

Claude側のコネクタ説明ページでは、ツールが get / list / search / generate / generateEdit / create / update / delete / export / selectTeam の10種にまとめて表示されます。Eraserの資料にある個別ツール名とは粒度が違うので、権限ルールを書くときは、Claude Codeで /mcp から見えるツール名を基準にします。

複数チームに所属しているとき

Eraserは所属チームごとにワークスペースが分かれます。get_me で現在のユーザーとチームを確認し、list_teams で一覧を出し、select_team で作業先を切り替える流れです。会話の最初に「どのチームに作るか」を指定しておくと、別チームの空間に図を作る誤りを防げます。

プリセットで図の文体を揃える

生成される図は、依頼のたびに用語や粒度が揺れがちです。Eraser MCPにはプリセット管理のツールがあり、生成の「ルール」「テンプレート」「参照」をまとめて持てます。

プリセットには次のものが含まれます。

ルール: 図に使う用語や書き方の約束事。update_rules で追加・編集・削除する
テンプレート: 生成の雛形になるファイル。create_template_or_reference で作り、プリセットに付ける
参照: 生成時に参考にさせるファイル。テンプレートと同じツールで扱う
既定のプリセット: update_preset で「既定」にできる

テンプレートや参照は publish_template_or_reference で新しい版を公開する仕組みです。たとえば「サービス名は社内の正式名称で書く」「データストアは円柱で描く」といった約束をルールに入れておけば、誰がClaudeに頼んでも似た見た目に収まります。ただし、ルールがどの程度厳密に守られるかについては、資料に記載がありません。最初の数枚は、生成結果を目で確かめてからルールを調整します。

図のレビューを会話で回す

構成図は、描いた直後より、半年後に実態とずれたときに価値が分かれます。会話で更新できるEraser MCPは、この「ずれの修正」に向いています。

Claude Codeでの流れを例にすると、次のようになります。

手順

構成図を実装に追従させる流れ

1
現在の図を読ませる
get_diagram で図のコードを取得させ、どのサービスと接続が描かれているかを一覧にさせます。
2
コードの実態と突き合わせる
リポジトリの設定ファイルを読ませ、図にあって実装にない接続、実装にあって図にない接続を分けて報告させます。
3
差分だけを更新させる
報告のうち承認したものだけを、update_diagram で反映させます。
4
書き出して共有する
export_diagram でPNGにして、ドキュメントやプルリクエストの説明に添えます。

二段目の「分けて報告させる」を挟むのが要点です。いきなり更新を頼むと、Claudeが見た範囲の差分が一度に反映され、どこを承認したのか分かりにくくなります。

つまずきやすい点

無料で使えるが、AI生成はクレジットを使う

Eraser MCPの利用自体は無料で、アプリ内利用と同じ無料枠の上限が適用されます。ただし、AIによる生成を伴う呼び出しはAIクレジットを消費します。manually_ 系なら生成のAIは使いません。

作った図は非公開が既定

OAuthで作ったファイルは作成者個人のもので、既定では非公開です。APIキーの場合はチーム帰属になります。どちらも、アクセス権とリンク共有の設定は後からEraserアプリか update_file で変えられます。他の人に見せたい図を作らせたら、共有設定を確認してください。

ローカル版のMCPサーバーもある

npmの @eraserlabs/eraser-mcp を使うローカル版もあり、APIキー認証で動きます。ツールの数はリモート版より少なめです。

claude mcp add eraser --env ERASER_API_KEY=your_api_key -- npx -y @eraserlabs/eraser-mcp

OAuthに対応していない環境やパイプラインで使う場合の選択肢です。個人の対話利用なら、インストール不要のリモート版が勧められています。

CIから使う

GitHub ActionsのステップでClaude CodeにEraserを渡す例も、資料にあります。キーはシークレットに入れて参照します。

- name: Add Eraser MCP server
  run: |
    claude mcp add --transport http eraser https://app.eraser.io/api/mcp \
      --header "Authorization: Bearer ${{ secrets.ERASER_API_KEY }}"

ほかの図解系コネクタとの違い

ボード上に付箋や図形を並べる使い方なら、Claude Miro連携が近い選択肢です。Miroは共同作業のボードが中心で、Eraserは「コードで表現される図」と「ドキュメント」を一つのファイルに持つ点が違います。構成図をコードと一緒に育てるなら、Eraser側が向きます。

CMSのように、データ構造の配備まで会話で扱う例はClaude Sanity連携にあります。権限を先に絞ってから任せる考え方は、そちらの記事とも共通です。

まとめ

Eraser MCPは、構成図を「描く」だけでなく、読み取って直し、書き出すところまでをClaudeの会話に取り込みます。個人利用ならOAuthのリモート版を claude mcp add で入れるのが最短です。

続けて使うなら、削除系ツールの拒否ルールと、図の更新先を決める CLAUDE.md の一節を最初に入れておくと、図が増殖したり消えたりする事故を避けやすくなります。

ClaudeとEraserを連携してシステム構成図を生成・更新する

Eraser MCPで何ができるか

「生成」と「手動」の二系統がある

接続する手順

Claude.aiの場合

Claude Codeの場合

認証方式は二つ

構成図を生成してから更新するまで

既存の図を直す

コードベースから描かせる

書き出しと文書化

勝手に消されないための権限設定

CLAUDE.mdに運用ルールを書く

ツールの一覧と使い分け

複数チームに所属しているとき

プリセットで図の文体を揃える

図のレビューを会話で回す

つまずきやすい点

無料で使えるが、AI生成はクレジットを使う

作った図は非公開が既定

ローカル版のMCPサーバーもある

CIから使う

ほかの図解系コネクタとの違い

まとめ

Claude(クロード)とは — できること・モデル・料金・無料でどこまで使えるか

ClaudeとSanityを連携する方法 — スキーマ配備からドラフト管理までMCPで扱う

Databricks MCPサーバーでClaudeからSQLとUnity Catalogを操作する

BigQueryをClaudeで自然言語のまま分析する — 接続からレポート作成までの手順

ClaudeとWolfram MCPで計算を正確に — 接続手順と使い分け

ClaudeとMintlifyを連携する方法 — 古いドキュメントを検索して修正する

Eraser MCPで何ができるか

「生成」と「手動」の二系統がある

接続する手順

Claude.aiの場合

Claude Codeの場合

認証方式は二つ

構成図を生成してから更新するまで

既存の図を直す

コードベースから描かせる

書き出しと文書化

勝手に消されないための権限設定

CLAUDE.mdに運用ルールを書く

ツールの一覧と使い分け

複数チームに所属しているとき

プリセットで図の文体を揃える

図のレビューを会話で回す

つまずきやすい点

無料で使えるが、AI生成はクレジットを使う

作った図は非公開が既定

ローカル版のMCPサーバーもある

CIから使う

ほかの図解系コネクタとの違い

まとめ

関連する記事

Claude(クロード)とは — できること・モデル・料金・無料でどこまで使えるか

ClaudeとSanityを連携する方法 — スキーマ配備からドラフト管理までMCPで扱う

Databricks MCPサーバーでClaudeからSQLとUnity Catalogを操作する

BigQueryをClaudeで自然言語のまま分析する — 接続からレポート作成までの手順

ClaudeとWolfram MCPで計算を正確に — 接続手順と使い分け

ClaudeとMintlifyを連携する方法 — 古いドキュメントを検索して修正する