sysketch

sysketch-mcp

sysketch を使って、Claude、Cursor などの AI アシスタントが、見やすく手描き風のシステム設計図を描けるようにします。アシスタントは画像そのものを描く代わりに、システムの短い説明を書きます。そのため、図をより速く、低コストで、一貫性を保ちながら作成できます。

セットアップ

Node.js 20 以降が必要です。

Claude Code： ターミナルで一度だけ実行します。

claude mcp add sysketch -- npx -y sysketch-mcp

Claude Desktop、Cursor、その他のアシスタント： アシスタントの MCP 設定にこれを追加してから、再起動します。

{
  "mcpServers": {
    "sysketch": { "command": "npx", "args": ["-y", "sysketch-mcp"] }
  }
}

図は、アシスタントがサーバーを実行するフォルダー（Claude Code と Cursor ではプロジェクト内）に保存されます。Claude Desktop はプロジェクト外でサーバーを起動するため、図はホームフォルダー内の sysketch フォルダーに保存されます。保存先のフォルダーを指定するには、args に "--dir", "/path/to/folder" を追加するか、SYSKETCH_DIR 環境変数を設定します。

ChatGPT、ウェブ版 Claude、Perplexity、その他の AI チャット： このパッケージは必要ありません。カスタムコネクターとして https://sysketch.vercel.app/mcp を追加してください（詳細）。

使い方

たとえば、アシスタントに次のように依頼します。

sysketchを使って、ライドシェアシステムをPNGで描いてください。

図は説明とともに、そのフォルダー内の diagrams/ に保存されるため、「通知サービスを追加して」「ブループリントテーマを使って」のように、後から変更を依頼できます。会話に返されるのは1行の要約だけで、画像データは返されません。

Claude Code（Sonnet）で5件のシステム設計リクエストを測定した結果、sysketchを使った場合は4,352出力トークン、アシスタントがSVGを自分で描いた場合は77,518トークンで、約18分の1でした（ベンチマーク）。

ツール

ツール	機能
render_diagram	説明（spec）またはファイル（file）から、任意の theme を使って .svg または .png の図を描きます。preview: true を指定すると、アシスタントに画像を返します（デフォルトでは無効です）。
list_icons	アイコンと認識される名前を一覧表示します。logos を指定すると、インストール済みの公式ロゴを検索します。

ツール定義により、各セッションに約450トークンが追加されます。

公式ロゴ（任意）

公式ロゴをインストールすると、s3 や stripe などの製品名に実際のロゴが表示されます。ロゴガイドを参照してください。

その他の例、テーマ、仕様の全文については、github.com/Tonys-Coding/sysketch をご覧ください。

MITライセンス。