CodePic MCP Server Is Live: Let AI Draw Your Diagrams

No More Copy-Pasting AI Output

If you've tried using AI to help with diagramming before, you know the drill: ask it to generate some JSON, copy the output, paste it into the editor, fix the formatting, and hope for the best. It works, but it's not exactly smooth.

Today we're launching the CodePic MCP Server, and it changes the entire workflow.

You can now tell your AI — right inside Cursor or Claude Desktop — something like "draw a login flow diagram," and it'll call CodePic directly to create it for you. You get back an edit link, ready to go. No window switching, no clipboard gymnastics.

What's MCP?

MCP (Model Context Protocol) is a standard that lets AI assistants call external tools. Instead of just producing text, the AI can actually take actions — like creating a diagram in CodePic.

CodePic implements an MCP server, which means any MCP-compatible AI client can connect to it and use our diagramming tools programmatically.

What Can It Do?

Once connected, your AI gets access to four tools:

• list_templates — Browse all available diagram templates (flowcharts, ER diagrams, system architecture, kanban, and 30+ more)
• create_from_template — Create a new diagram from any template
• create_diagram — Build a fully custom diagram by specifying nodes and edges
• update_diagram — Modify an existing diagram — add nodes, rename things, restructure

You drive all of this with natural language. For example:

"Create a microservices architecture diagram with user service, order service, payment service, and a message queue"

The AI figures out the right approach, builds the diagram, and hands you an edit link.

Get Started in Three Steps

Step 1: Get an API Key

Log into CodePic, go to your Dashboard, and create an API key. Keys start with cpk_.

Step 2: Configure Your AI Client

Cursor

Create .cursor/mcp.json in your project root:

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

Claude Desktop

Open your claude_desktop_config.json and add:

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

Step 3: Start Creating

With the config in place, just describe what you want in your AI chat. A few prompts to try:

• "Draw a user login flow: enter credentials → validate → success or failure"
• "Create an ER diagram for an e-commerce database"
• "Use the system design template to create a microservices architecture diagram"
• "Add a payment service node to my last diagram"

The AI will return a link — click it and you're in the CodePic editor, ready to tweak.

How Is This Different from JSON Import?

Our existing JSON Import feature requires you to manually copy AI-generated JSON and paste it into CodePic. MCP automates that entirely — the AI talks to CodePic directly, and you just describe what you need.

JSON Import is still available, though. If your AI tool doesn't support MCP yet, or you prefer manual control, it's a solid option.

Try It Out

The MCP server is live for all CodePic users. Head over to the MCP guide for detailed setup instructions, or just jump in and let AI draw your first diagram.

Questions or feedback? Hit the contact button in the bottom-right corner anytime.