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

Basic information

Category

AI & Agents

Transports

stdio

Publisher

abelce

Submitted by

zx tang

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.

Comments

More AI & Agents MCP servers

Perplexity MCP Server

DaInfernalCoder

A Model Context Protocol (MCP) server for research and documentation assistance using Perplexity AI. Won 1st @ Cline Hackathon

295

MCP Claude Code

SDGLBL

MCP implementation of Claude Code capabilities and more

302

LinkedIn MCP Server

stickerdaniel

Open-source MCP server for LinkedIn. Give Claude and any MCP-compatible AI agent access to profiles, companies, jobs, and messages.

2.7K

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

Shell and Coding agent for Claude and other mcp clients

rusiaaman

Shell and coding agent on mcp clients

666