Advertise
MCP.so
Sign In

Codepic MCP Server

@abelce

Repository

Basic information

Category

AI & Agents

Transports

stdio

Author

abelce

Submitted by

zx tang

About Codepic MCP Server

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

Codepic MCP Server 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"
      }
    }
  }
}

Codepic MCP Server tools

6

Return the full CodePic shape reference — all element types, their fields, data payloads, and JSON examples. Call this before create_diagram or update_diagram whenever you need to use an unfamiliar shape type or set type-specific data fields (e.g. select options, triangle direction, callout tail). No authentication required.

List all available CodePic diagram templates. Use this ONLY when the user has explicitly asked to browse, list, or pick from templates (e.g. "show me templates", "列出模板"). Do NOT call this as a preparatory step when the user just described a diagram they want — in that case go straight to `create_diagram`. Discovering slugs here is only meaningful before a user-confirmed `create_from_template` call.

Create a new CodePic diagram from a predefined template. Requires API Key authentication. Returns a public view URL and edit URL. **STRICT USAGE RULE — READ BEFORE CALLING:** Only call this tool when the user has **explicitly** asked to use a template. Explicit signals include phrases like: "use a template", "from template", "用模板", "从模板创建", "list templates and pick one", or the user directly naming/selecting a template slug. If the user merely describes a diagram they want (e.g. "draw an A/B test flowchart", "帮我画一个登录流程", "给我做一个系统架构图"), **DO NOT** call this tool. Call `create_diagram` instead and build the diagram from the user's description. Never silently substitute a template for a described diagram — the user will get a generic result that does not match what they asked for. When responding to the user, present the returned URL as a clickable markdown link (e.g. `[Open in CodePic →](URL)`) so the user can click it directly in their AI client (Cursor / Claude / etc.).

Create a custom CodePic hand-drawn style diagram by specifying nodes and edges. Requires API Key authentication. Returns a public view URL. **THIS IS THE DEFAULT TOOL FOR ANY USER-DESCRIBED DIAGRAM.** Whenever the user describes a diagram they want ("draw an A/B test flowchart", "帮我画一个登录流程", "a system architecture with a load balancer and 3 servers", etc.), build it here from their description. Do NOT fall back to `create_from_template` / `list_templates` unless the user explicitly asked for a template. When responding to the user, present the returned URL as a clickable markdown link (e.g. `[Open in CodePic →](URL)`) so the user can click it directly in their AI client (Cursor / Claude / etc.). **Container nesting (IMPORTANT — use whenever possible):** - Set `parentId` on a node to nest it inside another node. ANY node type can be a container. - The parent automatically becomes draggable-as-a-group and users can keep dropping elements into it. - Good container types: `frame` (clean group box), `rect`/`rounded-rect` (module boundary), `package` (UML package), `swimlane` (process lane). - Use absolute canvas coordinates for all nodes — child coordinates are auto-converted to parent-relative. - **Rule**: whenever 2+ nodes logically belong to the same module / component / region, create a container node first and set `parentId` on each child. **Design tips for beautiful diagrams:** - Use semantic types: `button-primary` for CTA buttons (auto blue), `diamond` for decisions - Pick a color palette and apply it consistently — light fill + darker stroke of the same hue: • Blue: fillColor #e3f2fd / #bbdefb, strokeColor #1565c0, fontColor #1565c0 (or #ffffff on dark fill) • Green: fillColor #e8f5e9 / #c8e6c9, strokeColor #2e7d32, fontColor #1b5e20 • Purple: fillColor #f3e5f5 / #e1bee7, strokeColor #6a1b9a, fontColor #4a148c • Neutral: fillColor #f8fafc / #f1f5f9, strokeColor #475569, fontColor #1e293b - Each semantic group (decisions, processes, I/O) should share a fill color to create visual hierarchy - Dark fill (e.g. #1565c0, #ef4444) → fontColor #ffffff; light fill → fontColor #111827

Fetch the current state of an existing CodePic diagram. Returns a compact summary of all elements with their IDs, types, positions, and parent-child relationships. Use this before update_diagram when you need to: add nested children to existing containers, make targeted edits to specific elements, or understand the current structure. Requires API Key authentication.

Update an existing CodePic diagram. You can rename it, replace all nodes/edges, or add/remove individual nodes and edges. Requires API Key authentication. When responding to the user, present the returned URL as a clickable markdown link (e.g. `[Open in CodePic →](URL)`) so the user can click it directly in their AI client (Cursor / Claude / etc.).

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

Frequently asked questions

1

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.

2

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.

3

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.

4

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.

5

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

Atwork

Atwork Team

Connect Atwork to Claude, ChatGPT, Cursor or any MCP client and work with your real data: ask what is overdue, total a sheet by any field, add tasks, update rows, post comments and draft pages. The assistant acts as you

Ads Uploader — Meta Ads MCP

Ads Uploader

Launch Meta ads with your AI agent. Bulk-create Facebook and Instagram ads, import Google Drive creatives, launch partnership ads with authorized creators, and review saved builds before launch.

F

fhirHydrant

faulkj

Open-source Node.js FHIR MCP server with SMART Backend Services, metadata-aware search/CRUD tools, compact responses, FHIRPath filtering, safe pagination, audit events, and terminology lookup.

14

Agent Traffic Lab

Agent Traffic Lab

ATL doesn’t just help agents find tools — it gets the job done. It finds and chooses the right AI provider, tool, or MCP server, executes the task, and switches to a fallback when a provider fails. It can optimize for lo

OpenZiti MCP Gateway

openziti

NetFoundry MCP Gateway enables secure, isolated access to Model Context Protocol (MCP) tools across distributed systems without exposing public endpoints. Zero trust gateway for MCP servers. Aggregate, filter, and secure

48
Advertise