Whimsical MCP Server
Whimsical MCPサーバーでClaude連携・ダイアグラム作成を自動化
node /path/to/whimsical-mcp-server/dist/index.js概要
Whimsical MCP Serverの設定方法と使い方。
ワイヤーフレーム・ダイアグラムツール「Whimsical」をClaudeから操作できるMCPサーバー。
ClaudeでMermaid記法からWhimsicalのフローチャート・マインドマップ・シーケンス図を自動生成できる。
ClaudeとWhimsicalのMCPサーバー連携により、テキストやコードの説明からビジュアルダイアグラムを即座に作成して共有URLを取得できる。
設定方法はローカルにビルドした後にノードコマンドで実行するだけでシンプルに完結する。
料金・APIキー情報
料金
無料プランありAPIキー
🔓 不要✅このMCPはAPIキー不要です。別途セットアップが必要な場合があります（上記参照）。
こんな使い方ができます
ClaudeがMermaid記法を生成してWhimsicalのダイアグラムとして自動出力できる
システム設計の説明からWhimsicalのアーキテクチャ図をClaudeで作成できる
ユーザーストーリーや要件定義をClaudeでWhimsicalフローチャートに変換できる
生成されたWhimsicalダイアグラムの共有URLをClaudeが即座に提供できる
セットアップ手順
- 1
Node.js 18以上とyarnをインストールする
- 2
git clone https://github.com/BrockReece/whimsical-mcp-server.git を実行してリポジトリをクローンする
- 3
クローンしたディレクトリに移動してyarn install && yarn build を実行する
- 4
claude mcp add whimsical -- node /path/to/whimsical-mcp-server/dist/index.js（パスは実際のパスに変更する）
設定ファイル
コピー前に確認
Node.js 18以上、yarn、GitHubリポジトリのクローンとビルドが必要。Whimsicalアカウント（無料プランで利用可能）。
claude mcp add whimsical -- node /path/to/whimsical-mcp-server/dist/index.js