Codepic

CodePic MCP

AI コーディングエージェントに編集可能な図を描かせましょう。貼り付ける必要のある Mermaid の断片ではありません。

Cursor、Claude Desktop、その他の MCP クライアントから編集可能な手描き風の図を生成できます。

CodePic MCP を使うと、AI コーディングエージェントは静的画像や Mermaid の断片、手作業で貼り付ける必要のある JSON を返す代わりに、CodePic で直接図を作成できます。生成された図は CodePic エディターで開き、図形の移動、ラベルの編集、コネクターの調整、読み取り専用リンクでの共有、PNG または JSON へのエクスポートを引き続き行えます。

クイックスタート

これはリモートの Streamable HTTP サーバーのため、ローカルへのインストールは不要です。まず https://codepic.cc/settings/api-keys で無料の API キー（cpk_... トークン）を作成し（サインイン → New API key → コピー）、クライアントの設定を追加して cpk_your_api_key_here を置き換えます。

Cursor

プロジェクトに .cursor/mcp.json を作成します。

{
  "mcpServers": {
    "codepic": {
      "url": "https://codepic.cc/api/mcp/mcp",
      "headers": {
        "Authorization": "Bearer cpk_your_api_key_here"
      }
    }
  }
}

Claude Code

次のコマンドを 1 つ実行して追加します。

claude mcp add --transport http codepic https://codepic.cc/api/mcp/mcp \
  --header "Authorization: Bearer cpk_your_api_key_here"

Claude Desktop

claude_desktop_config.json に CodePic を追加します。

{
  "mcpServers": {
    "codepic": {
      "type": "streamableHttp",
      "url": "https://codepic.cc/api/mcp/mcp",
      "headers": {
        "Authorization": "Bearer cpk_your_api_key_here"
      }
    }
  }
}

VS Code（GitHub Copilot）

.vscode/mcp.json に CodePic を追加します。

{
  "servers": {
    "codepic": {
      "type": "http",
      "url": "https://codepic.cc/api/mcp/mcp",
      "headers": {
        "Authorization": "Bearer cpk_your_api_key_here"
      }
    }
  }
}

Codex CLI

~/.codex/config.toml に CodePic を追加します。

[mcp_servers.codepic]
url = "https://codepic.cc/api/mcp/mcp"

[mcp_servers.codepic.headers]
Authorization = "Bearer cpk_your_api_key_here"

Windsurf

~/.codeium/windsurf/mcp_config.json に CodePic を追加します。

{
  "mcpServers": {
    "codepic": {
      "serverUrl": "https://codepic.cc/api/mcp/mcp",
      "headers": {
        "Authorization": "Bearer cpk_your_api_key_here"
      }
    }
  }
}

Cline

Cline の MCP 設定（cline_mcp_settings.json）を開き、次を追加します。

{
  "mcpServers": {
    "codepic": {
      "type": "streamableHttp",
      "url": "https://codepic.cc/api/mcp/mcp",
      "headers": {
        "Authorization": "Bearer cpk_your_api_key_here"
      }
    }
  }
}

その他のクライアント

リモートの Streamable HTTP に対応する MCP クライアントであれば利用できます。エンドポイント https://codepic.cc/api/mcp/mcp を指定し、ヘッダー Authorization: Bearer cpk_... を設定してください。

利用可能な MCP ツール

• list_templates - 利用可能な図のテンプレートを一覧表示します。
• create_from_template - テンプレートから新しい図を作成します。
• create_diagram - ノードとエッジを使ってカスタム図を作成します。
• get_diagram - 対象を絞った編集を続けて行う前に、documentId で現在の図の構造を取得します。
• update_diagram - ノードとエッジの置換、追加、削除によって既存の図を更新します。

既存の図を反復編集する

CodePic のドキュメントがすでにあり、変更前に AI エージェントに内容を確認させたい場合は、get_diagram を使用します。これにより、記憶を頼りに推測するのではなく、現在の図に基づいてワークフローを進められます。

プロンプトの例：

Use get_diagram to inspect document <documentId>, then update the diagram by adding a Redis cache between the API server and Postgres database.

使用例

例	生成されるもの	プロンプト
システムアーキテクチャ	Next.js SaaS アーキテクチャ図	Next.js + Supabase + Postgres + R2 + Stripe + Vercel
データベース ER 図	SaaS の請求データモデル	ユーザー、チーム、サブスクリプション、請求書、支払い
OAuth シーケンスフロー	PKCE ログインシーケンス図	ブラウザー、アプリサーバー、ID プロバイダー、データベース
CI/CD パイプライン	GitHub Actions デプロイパイプライン	型チェック、Lint、ビルド、プレビュー、本番環境
データパイプライン	アナリティクスパイプライン図	Segment、Snowflake、dbt、Metabase
既存の図を反復編集	既存のドキュメントを読み込んでから更新	get_diagram + update_diagram

便利なリンク

• CodePic：https://codepic.cc
• MCP ガイド：https://codepic.cc/tools/mcp
• API キー（取得）：https://codepic.cc/settings/api-keys
• ER 図作成ツール：https://codepic.cc/tools/er-diagram-maker
• フローチャート作成ツール：https://codepic.cc/tools/flowchart-maker
• ワイヤーフレームツール：https://codepic.cc/tools/wireframe-tool

コミュニティ投稿の切り口

このプロジェクトを共有する場合は、ワークフローを中心に紹介してください。

MCP 経由で Cursor を図エディターに接続したところ、Mermaid のテキストではなく、編集可能なアーキテクチャ図を生成できるようになりました。

「最高の図作成ツール」のような一般的な製品紹介は避けてください。開発者コミュニティには、具体的なワークフローと実例のほうが伝わります。

License

MIT — see LICENSE.