MCP.Market

CodePic MCP server

online · 100% uptime
by abelce·io.github.abelce/codepic·v1.0.0·1 stars
No reviews yet

AI agent draws editable hand-drawn diagrams (flowchart, ER, architecture) via MCP, not static images

B76/100grade B
Write a reviewRun it
What users say
No reviews yet
Be the first
Safety scan
B76/100

full report

Adoption
New

1 stars

Reviews

Write one

Nobody has reviewed CodePic yet.

If you have run it, two minutes of your experience saves the next person an afternoon.

CodePic tools (7, 3 write)

write = sends, deletes, buys or posts
  • create_diagramwrite actionFree

    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. - Call `get_shape_catalog` with tag `container-capable` to choose among native structural containers and adaptive semantic shapes such as rectangles, circles, ellipses, diamonds, cylinders, and hexagons. - Parent bounds are expanded automatically using the selected shape's title and outline safe area. - Use absolute canvas coordinates for all nodes — child coordinates are auto-converted to parent-relative. - Set node `name`, `description`, and `tags` when later MCP/Agent reads need stable business semantics beyond visible text. - **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

  • create_from_templatewrite actionFree

    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.).

  • get_diagramFree

    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.

  • get_shape_catalogFree

    Return compact machine-readable shape metadata for planning a diagram: semantic tags, geometry family, container support, recommended padding, default size, and MCP availability. Use this before create_diagram when choosing shapes or containers. Unlike get_shape_docs, this tool is concise and filterable.

  • get_shape_docsFree

    Return the full CodePic shape reference — all element types, their fields, data payloads, and JSON examples. Call get_shape_catalog first for concise shape selection and container capabilities; use this tool when you need complete fields or type-specific data (e.g. select options, triangle direction, callout tail). No authentication required.

  • list_templatesFree

    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.

  • update_diagramwrite actionFree

    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.).

Public scan report

scanner v0.1.9 · 2026-09-26 · same rubric, same numbers if you re-run it

1 low
  • –Code scanremote-only server, no package to scann/a
  • Live reliabilityremote reachable in 1077ms20/20
  • Tool poisoning7 tool descriptions checked13/15
  • Auth qualityAPI key sent as a header8/15
  • Maintenancelast push 102 days ago8/15
  • Maintainer identityregistry namespace matches repository owner; GitHub account older than a year8/10

Findings (1)

  • lowUnusually long tool description (over 2,000 characters)poison.long-description
    tool create_diagram: …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. - Call `get_shape_catalog` with tag `container-capable` to choose among native structural containers and adaptive semantic shapes such as rectangles, circles, ellipses, diamonds, cylinders, and hexagons. - Parent bounds are expanded automatically using the selected shape's title and outline safe area. - Use absolute canvas coordinates for all nodes — child coordinates are auto-converted to parent-relative. - Set node `name`, `description`, and `tags` when later MCP/Agent reads need stable business semantics beyond visible text. - **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…
Overall 76/100. Components that don't apply are left out of the denominator. Any critical finding is an F.RubricAppeal a findingJSON

How CodePic compares

Against every graded AI and agents MCP server, from our own scans and uptime checks. Updated after each scan run.

Safety score
76/100
higher than 48% of 4,460 AI and agents servers
Tools
7
the typical AI and agents server has 6
Tools that change things
43%
typical: 0%. Fewer write tools means less an agent can break
Uptime
100%
of our recent checks; the typical remote AI and agents server answers 100%
Response time
114 ms
faster than 84% of 2,331 AI and agents servers
GitHub stars
1
more than 50% of 2,711 AI and agents servers

What its tools let an agent do: 4 read · 2 create · 1 change

Install CodePic in Claude Code, Cursor or VS Code

claude mcp add --transport http codepic https://codepic.cc/api/mcp/mcp
Add to Cursor

What the publisher says

From the CodePic repository's README, as published. We do not edit it. Read it on GitHub

CodePic MCP

Let your AI coding agent draw editable diagrams — not another Mermaid snippet you have to paste.

Generate editable hand-drawn diagrams from Cursor, Claude Desktop, and other MCP clients.

CodePic MCP lets an AI coding agent create diagrams directly in CodePic instead of returning static images, Mermaid snippets, or JSON that you have to paste manually. The result opens in the CodePic editor, where you can still move shapes, edit labels, adjust connectors, share a read-only link, and export PNG or JSON.

Quick Start

It's a remote Streamable HTTP server — no local install. First create a free API key (the cpk... token) at https://codepic.cc/settings/api-keys (sign in → New API key → copy), then add the config for your client and replace cpkyourapikey_here.

Cursor

Create .cursor/mcp.json in your project:

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

Claude Code

Add it with one command:

claude mcp add --transport http codepic https://codepic.cc/api/mcp/mcp \
  --header "Authorization: Bearer cpk_your_api_key_here"

Claude Desktop

Add CodePic to your claudedesktopconfig.json:

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

VS Code (GitHub Copilot)

Add CodePic to .vscode/mcp.json:

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

Codex CLI

Add CodePic to ~/.codex/config.toml:

[mcp_servers.codepic]
url = "https://codepic.cc/api/mcp/mcp"

[mcp_servers.codepic.headers]
Authorization = "Bearer cpk_your_api_key_here"

Windsurf

Add CodePic to ~/.codeium/windsurf/mcp_config.json:

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

Cline

Open Cline's MCP settings (clinemcpsettings.json) and add:

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

Other clients

Any MCP client that supports remote Streamable HTTP works — point it at the endpoint https://codepic.cc/api/mcp/mcp with header Authorization: Bearer cpk_....

Available MCP Tools

  • list_templates - list available diagram templates.
  • createfromtemplate - create a new diagram from a template.
  • create_diagram - create a custom diagram with nodes and edges.
  • get_diagram - fetch the current diagram structure by documentId before making targeted follow-up edits.
  • update_diagram - update an existing diagram by replacing, adding, or removing nodes and edges.

Iterate on an Existing Diagram

Use get_diagram when you already have a CodePic document and want the AI agent to inspect it before changing it. This keeps the workflow grounded in the current diagram instead of guessing from memory.

Example prompt:

Use get_diagram to inspect document <documentId>, then update the diagram by adding a Redis cache between the API server and Postgres database.

Examples

Shortened. The full README is on GitHub.

Nothing above is checked by us. What we check is on the safety report.

CodePic: common questions

Is CodePic MCP server safe?
Mostly: it is graded B (76/100). Read the CodePic safety report
How do I install CodePic?
It runs remotely at codepic.cc. Add it to Claude Code, Cursor, VS Code or Claude Desktop with the snippets above, or call it through the mcp.market gateway without installing anything.
Does CodePic need an API key?
Yes. The registry entry asks for Authorization.
Is CodePic maintained?
The last commit was 141 days ago (2026-06-16). The latest release is v1.0.0.
Is CodePic up?
100% of our last 28 checks got an answer. We check remote servers about four times a day.
What can I use instead of CodePic?
Servers from other publishers that do the same job: Openflowkit MCP server, VisualTorch MCP server and PaperBanana MCP server.
How does CodePic compare with other AI and agents MCP servers?
safety score 76/100 (higher than 48% of 4,460 AI and agents servers); tools 7 (the typical AI and agents server has 6); tools that change things 43% (typical: 0%. Fewer write tools means less an agent can break). Full comparison.

Alternatives to CodePic

Same job from other publishers: the closest match first, then the best rated.

  • Openflowkit
    Architecture diagrams for your agent: draw on the live OpenFlowKit canvas or edit diagram files.
    A
  • VisualTorch
    Render PyTorch architecture diagrams and animated GIF reveals from trusted model source.
    A
  • PaperBanana
    Generate academic diagrams and statistical plots from text using multi-agent AI.
    A
  • Agent-Native Plan
    Structured visual plans and PR recaps with diagrams, prototypes, annotations, and sharing
    More from BuilderIO →
    A
  • WaveSpeed
    Run any model on the live WaveSpeed catalog: image, video, audio, 3D.
    A