Codepic

Name: Codepic
Author: abelce

@abelce

关于 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

基本信息

分类

AI 与智能体

传输方式

stdio

发布者

abelce

提交者

zx tang

配置

使用下面的配置,将此服务器添加到你的 MCP 客户端。

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

工具

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

概览

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.

AI 与智能体分类下的更多 MCP 服务器

Gemini MCP Server

aliargun

MCP server implementation for Google's Gemini API

259

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