Skip to main content
Glama
byebyebruce

infographic-mcp

by byebyebruce
OverviewSchemaRelated ServersScoreDiscussions
JavaScript
Hybrid

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

This server cannot be installed

F
license - not found
-
quality - not tested
D
maintenance

How are these scores calculated?

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.

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