Codepic

CodePic MCP

Let your AI coding agent draw editable hand-drawn diagrams — not another Mermaid snippet you have to paste.

CodePic MCP lets an AI agent (Cursor, Claude, VS Code Copilot, Codex, Windsurf, Cline, and other MCP clients) create diagrams directly in CodePic instead of returning static images, Mermaid text, or JSON you paste manually. The result opens in the CodePic editor, where you can move shapes, edit labels, adjust connectors, share a read-only link, and export PNG or JSON.

Available tools

• list_templates — list available diagram templates (flowchart, ER, system architecture, kanban, and 30+ more)
• create_from_template — create a new diagram from a template
• create_diagram — create a custom diagram with nodes and edges
• get_diagram — fetch an existing diagram's structure before making targeted edits
• update_diagram — add, remove, or replace nodes and edges on an existing diagram

Setup

Remote Streamable HTTP server — no local install. First create a free API key (the cpk_... token) at https://codepic.cc/settings/api-keys, then add the config for your client and replace 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 — one command:

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

{
  "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

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

Codex CLI — ~/.codex/config.toml

[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

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

Cline — cline_mcp_settings.json

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

Any other client that supports remote Streamable HTTP works — point it at https://codepic.cc/api/mcp/mcp with header Authorization: Bearer cpk_....

Links

• Website: https://codepic.cc
• MCP docs: https://codepic.cc/tools/mcp
• GitHub & examples: https://github.com/abelce/codepic-mcp