Skip to main content
Glama
luan007

figma-slides-mcp

by luan007

Render D3 Visualization

render_d3

Render D3.js charts, graphs, and diagrams as editable Figma vector nodes, preserving text as editable text.

Instructions

Render a D3.js visualization as editable Figma vector nodes. PREFERRED for data visualizations, charts, graphs, diagrams.

The script runs in the plugin iframe with full D3 v7 available. Write JS that uses d3 to build SVG in the scratch div. The SVG is auto-extracted and converted to editable Figma nodes.

Available globals: d3, scratch (offscreen div to render into). The script should either return an SVG string or render into scratch (auto-extracted).

IMPORTANT: All text becomes editable Figma text nodes. This is the best renderer for data-driven graphics.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
xNo
yNo
widthNoResize result width
heightNoResize result height
scriptYesJavaScript code using d3. Access d3 and scratch div. Return SVG string or render into scratch.
parentIdYesParent node (typically slide ID)
Behavior4/5

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

With no annotations, the description carries the full burden and does well: it explains the script executes in the plugin iframe with D3 v7, available globals (d3, scratch), the extraction/conversion process, and the important detail that all text becomes editable Figma text nodes. It stops short of describing potential side effects or error handling, but covers core behavior.

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 structured with a clear opening statement, followed by technical instructions. It is a bit long but every sentence adds value: environment details, available globals, output options, and the text-node behavior. No filler or repetition.

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 complex tool that executes user-supplied JavaScript, the description provides sufficient context: runtime environment, global variables, output requirements, and the resulting Figma nodes. It lacks caveats about performance or conversion limitations, but given the absence of an output schema, it covers the essential operational context.

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?

Schema coverage is 67% (4/6 params have descriptions). The description adds significant meaning to the 'script' parameter by explaining how to use D3, the scratch div, and the return/render mechanism. While x/y lack descriptions, they are standard coordinates and the schema covers the rest. The description compensates for the most complex parameter.

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 'Render a D3.js visualization as editable Figma vector nodes' with a specific verb and resource. It distinguishes itself from siblings by noting it is 'PREFERRED for data visualizations, charts, graphs, diagrams' and 'the best renderer for data-driven graphics.'

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?

The description gives explicit context for when to use this tool ('PREFERRED for data visualizations, charts, graphs, diagrams') and highlights its advantage ('best renderer for data-driven graphics'). It does not explicitly name alternative renderers or exclusion criteria, but the preference statement is clear.

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

Install Server

Other Tools

Latest Blog Posts

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/luan007/figma-slides-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server