Skip to main content
Glama

CodePic

by io.github.abelce

Create Diagram

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

  • Call get_shape_catalog with tag container-capable to choose among native structural containers and adaptive semantic shapes such as rectangles, circles, ellipses, diamonds, cylinders, and hexagons.

  • Parent bounds are expanded automatically using the selected shape's title and outline safe area.

  • Use absolute canvas coordinates for all nodes — child coordinates are auto-converted to parent-relative.

  • Set node name, description, and tags when later MCP/Agent reads need stable business semantics beyond visible text.

  • 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

Input Schema

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

TDQS

A4.9/5.0
Behavior5/5

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

With no annotations provided, the description carries the full behavioral burden and meets it: it discloses the API-key authentication requirement, the public view URL return, and the container-nesting behaviors (auto parent-relative coordinate conversion, automatic expansion of parent bounds, draggable-as-a-group). It also documents the rule that multiple related nodes should be wrapped in a container, which shapes agent expectations about how the tool will structure the diagram.

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 it is well-structured with bold section headers, bullet lists, and examples, and the purpose is front-loaded. It earns most of its length by covering container nesting and design guidance; however, some content (such as the extensive color hex list and design tips) is more reference material than invocation-critical and could be trimmed or moved to docs.

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 complex tool with no output schema, the description is remarkably complete: it specifies authentication, the returned artifact (public view URL), the sibling-routing rule, the container nesting model, coordinate conventions, and even formatting of the agent's reply. The only minor gap is error cases, but nothing essential for selecting and invoking the tool correctly is missing.

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 3 would be the baseline, but the description adds substantial meaning beyond the schema: it recommends semantic types (button-primary for CTA, diamond for decisions), provides a concrete color palette with hex codes, and explains the parentId usage rule and coordinate conventions. This goes well beyond the schema's field descriptions.

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 then explicitly distinguishes itself from siblings by declaring itself the default for user-described diagrams and telling the agent not to fall back to create_from_template/list_templates unless the user explicitly asked for a template. This leaves no ambiguity about what the tool does or how it differs from its siblings.

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?

It contains an explicit, bolded directive: 'THIS IS THE DEFAULT TOOL FOR ANY USER-DESCRIBED DIAGRAM,' followed by the exact conditions under which to prefer alternatives (only when the user explicitly asked for a template). It also instructs how to present the returned URL as a clickable markdown link, covering the user-facing part of usage.

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

All CodePic toolsInspect
Try in Browser
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

Glama MCP Gateway

Add one secure layer between your agents and this server.

TDQS

A4.4/5.0
Disambiguation5/5

Each tool has a distinct purpose: create, get, update, list templates, and get shape documentation. No overlapping or ambiguous functions.

Naming Consistency5/5

All tool names follow a clear verb_noun pattern (create_diagram, get_diagram, get_shape_docs, list_templates, update_diagram), with consistent use of underscores and action-first naming.

Tool Count5/5

The tool count (5 listed, though count says 6) is well within the typical 3–15 range for this domain, providing a focused set without unnecessary bloat.

Completeness3/5

The set covers create, read, and update operations, but lacks a delete tool and a way to list all diagrams (only templates are listed). This leaves gaps in the lifecycle coverage, though the core diagram creation workflow is supported.

Resources