Skip to main content
Glama

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
Server Listing
codepic

Glama MCP Gateway

Connect through Glama MCP Gateway for full control over tool access and complete visibility into every call.

MCP client
Glama
MCP server

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.

100% free. Your data is private.
Tool DescriptionsA

Average 4.5/5 across 6 of 6 tools scored.

Server CoherenceA
Disambiguation5/5

Each tool has a clearly distinct purpose: create_diagram builds from user descriptions, create_from_template uses a template, get_diagram fetches diagram state, get_shape_docs provides shape reference, list_templates browses templates, and update_diagram edits an existing diagram. The descriptions include explicit routing rules to prevent confusion between the two creation tools.

Naming Consistency4/5

Most tools follow the verb_noun pattern (create_diagram, get_diagram, update_diagram, list_templates, get_shape_docs). create_from_template is a minor deviation but still clear, and the snake_case style is consistent throughout.

Tool Count5/5

Six tools is a well-scoped set for a diagram creation and editing service. Each tool serves a distinct function without unnecessary bloat or missing essentials.

Completeness4/5

The core diagram lifecycle is covered: create from description, create from template, read current state, and update (including adding/removing nodes). Missing an explicit delete tool and a way to list a user's existing diagrams, but these are minor gaps that can be worked around.

Available Tools

6 tools
create_diagramCreate DiagramAInspect

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

ParametersJSON Schema
NameRequiredDescriptionDefault
nameYesDocument name
edgesNoArray of connector edges between nodes
nodesYesArray of shape nodes to place on the canvas
backgroundColorNoCanvas background color (default: '#f8f9fa')
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full behavioral burden. It discloses authentication requirements ('Requires API Key authentication'), the return type ('Returns a public view URL'), and container nesting behavior (parent becomes draggable-as-a-group, child coordinates auto-converted). It does not mention rate limits or irreversibility, but the create semantics are clear and the description adds meaningful behavioral context.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is long but well-structured: a clear one-sentence purpose, a bolded default-tool directive, a container nesting section, and design tips. It is front-loaded with the most critical usage instructions. While some color palette details could be trimmed, every section serves a practical purpose for generating aesthetically correct diagrams, so it earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Despite the tool's complexity (dozens of parameters, no output schema), the description is remarkably complete. It explains the return value (public URL), auth requirements, container nesting rules, type semantics, and design best practices. It also points to get_shape_docs for the full field list, covering any residual gaps. The combination of schema and description fully equips an agent to invoke the tool correctly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters5/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so baseline is 3, but the description substantially enriches parameter meaning. It explains how to use parentId for container nesting, provides specific color palettes for fillColor/strokeColor/fontColor, gives semantic shape type guidance (button-primary, diamond, etc.), includes width/height calculation formulas for code blocks, and offers corner radius recommendations. This goes far beyond the schema and materially helps an agent produce good diagrams.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description opens with a specific verb and resource: 'Create a custom CodePic hand-drawn style diagram by specifying nodes and edges.' It clearly differentiates from create_from_template by declaring itself the default for user-described diagrams and explicitly instructing not to fall back to templates unless the user asks for one.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Usage guidance is explicit: 'THIS IS THE DEFAULT TOOL FOR ANY USER-DESCRIBED DIAGRAM' and 'Do NOT fall back to create_from_template / list_templates unless the user explicitly asked for a template.' It also provides practical instructions on presenting the returned URL as a markdown link, which helps the agent complete the user interaction.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

create_from_templateCreate from TemplateAInspect

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

ParametersJSON Schema
NameRequiredDescriptionDefault
nameNoDocument name (defaults to template name)
slugYesTemplate slug (e.g. 'flowchart', 'erd', 'kanban'). Call list_templates to see all.
localeNoLanguage for template content (default: en)
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden. It discloses authentication requirements, return URLs, and presentation expectations. It doesn't cover edge cases like invalid slugs or quota consumption, but covers the key behavioral aspects needed for correct invocation.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is well-structured with a bold usage rule and clear sections, but is slightly verbose. The strict usage rule could be tightened without losing value, though the structure helps readability.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a creation tool with no output schema, the description is complete: it explains the tool's purpose, usage conditions, authentication, return values, and how to present results. No critical information is missing for an agent to invoke it correctly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so all three parameters are already well-documented in the schema (including slug examples and reference to list_templates). The description adds no additional parameter-specific meaning beyond what the schema provides, earning the baseline score.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool creates a new CodePic diagram from a predefined template, using a specific verb and resource. It distinguishes itself from siblings by mentioning the template source and the explicit usage rule that differentiates it from create_diagram.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides explicit when-to-use and when-not-to-use criteria, naming create_diagram as the alternative and giving concrete example phrases that signal template usage versus diagram description. This is exemplary guidance that leaves no ambiguity.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_diagramGet DiagramAInspect

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
documentIdYesDocument ID to fetch
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided, so the description carries the full burden. It discloses return content (compact summary with IDs, types, positions, relationships) and the authentication requirement, which are valuable behavioral details. Not quite a 5 because it lacks mentions of error handling or exact response structure, but for a simple getter it is strong.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Three sentences, each contributing purpose, usage scenario, and auth requirement respectively. No fluff, well-structured and front-loaded.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a single-parameter getter with no output schema, the description explains what is returned and when to use it. It is nearly complete, though it could mention whether the operation is safe/read-only explicitly, but given no annotations, this is already decent.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema already fully describes the only parameter (documentId) with 100% coverage. The description does not add additional meaning about the parameter, so it remains at the baseline of 3.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool fetches the current state of an existing CodePic diagram, using a specific verb ('Fetch') and resource. It distinguishes itself from siblings like create_diagram and update_diagram by focusing on reading an existing diagram.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicitly says 'Use this before update_diagram when you need to: add nested children...' providing concrete scenarios and naming the alternative tool. This gives clear when-to-use guidance.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_shape_docsGet Shape DocsAInspect

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.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, but the description states 'No authentication required' and details the return content. It doesn't explicitly say it's read-only or non-destructive, but 'Return' strongly implies a safe getter. The description carries the burden well without over-explaining.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences with no filler. The first sentence front-loads the purpose and contents, the second provides usage timing and auth context. Every phrase adds value.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Despite no output schema, the description fully explains what will be returned. It also ties usage to create/update diagram tools, giving sufficient context for an AI agent to decide when to invoke it. Sibling list supports this.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The tool has zero parameters, so the empty schema is fully covered. No parameter description is needed, and the description doesn't attempt to invent any. Baseline for 0 params is 4.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool returns the full CodePic shape reference, listing specific contents (element types, fields, data payloads, JSON examples). This specific verb+resource makes it distinct from sibling tools like create_diagram or get_diagram.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicitly instructs to call this tool before create_diagram or update_diagram when unfamiliar with shape types or type-specific data fields. This provides clear context and names related tools, though it doesn't explicitly state exclusions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list_templatesList TemplatesAInspect

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
categoryNoFilter by category
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the burden of behavioral disclosure. It reveals that the output contains slugs usable with create_from_template, implying a read-only listing operation. While it doesn't detail pagination or return format, the key behavioral context is provided beyond the basic action.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is concise and well-structured: one sentence states the core function, and a second sentence provides critical usage constraints. Every sentence earns its place without fluff.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple list tool with one optional parameter and no output schema, the description is complete. It explains the purpose, when to use it, what the output contains (slugs), and how it relates to sibling tools, covering all essential context.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema already fully documents the only parameter (category) with an enum and description ('Filter by category'). The tool description adds no additional semantic detail beyond what the schema provides, so the baseline of 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses the specific verb 'list' and identifies the resource as 'all available CodePic diagram templates', clearly distinguishing it from creating or editing diagrams. It also explicitly contrasts with sibling tools like create_diagram, making the purpose unambiguous.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides explicit when-to-use and when-not-to-use guidance: use only when the user asks to browse/list/pick templates, and do not call as a preparatory step for a diagram description. It names the alternative (create_diagram) and explains that slugs discovered here are meaningful only before a create_from_template call.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

update_diagramUpdate DiagramAInspect

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

ParametersJSON Schema
NameRequiredDescriptionDefault
nameNoNew document name
edgesNoFull replacement of all edges
nodesNoFull replacement of all nodes. If provided, replaces the entire canvas content.
addEdgesNoEdges to add
addNodesNoNodes to add (without replacing existing ones)
documentIdYesDocument ID to update (from a previous create call)
removeEdgeIdsNoIDs of edges to remove
removeNodeIdsNoIDs of nodes to remove
backgroundColorNoNew canvas background color
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the burden of disclosure. It mentions authentication requirements, replacement vs. partial update semantics (implying destructive behavior), and how to present the returned URL. Missing details like idempotency or error behavior are not critical given the simple update model.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Four concise sentences cover purpose, operations, auth, and response formatting. The markdown example is slightly verbose but still purposeful. No filler or redundancy.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

The tool's complexity is high with 9 parameters and a rich schema, but no output schema. The description covers the main update modes, prerequisites, and the key output behavior (returned URL). It does not exhaustively describe return fields, but the URL note is sufficient for invocation.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the baseline is 3. The description only paraphrases the schema's distinctions (replace vs add/remove) without adding new parameter details. It adds no value beyond the already-rich schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool updates an existing CodePic diagram and enumerates the supported operations (rename, replace all nodes/edges, add/remove individual elements). This distinguishes it from sibling create/get tools.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Provides clear context that it operates on existing diagrams and requires API Key authentication, but does not explicitly contrast with create_diagram or other alternatives. It implies usage rather than naming exclusions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Discussions

No comments yet. Be the first to start the discussion!

Related MCP Servers

  • A
    license
    -
    quality
    B
    maintenance
    Enables AI agents to draw animated, hand-drawn diagrams on a live whiteboard through MCP tools, allowing users to visually explain concepts and edit scenes interactively.
    77
    AGPL 3.0
  • A
    license
    -
    quality
    D
    maintenance
    A shared whiteboard for you and your AI agent I wanted my AI agent and me to be able to point at the same thing. Any MCP-capable agent can read the canvas, draw on it, drop thought bubbles, animate elements, and react when you sketch something.
    1
    MIT

View all MCP Servers

Try in Browser

Your Connectors

Sign in to create a connector for this server.