infographic-mcp
Renders infographics using AntV's infographic library, enabling AI agents to generate visualizations from DSL syntax and return PNG images.
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., "@infographic-mcprender an infographic: list-row-horizontal-icon-arrow with title 'Product Launch Steps' and items Step1, Step2, Step3"
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.
Infographic MCP Server
MCP server for rendering infographics using @antv/infographic.
Usage Preview

Related MCP server: MCP Server Chart
Installation
npm install
npm run buildQuick Start
Stdio Mode (Default)
# Run directly
node dist/index.js
# Or with npx
npx .HTTP Mode
node dist/index.js --http --port 3000SSE Mode
node dist/index.js --sse --port 3000Command Line Options
Option | Description | Default |
| Use Streamable HTTP transport | - |
| Use SSE transport | - |
| Server port (for HTTP/SSE) | 3000 |
| Return image URL instead of base64 | - |
| Image output directory |
|
| API token for authentication | - |
URL Mode Example
# Images saved to ./images/, return URL like http://localhost:3000/images/uuid.png
node dist/index.js --http --port 3000 --url=http://localhost:3000/images
# Custom output directory
node dist/index.js --http --port 3000 --url=http://example.com/img --output=./public/imgAuthentication
# Enable token authentication
node dist/index.js --http --port 3000 --token=my-secret-tokenRequest with token:
# Via Authorization header (recommended)
curl -X POST http://localhost:3000/mcp \
-H "Authorization: Bearer my-secret-token" \
-H "Content-Type: application/json" \
-d '{"jsonrpc":"2.0",...}'
# Via query parameter
curl "http://localhost:3000/sse?token=my-secret-token"Note: Static image files (
/images/*) are served without authentication.
MCP Configuration
Cursor / Claude Desktop
{
"mcpServers": {
"infographic": {
"command": "node",
"args": ["/path/to/infographic-mcp/dist/index.js"]
}
}
}With URL Mode
{
"mcpServers": {
"infographic": {
"command": "node",
"args": [
"/path/to/infographic-mcp/dist/index.js",
"--http",
"--port", "3000",
"--url=http://localhost:3000/images"
]
}
}
}Using npx (after npm publish)
{
"mcpServers": {
"infographic": {
"command": "npx",
"args": ["infographic-mcp"]
}
}
}Tool: render_infographic
Renders an infographic from DSL syntax and returns a PNG image.
Parameters
Parameter | Type | Required | Default | Description |
| string | Yes | - | Infographic DSL syntax string |
| number | No | 800 | Image width in pixels |
| number | No | 600 | Image height in pixels |
| string | No |
| Background color ( |
Returns
Default: PNG image as base64 (
type: "image")With
--url: Image URL as text (type: "text")
DSL Syntax
The DSL uses space-separated key-value format (NOT YAML colon format):
infographic <template-name>
data
title My Title
desc My Description
items
- label Item 1
desc Description 1
value 100
icon mdi/icon-name
- label Item 2
desc Description 2
theme
palette #3b82f6 #8b5cf6 #f97316Example
infographic list-row-horizontal-icon-arrow
data
title Product Launch Steps
items
- label Step 1
desc Planning phase
icon mdi/rocket-launch
- label Step 2
desc Development phase
icon mdi/code-tags
- label Step 3
desc Launch phase
icon mdi/flag-checkeredAvailable Templates
list-row-horizontal-icon-arrowsequence-zigzag-steps-underline-textsequence-horizontal-zigzag-underline-textsequence-circular-simplecompare-binary-horizontal-simple-foldquadrant-quarter-simple-cardlist-grid-badge-cardchart-column-simplechart-bar-plain-textchart-pie-plain-textchart-pie-donut-plain-texthierarchy-tree-curved-line-rounded-rect-nodeAnd ~200 more templates
See AntV Infographic Gallery for all templates.
Docker
Docker Compose
docker-compose up -dBuild
docker build -t infographic-mcp .Run
# Stdio mode
docker run -i --rm infographic-mcp
# HTTP mode
docker run -p 3000:3000 --rm infographic-mcp --http --port 3000
# HTTP mode with URL
docker run -p 3000:3000 --rm infographic-mcp --http --port 3000 --url=http://localhost:3000/imagesMCP Config (Docker)
{
"mcpServers": {
"infographic": {
"command": "docker",
"args": ["run", "-i", "--rm", "infographic-mcp"]
}
}
}Development
# Development mode (stdio)
npm run dev
# Development mode (HTTP)
npm run dev:http
# Development mode (SSE)
npm run dev:sse
# Run tests
npm test
# Build
npm run buildLicense
MIT
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Tools
Related MCP Servers
- TypeScriptMIT
- -license-quality-maintenanceEnables generation of 25+ types of charts and data visualizations using AntV, including bar charts, line charts, maps, mind maps, and specialized diagrams like fishbone and sankey charts. Supports both statistical charts and geographic visualizations for comprehensive data analysis and presentation.Last updated254
- AlicenseCqualityDmaintenanceIntegrates Volcengine's Ark API to provide image and video generation and editing capabilities. It supports both local stdio and remote HTTP transport modes for flexible deployment and use.Last updated8502MIT
- AlicenseAqualityAmaintenanceMCP server that turns AI into an SVG artist. One rendering engine with a rich JSON schema, AI controls all design parameters. Renders animated SVGs with CSS @keyframes and SMIL animations. Supports 16+ element types, parametric curves, pattern groups, gradient/filter/clip/mask definitions, and PNG preview. No external dependencies, runs locally via npx.Last updated316120MIT
Related MCP Connectors
Image generation API: render HTML/CSS templates to PNG, JPEG, WebP or PDF, plus URL screenshots.
Render HTML, Markdown, or URLs to images, PDF, or branded artifacts; extract and watch pages.
Generate images, GIFs, and PDFs from HTML, URLs, or templates — from your AI agent.
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/byebyebruce/inforgraphic-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server