Provider hosted
No sign in
Tools: 7

CodePic

CodePic

Free online whiteboard with an infinite canvas — sketch, plan, and explain anything. Draw flowcharts, ER diagrams, wireframes, and system architecture in a hand-drawn style. No sign-up, AI-friendly via MCP. Built for developers and designers.

https://codepic.cc

Use in your AI tool

Use the tools from this page

Opens ChatGPT on the web or desktop and asks it to use the WebMCP tools available here.

Connect the MCP server

Connect straight to this server’s public endpoint.

Remote MCP URL
https://codepic.cc/api/mcp/mcp

Use on MCPBundles

We add this server to your workspace, then open Studio — saved access, one connection to many servers, with a history of what ran.

Last probed Sep 14, 2026 · codepic.cc

7tools discovered

Tools discovered (7)

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

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

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

  • 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 t

  • 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

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

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

Get your MCP into directories

A working endpoint is step one. Directory coverage is the coordinated launch across ChatGPT, Claude, Cursor, the MCP Registry, and community indexes.

Directory coverage for brands

Frequently Asked Questions

What is the CodePic MCP server?

Free online whiteboard with an infinite canvas — sketch, plan, and explain anything. Draw flowcharts, ER diagrams, wireframes, and system architecture in a hand-drawn style. No sign-up, AI-friendly via MCP. Built for developers and designers.

How do I connect CodePic to my AI agent?

Use the MCP endpoint listed on this page in your MCP client configuration. One-click install pills support Claude, Cursor, VS Code, and other hosts. Copy the remote MCP URL if your client needs a manual entry.

How many tools does CodePic provide?

MCPBundles probed 7 tools on the live server. The tool list on this page reflects what was discovered at the last refresh — connect your client to see the full set available to your session.

What authentication does CodePic require?

No provider sign-in was required during MCPBundles' probe. Your client may still need MCPBundles credentials depending on how you connect.

Maintain this listing

Operate CodePic? Verify ownership to take over this directory entry.

Operate CodePic?

This server appears in the MCPBundles directory. Verify you operate it to take over the listing — name, description, logo, contact email, and skill content. We email a 6-digit code to a maintainer address your server publishes in /.well-known/security.txt or /.well-known/mcpbundles.json. Free, takes about a minute.

Claim this listing