mcp server
CodePic
AI agent draws editable hand-drawn diagrams (flowchart, ER, architecture) via MCP, not static images
Description as published by the maintainer. Source
- version 1.0.0
- active
active — Most recent push to the repository was 2026-06-16.
What this server can do
6 functions, named and described by the server itself. Parameter names are shown because they say more about what a function does than its name usually does.
create_diagram(name, edges, nodes, backgroundColor)- 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 share a fill color to create visual hierarchy - Dark fill (e.g. #1565c0, #ef4444) → fontColor #ffffff; light fill → fontColor #111827 Required: name, nodes.
create_from_template(name, slug, locale)- 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.). Required: slug.
get_diagram(documentId)- 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. Required: documentId.
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(category)- 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_diagram(name, edges, nodes, addEdges, addNodes, documentId, removeEdgeIds, removeNodeIds, backgroundColor)- 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.). Required: documentId.
Last successful function declaration observed on . Source: https://codepic.cc/api/mcp/mcp. We list what the server declared; we do not call any of these functions.
Endpoint status observed on . Source: https://codepic.cc/api/mcp/mcp.
Signals
These are separate measurements of different things. They are deliberately not combined into one score, because a popularity number that mixes website traffic with saves and stars cannot be checked or acted on.
| Signal | Value | What it measures | Window | Observed | Source |
|---|---|---|---|---|---|
| GitHub stars | 0 | Number of GitHub accounts that bookmarked this repository since it was created. It is a bookmark count, not installs, not active users and not quality. | cumulative, all time | GitHub | |
| Last commit | 2026-06-16 | Date of the most recent push to any branch. This is the strongest cheap indicator of whether the project is still maintained. | point in time | GitHub | |
| Open issues | 0 | Open issues plus open pull requests, as GitHub counts them together. A high number can mean an active project or an abandoned one. | as of fetch | GitHub | |
| Latest published version | 1.0.0 | Latest version string the maintainer published to the registry. | as of fetch | Model Context Protocol | |
| Registry record last updated | 2026-06-16 | When the registry record was last updated by its maintainer. | point in time | Model Context Protocol | |
| License | MIT | Licence GitHub detected in the repository. Detection can be wrong; the LICENSE file is authoritative. | as of fetch | GitHub | |
| First listed in the MCP Registry | 2026-06-16 | Date this server was first published to the official MCP Registry. Not a usage or quality measure. | point in time | Model Context Protocol | |
| repository status | active | The repository exists on GitHub and is not archived. This says nothing about how recently it was worked on. | as of fetch | GitHub | |
| mcp tools declared | 6 tools | Number of functions the server itself declared when asked to list them. This is what the server offers an agent, not a measure of how well any of them work. | as of probe | codepic.cc | |
| mcp endpoint status | ok | The server listed 6 functions when asked. | as of probe | codepic.cc |
Where to get it
Related, by what their authors tagged them
-
agents365-ai-drawio-skill-drawio-skill
— last commit 2026-08-05, shares flowchart
Use when the user requests diagrams, flowcharts, architecture diagrams, ER diagrams, UML / sequence / class diagrams, S…
-
com.chartforgeai/chartforge
— last commit 2026-04-16, shares diagrams
MCP server for ChartForge — generate stunning charts and diagrams from natural language
-
io.github.crawde/chartforge
— last commit 2026-04-16, shares diagrams
MCP server for ChartForge — generate stunning charts and diagrams from natural language
-
Excaliwow
— last commit 2026-08-05, shares diagrams
Create, read, render, organize, and safely edit persistent Excalidraw diagrams with AI agents.
These share tags the maintainers applied themselves, such as flowchart, diagrams. Common tags like "mcp" or "ai" are ignored for this: agreeing with six hundred other projects is not a similarity.
This is not a recommendation and not a test result. It is a map of what the authors said their work is about.
How the author describes it
Topics the maintainer set on GitHub: ai, claude, codepic, cursor, developer-tools, diagrams, flowchart, mcp, model-context-protocol.
This record as data
Every field on this page, with its source and observation date, is in the catalog JSON. Fetch the whole kind at once instead of parsing this HTML.
GET /api/v1/entries/mcp_server.json