CodePic

io.github.abelce/codepicVersion 1.0.0

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

Status

Responds747 msNov 14, 2026, 14:43 UTCAnswered our handshake without sign-in.

Registry data may be out of date

We could not refresh it, so this page shows the last copy.

Last checked: Nov 14, 2026, 14:43 UTC
Latency: 747 ms
Remotes responding: 1 of 1
Sign-in: API key
Hosting: Hosted outside the EU (detected)
Registry data as of: Nov 14, 2026, 21:12 UTC

Data from the official MCP Registry, checked by run.zero. How we check

Connect

Streamable HTTP

https://codepic.cc/api/mcp/mcpResponds747 msNov 14, 2026, 14:43 UTC

No sign-in

Claude Code

claude mcp add --transport http codepic https://codepic.cc/api/mcp/mcp --header 'Authorization: Bearer <YOUR_TOKEN>'

Replace <YOUR_TOKEN> before running.

Claude Desktop and claude.ai

Settings > Connectors > Add custom connector
Name: codepic
Remote MCP server URL: https://codepic.cc/api/mcp/mcp
This server expects the header Authorization.

Cursor

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

Replace <YOUR_TOKEN> before running.

VS Code

code --add-mcp '{"name":"codepic","type":"http","url":"https://codepic.cc/api/mcp/mcp","headers":{"Authorization":"Bearer <YOUR_TOKEN>"}}'

Replace <YOUR_TOKEN> before running.

Built your own server? run.zero hosts MCP servers on European infrastructure.

Host your own MCP server on run.zero

Tools

7 tools

Tools of CodePic
	Description		Read-only	Idempotent	Open world
`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: fillCo	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: fillCo	Not declared	Not declared	Not declared	Not declared
`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.).	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.).	Not declared	Not declared	Not declared	Not declared
`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.	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.	Not declared	Not declared	Not declared	Not declared
`get_shape_catalog`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.	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.	Not declared	Not declared	Not declared	Not declared
`get_shape_docs`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.	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.	Not declared	Not declared	Not declared	Not declared
`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.	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.	Not declared	Not declared	Not declared	Not declared
`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.).	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.).	Not declared	Not declared	Not declared	Not declared

Details

Registry status: Active
Published: Jun 16, 2026
Updated: Jun 16, 2026
Website: Not given
Repository: https://github.com/abelce/codepic-mcp⁠ (opens in a new tab)
Categories (suggested): Knowledge and notes Design and mediaSuggested categories are assigned automatically from the registry text and may be wrong. Verified operators can correct them.
GDPR: Not declared

Are you the operator? Claim this listing