CodePic
Server Details
AI agent draws editable hand-drawn diagrams (flowchart, ER, architecture) via MCP, not static images
- Status
- Healthy
- Last Tested
- Transport
- Streamable HTTP
- URL
- Repository
- abelce/codepic-mcp
- GitHub Stars
- 0
Glama MCP Gateway
Connect through Glama MCP Gateway for full control over tool access and complete visibility into every call.
Full call logging
Every tool call is logged with complete inputs and outputs, so you can debug issues and audit what your agents are doing.
Tool access control
Enable or disable individual tools per connector, so you decide what your agents can and cannot do.
Managed credentials
Glama handles OAuth flows, token storage, and automatic rotation, so credentials never expire on your clients.
Usage analytics
See which tools your agents call, how often, and when, so you can understand usage patterns and catch anomalies.
Tool Definition Quality
Average 4.5/5 across 6 of 6 tools scored.
Each tool has a clearly distinct purpose: create from description vs template, get state, get shape docs, list templates, and update. The descriptions include strict usage rules to avoid confusion even between similar creation tools.
All tool names follow a consistent verb_noun pattern using snake_case: create_diagram, create_from_template, get_diagram, get_shape_docs, list_templates, update_diagram.
With 6 tools covering creation, retrieval, reference, and update, the count is well-scoped for a diagramming server. Each tool serves a necessary function without redundancy.
Core create, get, and update operations are present, but there is no delete tool or tool to list user's own diagrams, which are notable gaps. Templates are supported but user diagram management is incomplete.
Available Tools
6 toolscreate_diagramCreate DiagramInspect
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
parentIdon 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
parentIdon each child.
Design tips for beautiful diagrams:
Use semantic types:
button-primaryfor CTA buttons (auto blue),diamondfor decisionsPick 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
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Document name | |
| edges | No | Array of connector edges between nodes | |
| nodes | Yes | Array of shape nodes to place on the canvas | |
| backgroundColor | No | Canvas background color (default: '#f8f9fa') |
create_from_templateCreate from TemplateInspect
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.).
| Name | Required | Description | Default |
|---|---|---|---|
| name | No | Document name (defaults to template name) | |
| slug | Yes | Template slug (e.g. 'flowchart', 'erd', 'kanban'). Call list_templates to see all. | |
| locale | No | Language for template content (default: en) |
get_diagramGet DiagramInspect
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.
| Name | Required | Description | Default |
|---|---|---|---|
| documentId | Yes | Document ID to fetch |
get_shape_docsGet Shape DocsInspect
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.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
list_templatesList TemplatesInspect
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.
| Name | Required | Description | Default |
|---|---|---|---|
| category | No | Filter by category |
update_diagramUpdate DiagramInspect
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.).
| Name | Required | Description | Default |
|---|---|---|---|
| name | No | New document name | |
| edges | No | Full replacement of all edges | |
| nodes | No | Full replacement of all nodes. If provided, replaces the entire canvas content. | |
| addEdges | No | Edges to add | |
| addNodes | No | Nodes to add (without replacing existing ones) | |
| documentId | Yes | Document ID to update (from a previous create call) | |
| removeEdgeIds | No | IDs of edges to remove | |
| removeNodeIds | No | IDs of nodes to remove | |
| backgroundColor | No | New canvas background color |
Claim this connector by publishing a /.well-known/glama.json file on your server's domain with the following structure:
{
"$schema": "https://glama.ai/mcp/schemas/connector.json",
"maintainers": [{ "email": "your-email@example.com" }]
}The email address must match the email associated with your Glama account. Once published, Glama will automatically detect and verify the file within a few minutes.
Control your server's listing on Glama, including description and metadata
Access analytics and receive server usage reports
Get monitoring and health status updates for your server
Feature your server to boost visibility and reach more users
For users:
Full audit trail – every tool call is logged with inputs and outputs for compliance and debugging
Granular tool control – enable or disable individual tools per connector to limit what your AI agents can do
Centralized credential management – store and rotate API keys and OAuth tokens in one place
Change alerts – get notified when a connector changes its schema, adds or removes tools, or updates tool definitions, so nothing breaks silently
For server owners:
Proven adoption – public usage metrics on your listing show real-world traction and build trust with prospective users
Tool-level analytics – see which tools are being used most, helping you prioritize development and documentation
Direct user feedback – users can report issues and suggest improvements through the listing, giving you a channel you would not have otherwise
The connector status is unhealthy when Glama is unable to successfully connect to the server. This can happen for several reasons:
The server is experiencing an outage
The URL of the server is wrong
Credentials required to access the server are missing or invalid
If you are the owner of this MCP connector and would like to make modifications to the listing, including providing test credentials for accessing the server, please contact support@glama.ai.
Discussions
No comments yet. Be the first to start the discussion!