# CodePic (remote · codepic.cc)

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

- Trust score: 68/100 (medium)
- Change this week: +5
- Registry status: active
- Liveness: live
- Owner verified: no
- Last scored: 2026-08-03

## Components

- remote · `codepic.cc`: 68/100 (this document), [markdown](https://verifymcp.io/servers/abelce-codepic/api-mcp-mcp.md), [page](https://verifymcp.io/servers/abelce-codepic/api-mcp-mcp)

## Channel facts

- Endpoint: `https://codepic.cc/api/mcp/mcp`
- Transports: `streamable-http`
- Auth: `required`
- Version: `1.0.0`

## Trust breakdown

How this component scores in each security and reliability category. Every signal is checked automatically against the live server, and we only credit what we can confirm. Scores are 0–100 per category. Scoring method: https://verifymcp.io/docs/scoring (what has changed: https://verifymcp.io/docs/scoring/changelog)

Scored 2026-08-03.

- **Endpoint Security**: 66/100
  - The endpoint's TLS certificate is valid, in date, and uses a strong key.
  - Authorisation not fully verified: no authorisation is required to call this server, and 6 tool(s) never declared a destructiveHint. The MCP spec treats an absent hint as destructive by default, so we cannot call this surface safe.
  - HTTPS is enforced; there's no plaintext access path.
  - The HSTS (Strict-Transport-Security) header is present.
  - DNSSEC is configured correctly; the domain's records validate against the full chain to the root.
- **Transport & Reachability**: 100/100
  - Verified streamable-http transport via a live MCP handshake.
- **Schema Quality & AI Usability**: 65/100
  - AI-judged instruction clarity (excellent).
  - Context-footprint check failed: tool/resource definitions use about 1432 tokens (~238/item across 6 items; 6 tools + 0 resources), over budget; trim descriptions and params.
  - Usage-examples check failed: none of the tools include examples.
- **Stability & Change Management**: 27/100
  - Stability observed for 8 of 30 days with no destabilising changes; credit accrues until the full window elapses.
- **Tool Coverage**: 100/100
  - 100% of tools have a non-trivial description (not blank, and not just the tool's name).
  - 100% of tool parameters carry a description.
- **Capabilities**: 100/100
  - Implements a supported MCP spec version (2025-11-25); the latest is 2026-07-28.

## Install

### Claude

```bash
claude mcp add --transport http abelce-codepic https://codepic.cc/api/mcp/mcp
```

### Codex

```toml
[mcp_servers.abelce-codepic]
url = "https://codepic.cc/api/mcp/mcp"
```

### opencode

```json
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "abelce-codepic": {
      "type": "remote",
      "url": "https://codepic.cc/api/mcp/mcp",
      "enabled": true
    }
  }
}
```

### OpenClaw

```bash
openclaw mcp add abelce-codepic --url https://codepic.cc/api/mcp/mcp --transport streamable-http
```

### Hermes

```yaml
mcp_servers:
  abelce-codepic:
    url: "https://codepic.cc/api/mcp/mcp"
```

### Other

```json
{
  "mcpServers": {
    "abelce-codepic": {
      "type": "http",
      "url": "https://codepic.cc/api/mcp/mcp"
    }
  }
}
```

The mcpServers block is a cross-client convention. Remote transports vary, so check your client's docs.

## Changelog

Every change recorded for this component, newest first. Days that predate change tracking, or that we cannot explain, say so: "we were watching and nothing happened" and "we were not watching" are different claims.

### 2026-08-02 (score 68, +1)

No change was recorded against any check on this day. Stability & Change Management went from 20 to 23. That category is still filling its 30-day observation window: 6 days of observed history at the previous scan, 7 at this one. The score rises as the window fills, whether or not the server changes.

### 2026-07-31 (score 67, +2)

- [functional] We updated how we score, so this day's move reflects our rubric, not a change to the server

### 2026-07-30 (score 65, 0)

- [functional] We updated how we score, so this day's move reflects our rubric, not a change to the server

### 2026-07-29 (score 65, +1)

No change was recorded against any check on this day. Stability & Change Management went from 7 to 10. That category is still filling its 30-day observation window: 2 days of observed history at the previous scan, 3 at this one. The score rises as the window fills, whether or not the server changes.

### 2026-07-28 (score 64, +1)

No change was recorded against any check on this day. Stability & Change Management went from 3 to 7. That category is still filling its 30-day observation window: 1 days of observed history at the previous scan, 2 at this one. The score rises as the window fills, whether or not the server changes.

### 2026-07-27 (score 63, 0)

- [functional] We updated how we score, so this day's move reflects our rubric, not a change to the server

### 2026-07-26 (score 63)

First indexed and scored.

## MCP tools (6)

### `get_shape_docs` (~75 tokens)

Get Shape Docs

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_templates` (~108 tokens)

List Templates

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.

Input parameters:

- `category` (string): Filter by category

### `create_from_template` (~302 tokens)

Create from Template

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

Input parameters:

- `locale` (string): Language for template content (default: en)
- `name` (string): Document name (defaults to template name)
- `slug` (string, required): Template slug (e.g. 'flowchart', 'erd', 'kanban'). Call list_templates to see all.

### `create_diagram` (~643 tokens)

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.
\- 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 sh…

Input parameters:

- `backgroundColor` (string): Canvas background color (default: '#f8f9fa')
- `edges` (array): Array of connector edges between nodes
- `name` (string, required): Document name
- `nodes` (array, required): Array of shape nodes to place on the canvas

### `get_diagram` (~88 tokens)

Get Diagram

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.

Input parameters:

- `documentId` (string, required): Document ID to fetch

### `update_diagram` (~216 tokens)

Update Diagram

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

Input parameters:

- `addEdges` (array): Edges to add
- `addNodes` (array): Nodes to add (without replacing existing ones)
- `backgroundColor` (string): New canvas background color
- `documentId` (string, required): Document ID to update (from a previous create call)
- `edges` (array): Full replacement of all edges
- `name` (string): New document name
- `nodes` (array): Full replacement of all nodes. If provided, replaces the entire canvas content.
- `removeEdgeIds` (array): IDs of edges to remove
- `removeNodeIds` (array): IDs of nodes to remove

## Diagnostics

Captured diagnostic sections: TLS, DNSSEC, Authorisation, Transports. The full working is on the page: https://verifymcp.io/servers/abelce-codepic/api-mcp-mcp#diagnostics

## Score history

- 2026-08-03: 68
- 2026-08-02: 68
- 2026-08-01: 67
- 2026-07-31: 67
- 2026-07-30: 65
- 2026-07-29: 65
- 2026-07-28: 64
- 2026-07-27: 63
- 2026-07-26: 63

## Links

- Remote endpoint: https://codepic.cc/api/mcp/mcp
- Authorisation metadata: https://codepic.cc/.well-known/oauth-protected-resource/api/mcp/mcp
- Repository: https://github.com/abelce/codepic-mcp
- Changelog RSS feed: https://verifymcp.io/servers/abelce-codepic/api-mcp-mcp/changelog.xml
- Changelog JSON feed: https://verifymcp.io/servers/abelce-codepic/api-mcp-mcp/changelog.json
- HTML version of this page: https://verifymcp.io/servers/abelce-codepic/api-mcp-mcp