Skip to main content
Glama

Infographic MCP Server

MCP server for rendering infographics using @antv/infographic.

Usage Preview

prompt example

Related MCP server: MCP Server Chart

Installation

npm install
npm run build

Quick Start

Stdio Mode (Default)

# Run directly
node dist/index.js

# Or with npx
npx .

HTTP Mode

node dist/index.js --http --port 3000

SSE Mode

node dist/index.js --sse --port 3000

Command Line Options

Option

Description

Default

--http

Use Streamable HTTP transport

-

--sse

Use SSE transport

-

--port <number>

Server port (for HTTP/SSE)

3000

--url=<url>

Return image URL instead of base64

-

--output=<dir>

Image output directory

./images

--token=<token>

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/img

Authentication

# Enable token authentication
node dist/index.js --http --port 3000 --token=my-secret-token

Request 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

syntax

string

Yes

-

Infographic DSL syntax string

width

number

No

800

Image width in pixels

height

number

No

600

Image height in pixels

background

string

No

"white"

Background color ("white", "#f5f5f5", "transparent")

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 #f97316

Example

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

Available Templates

  • list-row-horizontal-icon-arrow

  • sequence-zigzag-steps-underline-text

  • sequence-horizontal-zigzag-underline-text

  • sequence-circular-simple

  • compare-binary-horizontal-simple-fold

  • quadrant-quarter-simple-card

  • list-grid-badge-card

  • chart-column-simple

  • chart-bar-plain-text

  • chart-pie-plain-text

  • chart-pie-donut-plain-text

  • hierarchy-tree-curved-line-rounded-rect-node

  • And ~200 more templates

See AntV Infographic Gallery for all templates.

Docker

Docker Compose

docker-compose up -d

Build

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/images

MCP 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 build

License

MIT

Install Server
F
license - not found
A
quality
D
maintenance

Maintenance

Maintainers
Response time
Release cycle
Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Servers

  • -
    license
    -
    quality
    -
    maintenance
    Enables 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 updated
    254
  • A
    license
    C
    quality
    D
    maintenance
    Integrates 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 updated
    8
    50
    2
    MIT
  • A
    license
    A
    quality
    A
    maintenance
    MCP 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 updated
    3
    161
    20
    MIT

View all related MCP servers

Related MCP Connectors

View all MCP Connectors

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/byebyebruce/inforgraphic-mcp'

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