MCP.so
Sign In

Codepic

@abelce

Repository

About Codepic

CodePic MCP lets your AI agent (Cursor, Claude Desktop) create editable hand-drawn diagrams directly in CodePic — instead of static images or Mermaid text you paste manually. It returns a link that opens in the editor, where you can move shapes, edit labels, share a read-only lin

#diagram#flowchart#drawing#productivity#developer-tools

Config

Add this server to your MCP-compatible client using the configuration below.

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

Tools

5

list available diagram templates (flowchart, ER, system architecture, kanban, and 30+ more)

create a new diagram from a template

create a custom diagram with nodes and edges

fetch an existing diagram's structure before making targeted edits

add, remove, or replace nodes and edges on an existing diagram

Overview

What is Codepic?

Codepic is an MCP server that lets AI coding agents (Cursor, Claude, VS Code Copilot, Codex, Windsurf, Cline, and other MCP clients) create editable hand‑drawn diagrams directly in CodePic — instead of returning static images, Mermaid text, or JSON to paste manually. The result opens in the CodePic editor, where users can move shapes, edit labels, adjust connectors, share a read‑only link, and export PNG or JSON.

How to use Codepic?

First create a free API key (a cpk_... token) at https://codepic.cc/settings/api-keys. Then configure your MCP client to connect to the remote Streamable HTTP server at https://codepic.cc/api/mcp/mcp with the header Authorization: Bearer cpk_your_api_key_here. Specific configuration examples are provided for Cursor, Claude Code, Claude Desktop, VS Code (GitHub Copilot), Codex CLI, Windsurf, and Cline.

Key features of Codepic

  • List 30+ diagram templates (flowchart, ER, system architecture, kanban, etc.)
  • Create a custom diagram with nodes and edges
  • Fetch an existing diagram’s structure before editing
  • Add, remove, or replace nodes and edges on existing diagrams
  • Diagrams open in an editable CodePic editor
  • Export diagrams as PNG or JSON, and share read‑only links

Use cases of Codepic

  • An AI agent generates a system architecture diagram from code context
  • A developer iteratively refines an architecture diagram by adding or removing components
  • Create a kanban or flowchart from a template to visualize a workflow
  • Fetch an existing diagram to make targeted, incremental edits without rebuilding it

FAQ from Codepic

What do I need to run Codepic MCP?

A free API key from https://codepic.cc/settings/api-keys and an MCP client that supports remote Streamable HTTP servers. No local installation is required.

Which MCP clients are supported?

Cursor, Claude (Desktop and Code), VS Code (GitHub Copilot), Codex CLI, Windsurf, Cline, and any other client that supports remote Streamable HTTP.

How is this different from generating Mermaid code?

Codepic creates editable hand‑drawn diagrams that open directly in the CodePic editor, rather than returning static Mermaid text or images that must be pasted elsewhere.

What can I do with the diagrams?

You can move shapes, edit labels, adjust connectors, share a read‑only link, and export the diagram as PNG or JSON.

Is a local server required?

No — Codepic MCP runs as a remote Streamable HTTP server. You only need to configure your client with the provided URL and API key.

Frequently asked questions

What do I need to run Codepic MCP?

A free API key from https://codepic.cc/settings/api-keys and an MCP client that supports remote Streamable HTTP servers. No local installation is required.

Which MCP clients are supported?

Cursor, Claude (Desktop and Code), VS Code (GitHub Copilot), Codex CLI, Windsurf, Cline, and any other client that supports remote Streamable HTTP.

How is this different from generating Mermaid code?

Codepic creates editable hand‑drawn diagrams that open directly in the CodePic editor, rather than returning static Mermaid text or images that must be pasted elsewhere.

What can I do with the diagrams?

You can move shapes, edit labels, adjust connectors, share a read‑only link, and export the diagram as PNG or JSON.

Is a local server required?

No — Codepic MCP runs as a remote Streamable HTTP server. You only need to configure your client with the provided URL and API key.

Comments

Basic information

Category

AI & Agents

Transports

stdio

Author

abelce

Submitted by

zx tang

More AI & Agents MCP servers

Solon Ai

opensolon

Java AI application development framework (supports LLM-tool,skill; RAG; MCP; Agent-ReAct,Team-Agent). Compatible with java8 ~ java25. It can also be embedded in SpringBoot, jFinal, Vert.x, Quarkus, and other frameworks.

416

MCP Claude Code

SDGLBL

MCP implementation of Claude Code capabilities and more

302

Web Agent Protocol

OTA-Tech-AI

🌐Web Agent Protocol (WAP) - Record and replay user interactions in the browser with MCP support

500

Transform MCP

Unstructured

The Unstructured Transform MCP Server connects your ADK agent to Unstructured, a document processing platform that turns raw files into structured, AI-ready data. This integration gives your agent the ability to parse PD

Sequential Thinking Multi-Agent System (MAS)

FradSer

An advanced sequential thinking process using a Multi-Agent System (MAS) built with the Agno framework and served via MCP.

306