用 Cursor 和 MCP 生成可编辑架构图

AI 编程助手已经很擅长用文字解释架构，但文字并不总是够用。团队评审系统设计、给新人讲项目结构、写技术文档时，很多时候需要一张能快速扫懂的图。

过去的 AI 画图流程很别扭：让 AI 写 Mermaid，复制到别的工具里，修布局，再把有用的部分搬到真正的图表编辑器。MCP 改变的是这一步——Cursor 可以直接调用 CodePic，把图表生成到一个可编辑的画布里。

这篇文章讲一个实际工作流：把 Cursor 连接到 CodePic MCP，用提示词生成系统架构图，然后继续在可视化编辑器里调整。

你需要准备什么

开始前需要：

一个 CodePic 账号
一个 CodePic API 密钥
支持 MCP 的 Cursor
CodePic MCP 端点：https://codepic.cc/api/mcp/mcp

如果需要完整配置说明，可以先看 CodePic MCP 设置页。

第一步：把 CodePic MCP 加到 Cursor

在项目根目录创建 .cursor/mcp.json：

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

把 cpk_your_api_key_here 替换成真实 API 密钥。

保存后重启 Cursor，或者刷新 MCP server 列表。之后 Cursor 就可以在聊天里调用 CodePic 工具。

第二步：用具体提示词描述架构图

图表质量很大程度取决于提示词。不要只说「画一个系统图」。你需要告诉 Cursor 技术栈、主要组件和关键关系。

可以试这个：

Draw a system architecture diagram for a Next.js SaaS app with:

- Frontend: Next.js app deployed on Vercel
- Auth: Supabase Auth
- Database: Postgres
- File storage: Cloudflare R2
- Billing: Stripe Checkout and Stripe webhooks
- Background jobs: queue worker for async email and billing sync

Show request flow from browser to app, database reads/writes, file upload flow,
and Stripe webhook callbacks.

这个提示词给了 AI 足够结构：图表类型、组件列表、关键箭头都明确了，所以更容易生成可用的第一版。

第三步：检查生成结果

Cursor 调用 CodePic MCP 后，会返回一个可编辑图表链接。打开后检查：

主要组件是否都出现了？
箭头方向是否正确？
外部服务是否和应用内部模块区分开？
webhook、后台任务等异步流程是否清楚？
不解释也能看懂大概结构吗？

不要期待第一版就是最终版。CodePic MCP 的价值在于结果仍然可编辑，所以后续可以继续迭代。

第四步：用后续提示词继续调整

图生成后，不要让 Cursor 「重新画一遍」。更好的方式是给具体修改指令。

好的后续提示词：

Move Stripe and Cloudflare R2 into an External Services section.

Add a webhook arrow from Stripe to the Next.js API route, then to Postgres.

Rename "queue worker" to "Background Worker" and place it below the app server.

Add a note explaining that file metadata is stored in Postgres while binary files are stored in R2.

这些指令很具体，比「优化一下这张图」安全得多。

第五步：导出或分享

图表完成后，可以导出 PNG 放到文档、README、PR 描述或设计说明里。如果你需要保留可编辑性，可以导出 JSON，以后再导入 CodePic 继续修改。

CodePic 目前不支持导出 SVG。如果你的流程强依赖矢量图，需要先记住这个限制。

可以尝试的提示词

SaaS 计费架构

Create a system architecture diagram for SaaS billing with users, teams,
Stripe subscriptions, invoices, webhooks, and a background sync worker.

数据库 ER 图

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

如果你想直接在内嵌编辑器里开始，可以使用 ER 图工具。

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.

流程类图表也可以直接用流程图工具作为起点。

什么时候适合用这个工作流

CodePic MCP 最适合这类图：

技术内容足够复杂，手动画图很烦
组件和关系能被清楚描述
仍处在讨论阶段，手绘风格草图比精致成品更有用

所以它适合架构评审、ER 图、入职文档、技术方案和 PR 说明。

更多提示词示例可以看 CodePic MCP examples 仓库。