ClaudeとWhimsicalを連携する方法 — 図の生成と編集を会話で

WhimsicalのConnectorをClaudeにつなぐと、会話の指示からフローチャートやマインドマップ、ワイヤーフレームがWhimsicalのワークスペースに作られます。既存のファイルを検索して要約させることもできます。接続はOAuthで、Claudeのディレクトリから数クリックで終わります。

注意点は2つあります。ディレクトリに載るツール名と、提供元のヘルプに出てくるツール名が一致しません。また、ツール一覧には作成だけでなく編集も含まれます。この記事では接続手順に続けて、この2点と権限の絞り方を説明します。

Whimsical Connectorとは — 提供元・接続先・認証方式

Whimsical Connectorは、Whimsicalが提供するリモートMCPサーバーです。ClaudeのConnectorsディレクトリには「Anthropic verified」付きで載っています。ディレクトリの表示は次のとおりです。

接続先のURLは https://mcp.whimsical.com/mcp です。認証はWhimsicalアカウントでのOAuthで、必要なのはWhimsicalのアカウントだけです。APIキーを発行する手順は書かれていません。

このリモートMCPは、ほとんどの人に向く方式です。インストールは不要で、リモートMCPに対応するAIアシスタントならどこでも動きます。ChatGPT、Cursor、Grokなど、Claude以外のクライアントでも同じURLを使います。

もう1つ、デスクトップ版MCPがあります。Whimsicalのデスクトップアプリ経由で動き、Claude Codeなどのコーディングエージェントに手元のファイルやコードへのアクセスを与える用途向けです。アプリを開いたままにする必要があり、設定は提供元のサポートに問い合わせる形です。この記事が扱うのはリモート版だけです。

何を任せられるか — 用途と例文

用途は次の5つです。

• 複雑なプロセスをWhimsicalのボードに可視化する
• SOP(標準作業手順)をフローチャートに起こす
• プロンプトやコードからワイヤーフレームを作る
• Whimsicalのワイヤーフレームから動くプロトタイプのコードを書く
• 上記に近い作業全般

例文は3種類に分かれます。

作る場合はWhimsical側に新しいファイルが残ります。会話のなかの画像で終わるのではなく、あとからWhimsicalで手を入れられる点が、図を直接描かせる使い方との違いです。

claude.aiで接続する手順

Claudeでの接続は次の流れです。

ディレクトリは、Claudeの画面で「Connectors」から「Manage connectors」を選ぶか、設定のCustomizeからConnectorsを開きます。カテゴリ別の一覧で探せます。

Team・Enterpriseプランでは先に管理者の作業が要ります。OwnerまたはPrimary Ownerが、Organization settingsのConnectorsから「Browse connectors」でWhimsicalを選び、「Add to your team」で組織に追加します。追加しただけでは各メンバーのアクセスは付かず、メンバーが個別に認証する流れです。

Whimsical側のプラン条件、たとえば無料プランでMCPが使えるかどうかは、WhimsicalのリモートMCPヘルプにもディレクトリ掲載ページにも、プラン条件の記載はありません。接続前に自分のワークスペースのプランをWhimsicalの管理画面で確かめるのが確実です。

Claude Codeから接続する

Claude Codeからは、リモートHTTPサーバーとして追加します。名前は、提供元のヘルプが他クライアント向けに示す whimsical-remote に合わせると、あとで混乱しません。

claude mcp add --transport http whimsical-remote \
  https://mcp.whimsical.com/mcp

追加したあと、Claude Codeのセッションで /mcp を開き、Whimsicalの認証を完了させます。OAuthが必要なリモートサーバーは /mcp から認証します。

/mcp

--scope を付けなければ、追加先はローカルスコープです。チームで共有したいときは --scope project にするか、プロジェクト直下の .mcp.json に書きます。ただし、図の生成はWhimsicalのアカウントに紐づく操作です。共有する設定にはURLだけが入り、認証は各自が行います。

Claude Codeのような開発系クライアントには、上のデスクトップ版MCPも向きます。リモート版で足りるか、手元のコードを直接読ませたいのかで選びます。

ツール名の食い違い — ディレクトリとヘルプの比較

ディレクトリの掲載ページには、次の11個のツールが並んでいます。

一方、提供元のヘルプは接続確認の例で「create_diagram、search_files などの一覧が返る」と書いています。この2つの名前は、ディレクトリの一覧に載っていません。ディレクトリ側は generate_diagram と search です。

ヘルプと掲載ページのどちらが現行の名前かは、書かれていません。ツール名は更新で変わりうるので、手元で次の順に確かめるのが安全です。

なお、ツール名から挙動を推測するのは避けます。たとえば edit が既存の図のどこまでを書き換えるか、doc_create がどんなファイルを作るかは、ヘルプにも掲載ページにも挙動の説明はありません。最初は試用用のボードで確かめると安全です。

権限の絞り方 — 書き込み系を確認制にする

コネクタは接続先サービスの権限を引き継ぎます。Whimsicalで見えないファイルは、Claudeからも見えません。逆に、見えるファイルには検索・参照に加えて、create や edit で書き込めます。

Claude Codeでは、ツール名を指定した許可ルールで制御できます。MCPツールの指定は mcp__<サーバー名>__<ツール名> の形です。サーバー名は先ほど付けた whimsical-remote を使います。次はあくまで例で、ツール名は手元の表示に合わせて直します。

{
  "permissions": {
    "ask": [
      "mcp__whimsical-remote__edit"
    ]
  }
}

こうしておくと、既存の図を書き換える操作の前に確認が入ります。新しいファイルを作る操作は通したまま、既存ファイルの変更だけを人が見る運用です。サーバー全体を止めたいときは、mcp__whimsical-remote__* をdenyに入れます。

指示の書き方 — 作る前に決めておくこと

Whimsicalのヘルプの例文は短い一文です。実務で使うときは、図の種類を指定すると結果が安定します。次はヘルプの例文を拡張した書き方の一例です。

Whimsicalで、ログイン後に通知を送るかどうかを決める処理の
フローチャートを新しいファイルとして作って。
分岐の条件は、ユーザーの通知設定・配信時間帯・直近の送信回数。
作ったらファイルへのリンクを教えて。

ポイントは3つです。

• 図の種類(フローチャート、シーケンス図、マインドマップ、ワイヤーフレーム)を名指しする
• 新規作成か、既存ファイルの編集かを明示する
• 既存ファイルを触らせたくないときは「編集はしない」と書く

ヘルプの例の「先月作ったシステム構成図を探して」のように、検索と作成を分けて頼むのも有効です。探す段階では何も書き換わらないので、結果を見てから作成や編集に進めます。

つまずいたときの切り分け

接続がうまくいかないときは、上から順に確かめます。

このURLはMCPクライアントから使うもので、通常のGETではHTTP 405が返ります。疎通の確認はClaude側のツール一覧で行います。

似た図の連携との使い分け

図をClaudeから作る連携は他にもあります。LucidchartならClaude Lucid連携の記事に接続手順と制限をまとめています。Connector全般の仕組みはConnectorsの入門記事が詳しいです。

Whimsicalで揃うのは、フローチャート、マインドマップ、ワイヤーフレーム、シーケンス図という軽い図です。ディレクトリの説明文も「概念を説明して可視化する」用途を挙げています。すでにLucidなど別の図ツールにドキュメントが溜まっているなら、そちらのConnectorが同じワークスペースを読めます。

よくある質問

AIクレジットは消費されますか?

リモートMCPヘルプとディレクトリ掲載ページには、AIクレジットやプラン別上限の記載はありません。Whimsical側の請求や上限は、Whimsicalの管理画面で確かめてください。

まとめ

接続自体は、ディレクトリのConnect、Whimsicalのサインイン、ツール一覧の確認の3段階で終わります。差が出るのは、そのあとの運用です。ツール名がページごとに食い違うため、権限ルールには手元で見えた名前を使います。書き込みを伴う edit は確認制にしておくと、既存の図を誤って書き換えにくくなります。まず新規作成と検索だけを試し、編集は試用ボードで挙動を見てから任せる、という順が無難です。