Visual MCP
Visual MCP is an MCP server that lets you create, edit, and render structured visual diagrams as clean SVG through a scene graph, without hand-computing geometry.
Render diagrams in one call —
render_diagrambuilds and displays a full scene (architectures, networks, flows, trees, plots) and returns a stablesceneId.Use semantic elements —
node,connection,group,axis,cluster,scatter,plotLine,server,database,router,switch,computer,cloud, and more, instead of raw shapes.Automatic layout — elements without coordinates are positioned by the layout engine; connections attach to borders and keep working when elements move.
Edit conversationally —
add_element,update_element,remove_element, andgroup_elementsmake incremental changes without redrawing the whole diagram.Inspect scenes —
get_scenereturns element ids, properties, and computed positions/sizes for precise relative edits.Create and clear scenes — build diagrams incrementally with
create_scene, or restart withclear_scene.Plot data — axes define data frames; points, scatter series, clusters, and plot lines can be placed in data coordinates with clipped, labeled charts.
Re-render stored scenes —
render_sceneshows the latest state after edits.Learn from examples —
list_examplesprovides ready-to-copy scenes (network, LDA, regression, architecture, tree).Theming and customization — four built-in themes, theme overrides, colors, fonts, and canvas options.
Return SVG and interactive viewing — outputs SVG markup, an SVG URL, and supports an interactive viewer with zoom/pan/fit/copy/export.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Visual MCPdraw the architecture for a blog with React, Node, and PostgreSQL"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Visual MCP
A Model Context Protocol server that gives an LLM a structured visual layer: it describes what exists and gets back a clean, precise SVG diagram — instead of ASCII art.
What is Visual MCP?
Ask any LLM to "draw the architecture" and you get this:
+----------+ +---------+ +------------+
| React |----->| NestJS |----->| PostgreSQL |
+----------+ +---------+ +------------+
|
+-----> Redis?Box-drawing characters are a bad medium for spatial information. Alignment breaks, arrows do not reach, nothing can be edited afterwards, and the model burns reasoning on character counting.
The obvious fix — "let the model write SVG" — is worse. Then it has to compute viewBoxes, path data, arrowhead polygons, text baselines and border intersections, all by hand, all without feedback, and all again from scratch the moment the user asks for one small change.
Visual MCP removes the geometry from the model's job. The model works with a scene graph:
{
"title": "Service architecture",
"elements": [
{ "id": "frontend", "type": "node", "label": "React" },
{ "id": "backend", "type": "node", "label": "NestJS" },
{ "id": "db", "type": "database", "label": "PostgreSQL" },
{ "id": "cache", "type": "database", "label": "Redis" },
{ "id": "c1", "type": "connection", "from": "frontend", "to": "backend" },
{ "id": "c2", "type": "connection", "from": "backend", "to": "db" },
{ "id": "c3", "type": "connection", "from": "backend", "to": "cache" }
]
}Note what is not there: no coordinates, no sizes, no line endpoints, no arrowheads, no SVG. The server computes all of it — node sizes from the labels, positions from the connection graph, edges that meet the borders, arrowhead markers, text wrapping, and a viewBox that cannot clip.
And because the scene is a graph with stable ids, the next turn of the conversation is a one-line edit rather than a redraw:
"Put Redis above the backend and PostgreSQL below it." →
update_element× 2, everything else untouched.
"Now put all the infrastructure inside a box called AWS." →
group_elements, and nothing moves.
Related MCP server: Mermaid MCP Server
Architecture
ChatGPT
│ tool call: render_diagram / update_element / …
▼
MCP server src/mcp/ (transport, tools, error shaping)
│
▼
Scene graph src/scene/ (Zod schemas, validation, store, mutations)
│
├─▶ layout src/layout/ (sizes and positions for elements with no coordinates)
├─▶ semantic src/semantic/ (node/connection/axis/… ▸ primitives)
│
▼
SvgNode tree src/renderer/ (closed, allow-listed representation of an SVG document)
│
├─▶ toSvgString() ─────────────────▶ SVG returned by the MCP tools
└─▶ <SceneRenderer> ────────────────▶ React, for the interactive UIFive ideas hold this together
1. The scene graph is the artefact, SVG is only an output format.
Everything the model sends is validated into a Scene and stored. Rendering is a pure function of
that scene, so the same diagram can later be re-rendered in a different theme, or by a different
backend, without the model being involved.
2. Semantic elements compile down to primitives.
database becomes a path, an ellipse and two text blocks. connection becomes a path with a
marker. The renderer only ever sees the ten primitives — which keeps it small, and means adding
neuron, decisionTree or functionPlot later is one expander file in src/semantic/, with no
change to the schema union, the layout engine or the renderer.
3. One geometry pipeline, two backends.
The renderer's real output is an SvgNode tree, not a string. serialize() turns it into markup
for the MCP tools; <SceneRenderer> maps it to React elements for the UI. There is no second
implementation to drift, and no dangerouslySetInnerHTML anywhere in the project.
4. Errors are written for a model, not for a log file.
{
"success": false,
"error": {
"code": "ELEMENT_NOT_FOUND",
"message": "Connection 'c1' points to 'router-2' (to), which does not exist in the scene.",
"path": "c1.to",
"hint": "Existing elements you can connect: pc, switch, router-1, server."
}
}A code to branch on, a sentence that names the problem, and a hint that contains the answer. Never a stack trace.
5. Every mutation is atomic. A rejected edit leaves the stored scene byte-for-byte as it was. Without that, one bad call would corrupt the diagram for the rest of the conversation.
Deviations from the originally sketched layout
src/layout/is its own module, separate fromsrc/semantic/. Positioning and meaning-to-shape expansion are different problems, and the split is what makes swapping in Dagre or ELK later a change to one file (src/layout/flow.ts) — itsFlowItemin / centres out interface is deliberately the shape those libraries expose.SvgNodesits between the renderer and its output (idea 3 above), which is what lets the React view exist without a second renderer and without unsafe HTML injection.src/mcp/widget.tsis a dependency-free vanilla viewer, separate from the React app insrc/ui/. The ChatGPT iframe resource must be a single self-contained HTML string with no build step that could be stale or missing at runtime; the React app is the local playground. They share the same behaviour (zoom/pan/fit/copy/export) and the same allow-list.Auto-fit is on by default, so
width/heightact as hints rather than a hard canvas. This removes the most common failure mode — a model picking a canvas too small and clipping its own diagram.
Installation
git clone <this repo>
cd visual-mcp
npm installRequires Node 20+ (developed on Node 22/26).
Development
npm run dev:http # MCP server over Streamable HTTP on http://localhost:3333/mcp
npm run dev:stdio # MCP server over stdio (Claude Desktop, MCP Inspector, tunnels)
npm run dev:ui # React playground on http://localhost:5180
npm test # 128 tests
npm run typecheck
npm run build # server → dist/
npm run build:ui # playground → dist-ui/
npm run examples # render the reference scenes → examples/out/index.htmlQuick end-to-end check against a running server:
npm run dev:http &
npx tsx scripts/smoke-mcp.tsIt replays the whole target conversation — build a diagram with no coordinates, inspect it, move two nodes, wrap everything in a box — and asserts the result at each step.
Available MCP tools
Tool | What it does | When the model should reach for it |
| Builds and renders a whole scene in one call, returns a | Any request to draw, visualise, diagram, illustrate or explain visually. The default entry point. |
| Re-renders a stored scene. | After a batch of edits, to show the result. |
| Returns the scene plus the computed box of every element. | Before editing — especially for relative changes ("a bit to the right"). |
| Adds one element, optionally inside a group. | "Add a load balancer", "draw an arrow from A to B". |
| Changes only the fields given; | Every "change that" request. Never redraw for this. |
| Deletes an element, cascading its connections and labels. | "Remove the cache". |
| Wraps top-level elements in a labelled box, moving nothing. | "Put all of this inside AWS", "group these into a VPC". |
| Creates an empty canvas. | Only when assembling a large diagram incrementally. |
| Empties a scene, keeping its canvas/theme/title. | "Scrap that, let's start over". |
| Returns working example scenes and the type catalogue. | When unsure how to express something — copy and adapt. |
Every tool description states what it does, when to use it, when not to, and what each property
means, because another model reads these and decides on its own. Read-only tools carry
readOnlyHint: true and destructive ones destructiveHint: true, which hosts use to decide what
needs confirmation.
Scene schema
interface Scene {
id?: string;
title?: string;
subtitle?: string;
width?: number; // hint; autoFit grows the canvas so nothing is clipped
height?: number;
autoFit?: boolean; // default true
background?: string;
theme?: "dark" | "light" | "blueprint" | "paper";
themeOverrides?: Partial<Theme>;
layout?: "auto" | "layered" | "horizontal" | "vertical" | "grid" | "manual";
direction?: "right" | "down" | "left" | "up";
gap?: number;
padding?: number;
legend?: boolean;
elements: VisualElement[];
}Every element has id and type. Ids are stable and are how conversational editing works.
Primitives — what the renderer can draw
circle · ellipse · rectangle · line · arrow · text · polygon · polyline · path ·
group
Semantic elements — what the model should actually use
Type | Purpose |
| Labelled box. Ten shapes ( |
| Link by id: |
| Labelled container with its own layout. Boundaries like "AWS", "VLAN 10". |
| A coordinate system and a data frame. |
| Markers and lines in data coordinates when given |
| Caption that can be attached to another element by id and follows it. |
| Domain presets — a |
Layout
layout: "auto" (the default) builds a layered flow from the connection graph when there are any,
otherwise a row. Elements with explicit x/y are never moved, so the model can nudge one node
without disturbing the rest. direction controls which way the flow grows.
Data frames
An axis declares a mapping from data units to pixels; anything with frame: "<axis id>" is
placed in data coordinates, with y growing upwards as it should:
{ "id": "plot", "type": "axis", "x": 90, "y": 70, "width": 620, "height": 420,
"xRange": [0, 10], "yRange": [0, 10], "xLabel": "Feature 1", "yLabel": "Feature 2" },
{ "id": "class-a", "type": "cluster", "frame": "plot", "x": 3.4, "y": 6.6,
"count": 40, "spread": 0.8, "label": "Class A", "hull": true, "seed": 7 }Themes
Four built-in themes (dark, light, blueprint, paper), each a full palette plus a font stack
that requires no external font. Elements refer to tokens — primary, surface, muted,
danger — rather than hard-coded colours, so a whole diagram restyles without touching its
geometry. themeOverrides changes any token.
Running locally
As a library, with no MCP at all
import { renderScene } from "visual-mcp";
const svg = renderScene({
title: "Request flow",
elements: [
{ id: "client", type: "computer", label: "Client" },
{ id: "api", type: "server", label: "API" },
{ id: "c", type: "connection", from: "client", to: "api", label: "HTTPS" },
],
});As an HTTP server
npm run dev:httpRoute | |
| MCP Streamable HTTP endpoint |
| health check |
| stored scenes |
| a rendered scene |
| the interactive viewer, standalone |
The server is stateless: each request gets its own McpServer and transport, and the scene
store is the only shared state. That is what makes it safe behind a load balancer or on a
serverless platform, where two turns of one conversation may not reach the same process.
As a stdio server (MCP Inspector, Claude Desktop, Cursor)
npx @modelcontextprotocol/inspector npx tsx src/mcp/stdio.ts{
"mcpServers": {
"visual-mcp": {
"command": "node",
"args": ["/absolute/path/to/visual-mcp/dist/mcp/stdio.js"]
}
}
}Connecting to ChatGPT
ChatGPT reaches remote MCP servers over Streamable HTTP at a public HTTPS endpoint, so the server needs to be reachable from the internet. Two ways:
A. Quick test with a tunnel
npm run dev:http # http://localhost:3333/mcp
npx localtunnel --port 3333 # or: ngrok http 3333, or cloudflared tunnelB. Deploy with Docker on a VPS
docker-compose.yml runs two containers: the MCP server on port 4000 (never published to the
internet) and Caddy, which terminates TLS in front of it and renews the certificate
automatically.
Certificates are issued via the DNS-01 challenge, not HTTP-01. That is the key design decision, and it exists for a reason: on this VPS ports 80 and 443 belong to an unrelated stack that must not be modified. HTTP-01 always validates against port 80 and TLS-ALPN against 443 — both fixed by RFC 8555 — so neither is available. DNS-01 proves domain control with a TXT record instead and needs no inbound port at all, which is what makes the two stacks able to coexist untouched.
That requires a DNS provider with an API. DuckDNS is free and
supported; sslip.io is not an option here because it has no API to write records to.
1. Create the hostname. Log in at duckdns.org, add a subdomain (e.g. visual-mcp-dan)
and point it at the VPS IP. Copy the account token shown at the top of the page.
2. Configure:
cp .env.example .env
# MCP_DOMAIN=visual-mcp-dan.duckdns.org
# DUCKDNS_TOKEN=<the token>3. Open port 500/tcp — the only port this deployment needs, in both the VPS firewall and the provider's security list:
sudo ufw allow 500/tcp4. Build and start. The Caddy image is built locally from caddy/Dockerfile, because the
official image ships no DNS providers and dns duckdns would not exist without the module:
docker compose up -d --build
docker compose logs -f caddy | grep -iE "certificate obtained|error"
curl https://$MCP_DOMAIN:500/healthThe MCP URL is then https://<MCP_DOMAIN>:500/mcp, and it is permanent: restart: unless-stopped survives reboots, and certificates live in the caddy_data volume, so
renewals persist across docker compose down/up. Only docker compose down -v wipes them.
Renewals need the DuckDNS token to stay valid — nothing else.
PUBLIC_URL and ALLOWED_HOSTS are derived from MCP_DOMAIN and MCP_HTTPS_PORT by
Compose. Both must carry the port: PUBLIC_URL because svgUrl links would otherwise point
at 443, and ALLOWED_HOSTS because the SDK compares the raw Host header — which reads
<domain>:500 on a non-standard port — as an exact string.
Without Compose
docker build -t visual-mcp .
docker run -d --name visual-mcp --restart unless-stopped -p 127.0.0.1:4000:4000 \
-e PUBLIC_URL=https://your-host -e ALLOWED_HOSTS=your-host visual-mcpThen point any reverse proxy at http://127.0.0.1:4000. The container runs as the non-root
node user, ships a /health HEALTHCHECK and carries only production dependencies.
Managed platforms (Fly.io, Railway, Render, Cloud Run) work too — they inject their own
PORT, which the server honours.
Then, in ChatGPT
Enable developer mode. It is available on ChatGPT Business, Enterprise and Edu on the web. An admin enables it in Workspace Settings → Permissions & Roles → Connected Data → Developer mode / Create custom MCP connectors.
Settings → Connectors → Create / Advanced → Developer mode → Add custom connector.
Fill in:
Name:
Visual MCPMCP server URL:
https://<your-host>/mcpAuthentication:
No authentication(this server ships without auth — see Security)
Save. ChatGPT calls
tools/listimmediately; you should see the ten tools listed.In a new chat, enable the connector and ask for a diagram.
The server also registers an MCP Apps UI resource (ui://visual-mcp/scene.html,
text/html;profile=mcp-app), attached to the rendering tools through
_meta.ui.resourceUri and the ChatGPT alias _meta["openai/outputTemplate"]. Where that is
supported, the diagram appears in an interactive frame with zoom, pan, fit, copy and export;
elsewhere the tools still return the SVG in structuredContent, so the server degrades gracefully.
Examples
npm run examples renders all five to examples/out/index.html, and list_examples serves them to
the model.
1. Network — examples/out/network.svg
Domain presets and automatic left-to-right layout. computer → switch → router → server,
with VLAN captions on the links. No coordinates anywhere in the source scene.
2. LDA — examples/out/lda.svg
An axis data frame, two seeded clusters with soft hulls, a dashed decision boundary and the LDA
direction — all in data coordinates, both lines clipped to the plot.
3. Regression — examples/out/regression.svg
Axis, a scatter series and a fitted plotLine with extend: true, on the light theme.
4. Software architecture — examples/out/architecture.svg
React → REST API → { Redis, PostgreSQL }, with the two stores inside a labelled group
("Data layer") that the connections route into.
5. Binary tree — examples/out/tree.svg
Seven circular nodes and six connections; the layered layout flowing down produces the tree.
Prompts to try in ChatGPT
Draw the architecture where React talks to NestJS, NestJS uses PostgreSQL and also queries Redis.
Now put Redis above the backend and the database below it.
Now put all the infrastructure inside a box called AWS.
Make PostgreSQL bigger and give it a purple border.
Explain Linear Discriminant Analysis visually.
Show me graphically how linear regression works.
Draw a network where a PC in VLAN 20 reaches a server in VLAN 10 through a switch and a router.
Draw a balanced binary tree with 7 nodes.
Explain the TCP three-way handshake as a diagram.
Diagram merge sort on [5, 2, 9, 1].Security
The threat model is simple: everything the server renders originated in a language model, and that output may itself carry text the user pasted from somewhere else. So nothing model-derived is ever treated as code.
Closed schema. Only the twenty-four known element types parse. Colours must match a hex/rgb/hsl/keyword/token grammar —
url(javascript:…)is rejected at validation. Path data must match SVG path commands and numbers, nothing else.Allow-listed output. The renderer can only emit tags and attributes from two explicit lists in
src/renderer/svgNode.ts. There is noon*, nohref, nostyle, noclass, no<foreignObject>, no<script>— the model cannot express them, and the serialiser would drop them anyway.Escaping. Text content and attribute values are XML-escaped on the way out.
No
dangerouslySetInnerHTML, noeval, nonew Functionanywhere in the project. The React view builds elements from theSvgNodetree; the ChatGPT widget parses the SVG and rebuilds it node by node against the same allow-lists, so even a compromised server cannot get script into that frame.Bounded input. Element counts, string lengths, point counts, path length and stored scenes are all capped; scenes are evicted oldest-first.
No stack traces to the model. Every handler is wrapped; anything unexpected becomes
INTERNAL_ERRORwith a short message.
Tests in tests/security.test.tsx assert each of these.
Not included, by design: authentication. The server exposes no secrets and touches no external
system, but a public deployment is a public scene store. Put it behind your platform's auth, or add
OAuth via the SDK's auth helpers, before exposing it to anyone but yourself. Set ALLOWED_HOSTS to
turn on DNS-rebinding protection when it is reachable from a browser.
Current limitations
Text metrics are estimated, not measured — there is no font engine on the server. Widths are within a few percent for the bundled sans-serif stacks, which is enough for boxes and wrapping, but an unusual font or a lot of CJK will size slightly loose.
The layout engine is intentionally small. Longest-path layering with rank centring. It has no crossing minimisation and no overlap resolution, so a dense graph (roughly 25+ nodes with many cross-links) will produce crossings a real engine would avoid. The interface is Dagre-shaped for exactly this reason.
Tree layouts are not child-centred; a parent sits at the centre of its rank, not above the midpoint of its children.
render_diagram's JSON Schema is about 50 KB (~12k tokens) because it teaches the whole element vocabulary. The other nine tools total ~5 KB. That is a deliberate trade: the model gets per-field documentation and rarely needs a repair round trip.Inside a group with automatic layout, children's explicit
x/yare ignored — the layout wins. Uselayout: "manual"on the group to position children yourself.Storage is in-memory. Scenes do not survive a restart, and with multiple replicas a scene lives on whichever instance created it. The
SceneStoreinterface exists so this is one class to replace.Static output. No animation, no 3D, no maths expression parser yet — see below.
Roadmap
Next
Persistent
SceneStore(SQLite first) — the interface is already in place.Undo/redo. Every mutation is already recorded as a
SceneMutation; this is a matter of storing the inverse.Dagre or ELK behind
src/layout/flow.tsfor dense graphs, with the small engine as the default.Child-centred tree layout.
Maths — the axis data frame is the foundation; each of these is one expander in
src/semantic/, with no renderer change:
functionPlot ({ "expression": "x^2", "domain": [-5, 5] }), vector, matrix, plane,
distribution, projection, decisionBoundary and regressionLine as named aliases of
plotLine.
Diagram vocabulary — neuron, neuralNetwork, decisionTree, sequenceDiagram, stateMachine,
gantt, swimlane.
Animation — { "animation": { "type": "flow", "duration": 1200 } } on a connection, emitted as
SVG SMIL or CSS so it stays declarative and needs no runtime. Packets moving along a link, a request
travelling through a pipeline, an algorithm stepping through a structure.
Other renderers — the resolve pipeline already ends in a backend-agnostic tree. A Scene with
kind: "3d" and { "type": "sphere", "position": [0, 1, 0] } would select a Three.js backend
instead of the SVG one; a Canvas backend would serve very large scatter plots. No change to the MCP
layer.
License
MIT
Available Tools
10 toolsadd_elementAdd an elementA
Add one element to a scene that already exists.
USE THIS when the user wants something new in a diagram you already drew: "add a load balancer", "put a Redis cache next to the API", "draw an arrow from A to B".
Call get_scene first if you are not certain which ids exist. To link the new element to an existing one, make a second call with an element of type 'connection' referencing the two ids - the geometry is computed for you.
Omit x/y and the layout engine places it. Set parentId to put it inside a group.
This does not display anything. Call render_scene once your edits are done.
| Name | Required | Description | Default |
|---|---|---|---|
| element | Yes | The element to add: an object with a unique `id`, a `type`, and the properties of that type - exactly the same shape as the entries of `elements` in render_diagram. Types: node, connection, group, axis, point, scatter, cluster, plotLine, label, server, database, router, switch, computer, cloud, circle, ellipse, rectangle, line, arrow, text, polygon, polyline, path. Example: { "id": "cache", "type": "database", "label": "Redis" }. | |
| sceneId | Yes | Id of the scene to work on, as returned by render_diagram or create_scene. | |
| parentId | No | Id of a 'group' element to nest this inside. |
Output Schema
| Name | Required | Description |
|---|---|---|
| error | No | Present only when success is false. |
| sceneId | No | |
| success | Yes | |
| elementId | No | |
| elementCount | No | Top-level elements in the scene after the add. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Beyond the annotations (which are all false and give no safety hints), the description richly discloses behavior: 'Omit x/y and the layout engine places it', 'the geometry is computed for you', and 'This does not display anything. Call render_scene once your edits are done.' It also explains that parentId nests the element inside a group. These are meaningful behavioral traits not present in annotations or schema descriptions.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured and front-loaded: a one-sentence summary, a bold 'USE THIS' callout, then prerequisites, special cases, and rendering note. Every sentence adds unique value—no fluff or repetition of schema content. It is compact despite covering multiple scenarios (first-time adds, connections, layout, grouping, rendering).
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The description is remarkably complete for a tool with nested objects and 3 parameters. It covers prerequisites (get_scene), the exact workflow for linking elements (connection type), layout behavior (omit x/y), grouping (parentId), and the follow-up step (render_scene). Since an output schema exists, the lack of return-value explanation is acceptable. The tool feels self-contained for an agent to invoke successfully.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so parameters are well-documented in the schema. The tool description nevertheless adds significant value: it explains that the element object is 'exactly the same shape as the entries of elements in render_diagram', provides a concrete example, and clarifies behavior of x/y (omit for auto-layout). This goes beyond the schema, though the core parameter meanings are already covered, so a 4 is appropriate rather than 5.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with a clear, specific statement: 'Add one element to a scene that already exists.' This uses a strong verb ('Add'), defines the resource ('element'), and the target ('scene'). It distinguishes itself from sibling tools like update_element, remove_element, and group_elements by focusing solely on adding new elements. Concrete usage examples ('add a load balancer', 'draw an arrow from A to B') further clarify the purpose.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicit 'USE THIS' guidance tells the agent exactly when to apply the tool: 'when the user wants something new in a diagram you already drew.' It also provides alternative and prerequisite actions: 'Call get_scene first if you are not certain which ids exist' and 'Call render_scene once your edits are done.' The connection workflow is explained with 'make a second call with an element of type 'connection'', giving clear usage boundaries.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
clear_sceneEmpty a sceneADestructiveIdempotent
Remove every element from a scene while keeping its id, canvas, theme and title.
USE THIS when the user wants to restart the drawing but keep talking about the same diagram: "scrap that, let's do it differently".
DO NOT use it for corrections - update_element and remove_element exist for that, and they preserve everything the user already approved.
| Name | Required | Description | Default |
|---|---|---|---|
| sceneId | Yes | Id of the scene to work on, as returned by render_diagram or create_scene. |
Output Schema
| Name | Required | Description |
|---|---|---|
| error | No | Present only when success is false. |
| sceneId | No | |
| success | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description adds significant behavioral context beyond what annotations provide. Annotations already indicate destructiveHint=true, so the destructive nature is known. But the description clarifies exactly what is destroyed (every element) and what is preserved (id, canvas, theme, title). It also notes that this is idempotent (idempotentHint=true is already in annotations). The only missing detail is whether undo is possible or what the output schema returns, but the output schema exists to specify that.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is three sentences with zero wasted words. The first sentence defines purpose and scope concisely. The second and third sentences provide usage guidelines and sibling differentiation in a clear, front-loaded manner. The 'USE THIS when' and 'DO NOT use it' structure is exceptionally clear.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the simple tool with only one parameter, clear annotations, and an output schema, the description is complete. It covers purpose, scope, preservation details, usage context, and exclusions. There is no missing critical information for an AI agent to correctly select and invoke this tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% for the single parameter, and the schema already documents that sceneId must match a specific pattern and length, and gives a helpful description. The description adds context by referring to 'as returned by render_diagram or create_scene', which helps in understanding how to obtain the correct ID. This surpasses the baseline of 3.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool removes every element from a scene while preserving its id, canvas, theme, and title. It specifies the verb 'Remove every element' and the resource 'scene', and distinguishes itself from siblings like update_element and remove_element by describing its unique behavior of clearing all elements.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly tells when to use the tool ('when the user wants to restart the drawing but keep talking about the same diagram') and provides a concrete user utterance ('scrap that, let's do it differently'). It also explicitly tells when NOT to use it ('DO NOT use it for corrections') and names the appropriate alternatives (update_element and remove_element).
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
create_sceneCreate an empty sceneA
Create a new, empty scene and get back its id.
USE THIS when you want to build a diagram incrementally - create the canvas, then add elements one at a time with add_element, then call render_scene when it is complete.
DO NOT use this when you already know the whole picture: render_diagram does the same job in one round trip and is almost always the better choice. Incremental building is only worth it for large diagrams you are assembling as the conversation goes.
Nothing is shown to the user until you call render_scene.
| Name | Required | Description | Default |
|---|---|---|---|
| id | No | Stable, meaningful id (e.g. 'backend'). Reuse it later to update or remove this element. | |
| gap | No | Spacing used by the automatic layout. Default 90. | |
| theme | No | Visual theme. 'dark' (default) is a modern technical look, 'light' is for documents, 'blueprint' is a blue schematic, 'paper' is warm and printable. | |
| title | No | Diagram title, drawn at the top. Keep it short - it is a caption, not a sentence. | |
| width | No | Canvas width in pixels. Default 960. Use 1200+ for wide flows. | |
| height | No | Canvas height in pixels. Default 600. | |
| layout | No | How elements without explicit x/y are placed. 'auto' (default) builds a layered flow from the connections when there are any, otherwise a row. 'layered' forces the flow layout, 'horizontal'/'vertical'/'grid' force a simple arrangement, 'manual' means you provide every x/y yourself. | |
| legend | No | Show a legend built from the `label` of scatter/cluster series. Default true. | |
| autoFit | No | Grow the canvas so nothing is clipped. Default true - leave it on and stop worrying about exact sizes. | |
| padding | No | Margin around the drawing. Default 48. | |
| subtitle | No | Optional second line under the title. | |
| direction | No | Direction the layered flow grows in. Default 'right'. | |
| background | No | Canvas background. Defaults to the theme background. | |
| themeOverrides | No | Optional palette overrides. Only set what you actually want to change. |
Output Schema
| Name | Required | Description |
|---|---|---|
| message | Yes | |
| sceneId | Yes | |
| success | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=false and destructiveHint=false. The description adds that the scene is empty and that user sees nothing until render_scene is called. This context about the multi-step workflow goes beyond the annotations without contradicting them.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is extremely concise: three short paragraphs. The first sentence states purpose, the second gives usage direction, the third provides an important behavioral note. Every sentence earns its place with zero padding.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool has 14 parameters (fully documented in the schema) and an output schema, the description does not need to cover those. It provides the essential workflow context—that this is part of a multi-step process culminating in render_scene—and explains the trade-off with render_diagram, which is sufficient for an agent to decide when to invoke.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%—every parameter has a detailed description in the schema. The tool description does not add new parameter-level information but also does not repeat what the schema provides, so baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with 'Create a new, empty scene and get back its id,' which is a specific verb+resource statement. It clearly distinguishes from siblings like 'render_diagram' (alternative for known pictures) and 'add_element' (incremental step).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicit 'USE THIS' section describes when to use (incremental building) and 'DO NOT use this' section points to the sibling 'render_diagram' as the better choice for one-shot creation. Also clarifies that nothing is shown until 'render_scene' is called.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_sceneInspect a sceneARead-onlyIdempotent
Return the current structured description of a scene: every element with its id, type and properties, plus the position and size each one actually ended up with.
USE THIS BEFORE EDITING whenever you are not sure of the current state - which ids exist, what a node is called, where it sits, what is already connected. Reading first is what makes small edits possible instead of redrawing the diagram from scratch.
The layout field gives the computed box (x, y, width, height) of every element,
including ones you never gave coordinates to. Those are the numbers to use when the user
asks for something relative: "a bit to the right", "above the backend", "same width as X".
This does not display anything.
| Name | Required | Description | Default |
|---|---|---|---|
| sceneId | Yes | Id of the scene to work on, as returned by render_diagram or create_scene. | |
| elementId | No | Return just this one element instead of the whole scene. | |
| includeLayout | No | Include the computed box of every element. Default true. |
Output Schema
| Name | Required | Description |
|---|---|---|
| ids | No | Every element id in the scene. |
| error | No | Present only when success is false. |
| scene | No | The full scene, ready to be edited or re-sent. |
| layout | No | Map of element id to { x, y, width, height }. |
| element | No | |
| history | No | The last few mutations applied to this scene. |
| sceneId | No | |
| success | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, idempotentHint=true, and destructiveHint=false. The description adds valuable behavioral context: the layout field includes computed boxes for elements never given coordinates, and it warns that the tool does not display anything. This goes beyond the safety profile provided by annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is compact and front-loaded: it states the main function in the first sentence, then provides targeted usage guidance and a caveat. Every sentence earns its place, and the bolded 'USE THIS BEFORE EDITING' plus the final 'This does not display anything' are high-signal phrases with no filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With full annotations, a complete input schema (100% coverage), and an output schema, the description supplies all necessary operational context: when to use, what to expect, and a key caveat about non-display. No critical gaps remain for a read-only inspection tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, with clear descriptions for all three parameters, giving a baseline of 3. The description adds extra meaning by explaining the layout field operationally—'the computed box (x, y, width, height) of every element, including ones you never gave coordinates to'—which clarifies how to use parameters for relative positioning.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb and resource: 'Return the current structured description of a scene' and enumerates the exact contents (id, type, properties, position, size). It also clearly distinguishes itself from rendering siblings with the explicit note 'This does not display anything.'
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly states when to use it: 'USE THIS BEFORE EDITING whenever you are not sure of the current state.' It also implies exclusions (not for display) but does not explicitly name alternative tools like render_diagram, so it stops short of a full 5.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
group_elementsGroup elements into a labelled boxA
Wrap existing top-level elements in a labelled container.
USE THIS for "put all of this inside a box called AWS", "group these services into a VPC", "draw a boundary around the data layer", "show which parts are in VLAN 10".
The members keep their ids, and every connection to or from them keeps working - including connections that cross the boundary.
Set layout to re-arrange the members inside the box ('vertical' stacks them, 'horizontal'
puts them in a row, 'grid' wraps them). Leave it out to keep their current arrangement.
Only top-level elements can be grouped. To nest a group inside another group, create the inner one first, then group it together with its siblings.
| Name | Required | Description | Default |
|---|---|---|---|
| fill | No | Background colour. | |
| label | No | Text drawn on the box, e.g. 'AWS'. | |
| layout | No | Re-arrange the members. Default 'manual' (keep their current positions). | |
| stroke | No | Border colour. | |
| groupId | Yes | Id for the new group, e.g. 'aws' or 'vlan-10'. | |
| sceneId | Yes | Id of the scene to work on, as returned by render_diagram or create_scene. | |
| elementIds | Yes | Ids of the top-level elements to move inside the box. |
Output Schema
| Name | Required | Description |
|---|---|---|
| error | No | Present only when success is false. |
| groupId | No | |
| members | No | |
| sceneId | No | |
| success | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description goes well beyond the annotations (which only mark non-read-only/non-destructive) by detailing behavioral traits: 'The members keep their ids, and every connection to or from them keeps working - including connections that cross the boundary.' It also explains how the layout parameter affects arrangement and the default behavior ('manual' keeps current positions). This provides rich behavioral context the agent needs for safe invocation.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise yet comprehensive, with only 9 sentences. It front-loads the core purpose, then provides usage examples, behavioral guarantees, parameter guidance, and a crucial limitation for nesting. Every sentence adds unique value without redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (7 parameters, 3 required, 100% schema coverage, output schema present), the description is complete. It explains the grouping behavior, parameter effects, constraints ('Only top-level elements can be grouped'), and nesting strategy. There are no gaps in understanding what the tool does or how to use it correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
With 100% schema description coverage, the schema already documents all parameters thoroughly. The description adds value by explaining the layout parameter options in natural language ('vertical stacks them, horizontal puts them in a row, grid wraps them') and clarifying the scope of elementIds ('top-level elements'). However, it doesn't add meaning to all 7 parameters (e.g., fill, stroke, sceneId are not elaborated beyond schema).
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with a specific verb+resource ('Wrap existing top-level elements in a labelled container'), immediately clarifying what the tool does. It is easily distinguishable from siblings like 'add_element' (which adds individual elements, not grouping) and 'render_diagram' (which visualizes the whole scene). The examples concretely illustrate its scope and differentiate it from other tools.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides explicit usage examples ('put all of this inside a box called AWS'), including when to use it ('group these services into a VPC') and a clear limitation ('Only top-level elements can be grouped') with guidance on how to handle nesting ('create the inner one first, then group it together with its siblings'). This effectively tells the agent when and how to use this tool over alternatives.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_examplesShow example scenesARead-onlyIdempotent
Return complete, working example scenes for common kinds of diagram.
USE THIS when you are unsure how to express something with this server: which element type fits, how data frames work, how to nest a group. Copy the closest example and adapt it - that is faster and more reliable than guessing at the schema.
Call it with no arguments for the catalogue, or with name for one full scene you can
pass straight to render_diagram.
Available: network, lda, regression, architecture, tree.
| Name | Required | Description | Default |
|---|---|---|---|
| name | No | Return the full scene for this example. Omit for the catalogue. |
Output Schema
| Name | Required | Description |
|---|---|---|
| scene | No | |
| success | Yes | |
| examples | No | |
| elementTypes | No |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, idempotentHint=true, and destructiveHint=false, so the safety profile is clear. The description adds the behavioral insight that calling with 'name' returns a full renderable scene, which goes beyond the schema. However, it does not detail what the output looks like or that it should be passed to render_diagram, though the token 'render_diagram' hints at integration. With annotations covering safety, a score of 3 is appropriate.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise with no wasted words. It front-loads the core purpose, immediately follows with usage guidance, and ends with a clear list of available examples. Every sentence contributes meaning.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's low complexity (1 parameter, no required ones, enums documented, output schema exists), the description is largely complete. It explains the tool's role, how to invoke it, and the available options. A minor gap is not explicitly stating that the output scene is meant for render_diagram, but the sibling context and the phrase 'pass straight to render_diagram' cover this adequately.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so the schema already documents the single parameter 'name' with enum values. The description adds value by explaining the two usage modes (no args vs with name) and lists the available examples in the enum. However, it repeats what the enum provides, offering only incremental context. Baseline 3 is correct.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly defines the tool's purpose with a specific verb-resource pair: 'Return complete, working example scenes.' It distinguishes the tool from siblings by stating these are examples to help when unsure about schema usage, unlike render_diagram or get_scene which serve different functions.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly states when to use this tool ('when you are unsure how to express something'), advises against alternatives ('guessing at the schema'), and provides a behavioral tip ('Copy the closest example and adapt it - that is faster and more reliable'). It also clarifies the two calling modes: no arguments for catalogue, or with name for a full scene.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
remove_elementRemove an elementADestructiveIdempotent
Delete one element from a scene.
USE THIS for "remove the cache", "delete that arrow", "drop the second database".
Connections pointing at the element, and labels attached to it, are deleted with it by
default - otherwise the scene would keep dangling references. Set cascade to false only
if you plan to repair those references yourself in the same turn.
Removing a 'group' also removes everything inside it. To keep the children, update the
group instead and set frame to false.
| Name | Required | Description | Default |
|---|---|---|---|
| cascade | No | Also remove connections and labels attached to it. Default true. | |
| sceneId | Yes | Id of the scene to work on, as returned by render_diagram or create_scene. | |
| elementId | Yes | Id of the element to remove. |
Output Schema
| Name | Required | Description |
|---|---|---|
| error | No | Present only when success is false. |
| removed | No | Every id that was deleted, including cascaded ones. |
| sceneId | No | |
| success | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Beyond annotations (destructiveHint=true), the description details the cascade behavior, deletion of connections and labels, and implications for groups. It warns about dangling references and when to set cascade=false, providing rich behavioral insight.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured: opening purpose statement, usage examples, behavioral detail, and a specific note on groups. Every sentence adds value, no fluff, and it's appropriately compact for the complexity.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's destructive nature and edge cases (dependencies, groups), the description covers all necessary aspects. It explains when to use, side effects, parameter nuances, and alternative actions. With an output schema present, no return-value explanation is needed.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema covers all parameters at 100%, so baseline is 3. The description adds value by explaining cascade semantics in depth (when to use false) and the group removal behavior, which goes beyond the schema's simple descriptions.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states 'Delete one element from a scene' with a specific verb and resource. It distinguishes from siblings by giving usage examples like 'remove the cache' and contrasts with add_element/update_element. The purpose is unambiguous and well-scoped.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly tells the agent when to use it with 'USE THIS for...' and provides examples. It also gives guidance on when not to use cascade and advises updating the group instead to keep children. This is excellent context for selecting the tool over alternatives.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
render_diagramRender a diagramA
Create and render a structured visual diagram as SVG, in a single call.
USE THIS whenever the user asks to draw, sketch, visualise, diagram, illustrate, map out, show graphically, explain visually, or represent something spatially: architectures, network topologies, flows, pipelines, data structures, algorithms, state machines, relationships, plots, distributions, classifiers, or any concept where position and connection carry meaning.
ALWAYS PREFER THIS OVER ASCII ART, box-drawing characters, Markdown tables used as layout, or hand-written SVG/Mermaid. Those are unreliable and hard to read; this tool produces a precise, styled picture and the user sees it directly.
HOW TO USE IT WELL:
Describe WHAT exists, not WHERE it goes. Give elements ids and labels and omit x/y: the layout engine positions them from the connections. Only set x/y when the user asks for a specific arrangement, or for plots built on an
axis.Link things with
{ type: 'connection', from: '<id>', to: '<id>' }. Never compute x1/y1/x2/y2 for a link between elements, and never draw arrowheads by hand.Use semantic types (
node,database,server,router,switch,computer,cloud,group,axis,cluster,scatter,plotLine,label) before reaching for raw primitives (circle,rectangle,line,arrow,text,path, ...).Canvas size is optional: the drawing is auto-fitted so nothing is ever clipped.
DO NOT use this tool for: plain prose answers, code, tables of numbers, or when the user explicitly asked for text only.
Returns a sceneId. Keep it: later edits go through update_element / add_element /
remove_element on that id instead of rebuilding the whole scene.
| Name | Required | Description | Default |
|---|---|---|---|
| gap | No | Spacing used by the automatic layout. Default 90. | |
| theme | No | Visual theme. 'dark' (default) is a modern technical look, 'light' is for documents, 'blueprint' is a blue schematic, 'paper' is warm and printable. | |
| title | No | Diagram title, drawn at the top. Keep it short - it is a caption, not a sentence. | |
| width | No | Canvas width in pixels. Default 960. Use 1200+ for wide flows. | |
| height | No | Canvas height in pixels. Default 600. | |
| layout | No | How elements without explicit x/y are placed. 'auto' (default) builds a layered flow from the connections when there are any, otherwise a row. 'layered' forces the flow layout, 'horizontal'/'vertical'/'grid' force a simple arrangement, 'manual' means you provide every x/y yourself. | |
| legend | No | Show a legend built from the `label` of scatter/cluster series. Default true. | |
| autoFit | No | Grow the canvas so nothing is clipped. Default true - leave it on and stop worrying about exact sizes. | |
| padding | No | Margin around the drawing. Default 48. | |
| elements | Yes | Everything in the picture. Order matters: later elements are drawn on top. | |
| subtitle | No | Optional second line under the title. | |
| direction | No | Direction the layered flow grows in. Default 'right'. | |
| background | No | Canvas background. Defaults to the theme background. | |
| themeOverrides | No | Optional palette overrides. Only set what you actually want to change. |
Output Schema
| Name | Required | Description |
|---|---|---|
| svg | No | The rendered SVG markup. |
| title | No | |
| width | Yes | |
| format | Yes | |
| height | Yes | |
| svgUrl | No | Direct link to the rendered SVG, when deployed. |
| sceneId | Yes | Use this id with get_scene / update_element / add_element. |
| success | Yes | |
| elementCount | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations declare readOnlyHint=false, destructiveHint=false, idempotentHint=false, openWorldHint=false. The description goes beyond these by disclosing specific behavioral traits: 'the layout engine positions them from the connections', 'Canvas size is optional: the drawing is auto-fitted', 'Order matters: later elements are drawn on top', and 'Returns a sceneId. Keep it: later edits go through update_element / add_element / remove_element on that id.' This is rich context beyond just the boolean hints.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is front-loaded with the essential purpose in the first sentence, then branches into use cases, usage rules, best practices, and exclusions. It is quite long but every section earns its place—the 'HOW TO USE IT WELL' section is especially valuable for correct tool invocation. One minor redundancy: 'DO NOT use this tool for: plain prose answers, code, tables of numbers, or when the user explicitly asked for text only' could be slightly tighter, but overall it's well-structured and efficient for the complexity.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the high complexity (14 params, nested objects, 21 element types), the description is remarkably complete. It covers creation, layout guidance, element semantics, positioning philosophy, return value ('Returns a sceneId'), and lifecycle ('later edits go through update_element / add_element / remove_element'). An output schema exists, so return value details don't need to be in the description. The description fully equips an agent to invoke this tool correctly across a wide range of diagram types.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so baseline is 3. The description adds significant meaning beyond the schema: it explains layout philosophy ('Describe WHAT exists, not WHERE it goes', 'omit x/y: the layout engine positions them'), provides best-practice usage for connections ('Link things with { type: 'connection', from: '<id>', to: '<id>' }'), lists semantic element types to prefer, and gives theme descriptions (''dark' (default) is a modern technical look'). This goes well above the baseline.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description explicitly states 'Create and render a structured visual diagram as SVG, in a single call.' It lists specific use cases like architectures, network topologies, flows, plots, etc., and distinguishes this tool from alternatives like ASCII art, Mermaid, or manual SVG by asserting 'ALWAYS PREFER THIS OVER...'. The verb+resource combo is very specific, and the guidance on when to use it versus parents like add_element or create_scene is clear.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description includes a 'USE THIS whenever the user asks...' block listing numerous contexts (visualize, map out, diagram, etc.) and a 'DO NOT use this tool for' block excluding plain prose, code, or pure-text requests. It also advises 'ALWAYS PREFER THIS OVER ASCII ART, box-drawing characters...' and mentions alternatives ('later edits go through update_element / add_element / remove_element'). This provides comprehensive when-to-use and when-not-to-use guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
render_sceneRender an existing sceneARead-onlyIdempotent
Render a stored scene and show it to the user.
USE THIS after a batch of add_element / update_element / remove_element / group_elements calls, to display the updated diagram. It is the last step of every edit.
This never changes the scene - it only draws what is currently in it. For a brand new diagram use render_diagram instead, which builds and shows it in one call.
| Name | Required | Description | Default |
|---|---|---|---|
| sceneId | Yes | Id of the scene to work on, as returned by render_diagram or create_scene. |
Output Schema
| Name | Required | Description |
|---|---|---|
| svg | No | The rendered SVG markup. |
| error | No | Present only when success is false. |
| title | No | |
| width | No | |
| format | No | |
| height | No | |
| svgUrl | No | Stable link to the rendered SVG, when deployed. |
| sceneId | No | |
| success | Yes | |
| elementCount | No |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already provide readOnlyHint=true, idempotentHint=true, destructiveHint=false. The description adds value by explaining the tool 'never changes the scene - it only draws what is currently in it', which reinforces the behavioral contract beyond the annotations. A slight deduction is that it doesn't mention any potential rendering delays or failure modes.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is extremely concise with only three sentences, all front-loaded with the core purpose. Every sentence adds value: purpose, usage guidelines, and exclusion of alternatives. No wasted words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool has 1 parameter with full schema coverage, an output schema, and comprehensive annotations, the description is complete. It provides all necessary context for an agent to select and invoke this tool correctly: purpose, usage flow, behavioral safety, parameter source, and sibling differentiation.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
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 adds some value by mentioning the sceneId is 'as returned by render_diagram or create_scene', providing context on how to obtain valid IDs. However, it doesn't add new meaning about the parameter format beyond the schema's pattern.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states this tool renders a stored scene and shows it to the user. It uses specific verbs ('render', 'show', 'display') and identifies the resource ('stored scene', 'updated diagram'), distinguishing it from siblings like render_diagram which builds a new diagram.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly tells when to use this tool: after a batch of editing calls (add_element, update_element, etc.) as the last step of every edit. It also clearly states when NOT to use it: for brand new diagrams, use render_diagram instead. This provides excellent context for an AI agent to decide.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
update_elementUpdate an elementAIdempotent
Change properties of one element. Only the fields you send are touched; everything else in the scene stays exactly as it is.
USE THIS for every 'change that' request: move it, resize it, recolour it, rename its label, make a link dashed, add a caption to a connection. For a relative move like "a bit to the right", read the current position with get_scene and send the new value.
DO NOT call render_diagram again to change one thing. That throws away the scene id, the layout and everything the user already accepted.
id and type cannot be changed - remove and re-add the element if you truly need that.
Send null as a value to clear an optional property; for example { "x": null, "y": null }
hands the element back to the automatic layout.
Nothing is displayed until you call render_scene.
| Name | Required | Description | Default |
|---|---|---|---|
| changes | Yes | Properties to set. Examples: { "x": 420 } to move, { "label": "PostgreSQL 16" } to rename, { "fill": "primary", "emphasis": "strong" } to highlight, { "dash": "dashed" } on a connection, { "width": 240, "height": 120 } to resize. null clears an optional property. | |
| sceneId | Yes | Id of the scene to work on, as returned by render_diagram or create_scene. | |
| elementId | Yes | Id of the element to change. |
Output Schema
| Name | Required | Description |
|---|---|---|
| error | No | Present only when success is false. |
| element | No | The element after the change. |
| sceneId | No | |
| success | Yes | |
| elementId | No |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The annotations already mark destructiveHint=false and readOnlyHint=false, so mutation is expected. The description goes far beyond by explaining partial update semantics ('Only the fields you send are touched'), immutability of id and type, how to clear properties with null, and the critical fact that nothing is displayed until render_scene is called. No contradiction with annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is four paragraphs, each focused on a distinct aspect (what the tool does, use-cases, anti-patterns, edge cases/immutability/clearing, and rendering dependency). Every sentence serves a purpose; no wasted words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (3 params, all required, one being a nested object), the description fully covers usage, limitations, behavioral nuances, and integration with sibling tools. An output schema exists, so return values are not needed in the description.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, but the description adds enormous value: it explains how to use the `changes` parameter with concrete examples, clarifies that null clears optional properties, and eliminates ambiguity around partial updates. The schema itself is well-described, but the description contextualizes the schema's static definitions into actionable guidance.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses the specific verb 'Change properties' targeting 'one element', clearly distinguishing it from sibling tools like add_element or remove_element. It also explicitly calls out what it does and does not do, making its purpose unmistakable.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides excellent usage guidance: it tells when to use this tool ('USE THIS for every change that request'), provides examples of specific changes, and explicitly tells when NOT to use alternatives ('DO NOT call render_diagram again to change one thing'). It also gives a relative-move workaround using get_scene.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
10 tool updates
v0.1.0- First observed
add_element - First observed
clear_scene - First observed
create_scene - First observed
get_scene - First observed
group_elements - First observed
list_examples - First observed
remove_element - First observed
render_diagram - First observed
render_scene - First observed
update_element
TDQS
Each tool targets a distinct phase of the diagram lifecycle: create-and-render, render-existing, inspect, mutate, group, clear, and example lookup. The descriptions clearly separate render_diagram from create_scene/render_scene and get_scene from render_scene, so an agent should not misselect.
All tool names follow a consistent verb_noun pattern: render_diagram, get_scene, add_element, update_element, remove_element, group_elements, clear_scene. The convention is uniform and predictable across the entire set.
10 tools is well-scoped for a diagramming server: one call for whole diagrams, plus granular create/read/update/delete/render/group operations. Each tool serves a clear purpose without redundancy or bloat.
The lifecycle is well covered: create, render, inspect, add, update, remove, group, clear, and example guidance. The main gap is the lack of a dedicated ungroup operation, and there is no scene deletion/list tool, though clear_scene mitigates restart scenarios.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
A comprehensive Model Context Protocol (MCP) server that enables AI assistants to interact with yo…
A Model Context Protocol server for Wix AI tools
Create and edit architecture diagrams from your AI agent; get an SVG and a live editable canvas.
Enable secure connectivity between Sentry issues and debugging data, and LLM clients, using a Model Context Protocol (MCP) server.
Related MCP Servers
- AlicenseBqualityCmaintenanceA Model Context Protocol server that enables LLMs to create, modify, and manipulate Excalidraw diagrams through a structured API.113,0732,380MIT
- -licenseNot gradedqualityNot gradedmaintenanceA server that implements the Model Context Protocol (MCP), providing an interface for LLM applications to generate mermaid.js visualizations and diagrams.-
- AlicenseAqualityDmaintenanceA Model Context Protocol (MCP) server designed to easily dump your codebase context into Large Language Models (LLMs).1123Apache 2.0
- AlicenseBqualityDmaintenanceA Model Context Protocol server that enables LLMs to create, modify and manipulate Excalidraw diagrams through a structured API, supporting element creation, styling, organization, and scene management.122,783MIT
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/daniel69zz/visual_draw_mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server