Codepic

CodePic MCP

让你的 AI 编码 Agent 绘制可编辑的图表，而不是又一段需要手动粘贴的 Mermaid 代码。

通过 Cursor、Claude Desktop 和其他 MCP 客户端生成可编辑的手绘图表。

CodePic MCP 可让 AI 编码 Agent 直接在 CodePic 中创建图表，而不是返回静态图片、Mermaid 代码片段或需要手动粘贴的 JSON。生成的图表会在 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

使用一条命令添加：

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

Claude Desktop

将 CodePic 添加到 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）

将 CodePic 添加到 .vscode/mcp.json：

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

Codex CLI

将 CodePic 添加到 ~/.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

将 CodePic 添加到 ~/.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 设置（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 Agent 在修改前先检查它，请使用 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 登录时序图	浏览器、应用服务器、身份提供方、数据库
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.