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 とエージェント」の他のコンテンツ

Open Multi-Agent Canvas

CopilotKit

The open-source multi-agent chat interface that lets you manage multiple agents in one dynamic conversation and add MCP servers for deep research

507

Model Context Protocol for Unreal Engine

chongdashu

Enable AI assistant clients like Cursor, Windsurf and Claude Desktop to control Unreal Engine through natural language using the Model Context Protocol (MCP).

2.0K