CodePic

Official6 tools

by abelce

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

AI agent generates editable hand-drawn style diagrams for flowcharts, ER, and architecture.

Topics

aiclaudecursordeveloper-toolsdiagramsflowchartmcpmodel-context-protocolcodepic

Captured live from the server via tools/list.

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.

No parameters.

list_templates

List all available CodePic diagram templates. Use this to discover template slugs before calling create_from_template.

Parameters (1)

categorystring
Filter by category

create_from_template

Create a new CodePic diagram from a predefined template. Requires API Key authentication. Returns a public view URL and edit URL.

Parameters (3)

slugstringrequired
Template slug (e.g. 'flowchart', 'erd', 'kanban'). Call list_templates to see all.
namestring
Document name (defaults to template name)
localestring
Language for template content (default: en)

create_diagram

Create a custom CodePic hand-drawn style diagram by specifying nodes and edges. Requires API Key authentication. Returns a public view URL. **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 share a fill color to create visual hierarchy - Dark fill (e.g. #1565c0, #ef4444) → fontColor #ffffff; light fill → fontColor #111827

Parameters (4)

namestringrequired
Document name
nodesarrayrequired
Array of shape nodes to place on the canvas
edgesarray
Array of connector edges between nodes
backgroundColorstring
Canvas background color (default: '#f8f9fa')

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.

Parameters (1)

documentIdstringrequired
Document ID to fetch

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.

Parameters (9)

documentIdstringrequired
Document ID to update (from a previous create call)
namestring
New document name
nodesarray
Full replacement of all nodes. If provided, replaces the entire canvas content.
edgesarray
Full replacement of all edges
addNodesarray
Nodes to add (without replacing existing ones)
addEdgesarray
Edges to add
removeNodeIdsarray
IDs of nodes to remove
removeEdgeIdsarray
IDs of edges to remove
backgroundColorstring
New canvas background color

README.md5 KBView 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 cpk_your_api_key_here.

Cursor

Create .cursor/mcp.json in your project:

json

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

Claude Code

Add it with one command:

bash

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 claude_desktop_config.json:

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:

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:

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:

json

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

Cline

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

json

{
  "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.
create_from_template - 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:

text

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

Examples

Example	What It Generates	Prompt
System architecture	Next.js SaaS architecture diagram	Next.js + Supabase + Postgres + R2 + Stripe + Vercel
Database ER diagram	SaaS billing data model	Users, teams, subscriptions, invoices, payments
OAuth sequence flow	PKCE login sequence diagram	Browser, app server, identity provider, database
CI/CD pipeline	GitHub Actions deployment pipeline	Type-check, lint, build, preview, production
Data pipeline	Analytics pipeline diagram	Segment, Snowflake, dbt, Metabase
Iterate existing diagram	Read an existing document, then update it	`get_diagram` + `update_diagram`

Useful Links

CodePic: https://codepic.cc
MCP guide: https://codepic.cc/tools/mcp
API keys (get yours): https://codepic.cc/settings/api-keys
ER diagram maker: https://codepic.cc/tools/er-diagram-maker
Flowchart maker: https://codepic.cc/tools/flowchart-maker
Wireframe tool: https://codepic.cc/tools/wireframe-tool

Community Post Angle

If you share this project, lead with the workflow:

I connected Cursor to a diagram editor through MCP, so it can generate editable architecture diagrams instead of Mermaid text.

Avoid generic product claims like "best diagram tool". Developer communities respond better to a concrete workflow and real examples.

License

MIT — see LICENSE.

Install

Tools (6)

get_shape_docslist_templatescreate_from_templatecreate_diagramget_diagramupdate_diagram

Remote endpoint

Streamable HTTP

Hosted server - connect over the network, no local install.

url

https://codepic.cc/api/mcp/mcp

Add to VS Code Add to Cursor

claude_desktop_config.json

json

{
  "mcpServers": {
    "codepic": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://codepic.cc/api/mcp/mcp"
      ]
    }
  }
}

Desktop config is stdio-only; this bridges via mcp-remote. Native remote: Settings > Connectors.