面向开发者的 AI 原生画图工作流

用 Cursor 和 Claude 生成可编辑图表

通过 MCP 将 AI 编程助手连接到 CodePic。描述一个架构、ER 图、流程图、线框图、CI/CD 流水线或数据管道，生成后直接在可视化编辑器里继续调整。

创建 API 密钥查看 GitHub 示例

CodePic MCP 能做什么

把自然语言提示词转换成可编辑的手绘风格图表，而不是静态截图或一次性的 Mermaid 片段。

通过远程 Streamable HTTP 端点接入 Cursor、Claude Desktop 和其他 MCP 客户端。

生成结果仍然保留在 CodePic 编辑器里，可导出 PNG 和 JSON，方便分享、写文档和后续继续修改。

MCP 示例提示词

这些示例可以直接用于测试工作流、写社区帖子，或整理到 GitHub examples 仓库。

系统架构图

用一段技术栈描述生成清晰的 SaaS 系统架构图。

"Draw a system architecture diagram for a Next.js SaaS app with Supabase auth, Postgres, Cloudflare R2 storage, Stripe billing, and Vercel deployment."

数据库 ER 图

把产品领域对象转换成实体、关系和第一版数据库模型。

"Create an ER diagram for a SaaS billing system with users, teams, subscriptions, invoices, payments, and products."

OAuth 时序流程

把 API 和鉴权行为解释成团队可以继续编辑的时序图。

"Draw a sequence diagram for OAuth login with PKCE between browser, app server, identity provider, and database."

CI/CD 流水线

记录部署步骤、检查、预览环境和生产发布流程。

"Create a CI/CD pipeline diagram for GitHub Actions deploying a Next.js app to Vercel with type-check, lint, build, preview deployment, and production deployment."

数据管道图

梳理数据采集、转换、数仓和看板输出链路。

"Draw a data pipeline from Segment to Snowflake to dbt to Metabase, with batch jobs, transformation layer, and dashboard output."

Step 1

1. 获取 API 密钥

前往 API 密钥管理

Step 2

2. 配置你的 AI 客户端

在 AI 客户端设置中添加 CodePic 作为 MCP 服务器。

Step 3

3. 开始创建

让你的 AI 创建图表 — 它会自动调用 CodePic。

MCP 端点

https://codepic.cc/api/mcp/mcp

Cursor 配置

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

将 cpk_your_api_key_here 替换为你的实际 API 密钥

Claude Desktop 配置

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

将 cpk_your_api_key_here 替换为你的实际 API 密钥

可用工具

list_templates

列出所有可用的图表模板

create_from_template

从模板创建图表

create_diagram

通过指定节点和连线创建自定义图表

get_diagram

通过文档 ID 获取当前图表结构

update_diagram

更新已有的图表

示例提示词

"画一个登录流程：输入凭证 → 验证 → 成功或失败"

"创建一个电商数据库的 ER 图"

"用系统设计模板创建一个微服务架构图"

"在我上一个图中添加一个支付服务节点"

完整使用指南

把 MCP 用到具体图表工具里

MCP 可以创建多种图表，但具体工具页能帮助用户和搜索引擎理解每个场景。

MCP 常见问题

CodePic MCP 可以在 Cursor 里用吗？

可以。把远程 MCP 端点和 CodePic API 密钥添加到 Cursor 配置后，就可以让 Cursor 用自然语言创建或更新图表。

可以在 Claude Desktop 里用吗？

可以。Claude Desktop 支持 Streamable HTTP MCP 服务，把 CodePic 端点和 Authorization header 加到 Claude Desktop 配置即可。

AI 生成后还能手动编辑吗？

可以。生成的图会在 CodePic 中打开，你可以移动图形、修改文字、调整连接线，并继续用可视化方式迭代。

可以导出 SVG 吗？

目前不支持。CodePic 现在支持导出 PNG 和 JSON。JSON 可以保留图表可编辑性，方便以后导入和继续修改。