AI-native diagramming for developers

Generate editable diagrams from Cursor and Claude

Connect your AI coding agent to CodePic through MCP. Describe an architecture, ER diagram, flowchart, wireframe, CI/CD pipeline, or data pipeline, then open the result in a visual editor and keep refining it.

Create API key View GitHub examples

What CodePic MCP does

Turns natural-language prompts into editable hand-drawn diagrams instead of static screenshots or one-off Mermaid snippets.

Works from Cursor, Claude Desktop, and other MCP clients through a remote Streamable HTTP endpoint.

Keeps the result editable in CodePic, with PNG and JSON export for sharing, docs, and follow-up edits.

MCP demo prompts

Use these examples to test the workflow, write community posts, or build a GitHub examples repo.

System architecture

Generate a readable SaaS architecture diagram from a short stack description.

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

Database ER diagram

Turn a product domain into entities, relationships, and a first-pass database model.

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

OAuth sequence flow

Explain API and auth behavior as a sequence diagram that your team can edit.

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

CI/CD pipeline

Document deployment steps, checks, preview environments, and production release flow.

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

Data pipeline

Map analytics ingestion, transformation, warehouse, and dashboard outputs.

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

Step 1

1. Get an API Key

Go to API Keys

Step 2

2. Configure your AI client

Add CodePic as an MCP server in your AI client settings.

Step 3

3. Start creating

Ask your AI to create diagrams — it will call CodePic automatically.

MCP Endpoint

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

Cursor configuration

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

Replace cpk_your_api_key_here with your actual API key

Claude Desktop configuration

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

Replace cpk_your_api_key_here with your actual API key

Available tools

list_templates

List all available diagram templates

create_from_template

Create a diagram from a template

create_diagram

Create a custom diagram with nodes and edges

get_diagram

Fetch the current document structure by document ID

update_diagram

Update an existing diagram

Example prompts

"Draw a login flow: enter credentials → validate → success or error"

"Create an ER diagram for an e-commerce database"

"Use the system design template to create a microservices architecture"

"Add a payment service node to my last diagram"

Full usage guide

Use MCP with focused diagram tools

The MCP server can create many diagram types, but focused tool pages help users and search engines understand the exact use cases.

Flowchart maker

Generate product flows, decision trees, and process diagrams from AI prompts.

ER diagram maker

Create database diagrams for SaaS products, billing systems, and application schemas.

Wireframe tool

Draft low-fidelity app and website layouts before moving into high-fidelity design.

MCP questions

Does CodePic MCP work with Cursor?

Yes. Add the remote MCP endpoint to Cursor with your CodePic API key, then ask Cursor to create or update diagrams from natural language.

Does it work with Claude Desktop?

Yes. Claude Desktop supports Streamable HTTP MCP servers. Add the CodePic endpoint and Authorization header to your Claude Desktop configuration.

Can I edit the diagram after AI generates it?

Yes. The generated diagram opens in CodePic, where you can move shapes, edit labels, adjust connectors, and keep iterating visually.

Can I export SVG?

Not currently. CodePic supports PNG and JSON export today. JSON keeps the diagram editable for future imports and updates.