用 AI 画图，终于不用复制粘贴了
之前如果你想用 AI 辅助画图，流程大概是这样的：让 AI 生成一段 JSON，复制过来，粘贴到 CodePic，调整格式，然后祈祷别出错。说实话，体验算不上好。
今天我们上线了 CodePic MCP 服务，彻底改变了这个流程。
现在你可以直接在 Cursor、Claude Desktop 这些 AI 工具里说一句「画一个登录流程图」，AI 就会自动调用 CodePic 帮你创建好，返回一个可以直接编辑的链接。整个过程不需要你切换窗口、不需要复制任何东西。
什么是 MCP？
MCP（Model Context Protocol）是一个让 AI 调用外部工具的标准协议。简单来说，它让 AI 不只是输出文字，还能「动手干活」。
CodePic 实现了 MCP 服务端，意味着任何支持 MCP 的 AI 客户端都可以连接过来，用我们提供的工具来创建和编辑图表。
能做什么？
当前服务提供图形发现与文档、模板列表、模板创建、自定义创建、文档读取和更新。描述自定义图时用 create_diagram，只有明确要模板时才使用模板工具。
- list_templates — 查看所有可用的图表模板（流程图、ER 图、系统架构图、看板等 80+ 种）
- create_from_template — 直接从模板创建一个新图表
- create_diagram — 完全自定义，指定节点和连线来画图
- update_diagram — 修改已有的图表，比如加个节点、改个名字
用自然语言就能驱动这些操作。比如你可以说：
「帮我画一个微服务架构图，包含用户服务、订单服务、支付服务和消息队列」
AI 应按你描述的内容创建自定义图；只有你明确要求模板时才套用模板，完成后返回编辑链接供检查。
三步接入
第一步：拿到 API 密钥
登录 CodePic，进入 Dashboard，在 API 密钥管理页面创建一个 key。密钥以 cpk_ 开头。
第二步：配置你的 AI 客户端
Cursor 用户
在项目根目录创建 .cursor/mcp.json，写入：
{
"mcpServers": {
"codepic": {
"url": "https://codepic.cc/api/mcp/mcp",
"headers": {
"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"
}
}
}
}
把 cpk_your_api_key_here 换成你自己的密钥就行。
第三步：开始用
配置完成后，直接在 AI 对话里描述你想要的图表。几个可以试试的提示词：
- 「画一个用户登录流程：输入凭证 → 验证 → 成功或失败」
- 「创建一个电商数据库的 ER 图」
- 「用系统设计模板画一个微服务架构图」
- 「在我上一个图里加一个支付服务节点」
AI 会返回一个链接，点开就能在 CodePic 编辑器里继续调整。
和 JSON Import 有什么区别？
之前我们提供的 JSON Import 功能需要你手动复制 AI 生成的 JSON 然后粘贴进来。MCP 把这个过程完全自动化了——AI 直接跟 CodePic 通信，你只管描述需求就好。
当然，JSON Import 仍然可用。如果你的 AI 工具暂时不支持 MCP，或者你更喜欢手动控制，它依然是个好选择。
试试看
MCP 服务现在已经对所有 CodePic 用户开放。去 MCP 使用指南 页面了解更多细节，或者直接动手配置，让 AI 帮你画第一张图。
有问题或反馈？随时通过页面右下角的联系按钮告诉我们。
常见问题
CodePic MCP 连接什么？
它向兼容 AI 客户端开放图表工具，使客户端在必要认证下创建、读取和修改可编辑文档。
如何确认连接成功？
确认客户端发现服务工具，再测试获准文档操作并查看返回的文档；保存配置本身不等于连接成功。
发布文章可以代替当前配置文档吗？
配置细节以当前 MCP 工具页为准，公告发布后客户端设置和工具能力可能变化。
