Skip to main content
Glama
byebyebruce

infographic-mcp

by byebyebruce
OverviewSchemaSourceRelated ServersScoreDiscussions
JavaScript
Hybrid

Infographic MCP Server

MCP server for rendering infographics using @antv/infographic.

Usage Preview

prompt example

Related MCP server: Seedream/Seedance MCP Server

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

Available Tools

1 tool
render_infographicRender InfographicA

Render an infographic from DSL syntax and return as PNG image.

DSL syntax format (space-separated key-value, 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

Available templates include:

  • list-row-horizontal-icon-arrow

  • sequence-zigzag-steps-underline-text

  • compare-binary-horizontal-simple-fold

  • chart-pie-plain-text

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

  • And more (~200 templates available)

ParametersJSON Schema
NameRequiredDescriptionDefault
widthNoImage width in pixels
heightNoImage height in pixels
syntaxYesInfographic DSL syntax string
backgroundNoBackground color (e.g., "white", "#f5f5f5", "transparent")white

TDQS

A4.1/5.0
Behavior3/5

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

With no annotations, the description must disclose behavior. It alerts users that the DSL is space-separated key-value (NOT YAML), which is a critical pitfall, and states the output is a PNG. However, it omits error handling, invalid-syntax behavior, and other potential constraints, leaving some transparency gaps.

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 longer than average but justified by the complexity of the DSL. The code block and template list are necessary for correct usage. Each sentence contributes value, though the content could be slightly trimmed without losing essential information.

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?

The tool uses a complex DSL, so the example and template disclosure are essential. It states the return type (PNG) and provides template examples, but does not cover output dimensions (though schema parameters define this) or error behavior. Overall, it is largely complete for the tool's complexity.

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?

All parameters have schema descriptions (100% coverage), giving a baseline of 3. The description significantly enriches the 'syntax' parameter by providing a complete DSL example and template list, adding meaning beyond the schema's one-line description. Other parameters remain adequately covered by the schema.

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 an infographic from DSL syntax and return as PNG image', specifying both the operation (render) and the resource (infographic from DSL syntax), along with the output format. This is a precise, verb+resource statement that fully distinguishes the tool's purpose.

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 provides a detailed DSL syntax example and a template list, giving clear context on how to construct input. It doesn't mention alternatives since none are listed as siblings, but it does not explicitly state when to use the tool instead of others. The context is clear and actionable.

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.

  1. 1 tool updatev1.0.0
    • First observedrender_infographic
Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

A4/5.0
Disambiguation5/5

With only one tool, there is no possibility of confusion or overlap. The tool has a clear, singular purpose: rendering infographics from DSL syntax.

Naming Consistency5/5

The single tool name 'render_infographic' follows a clear verb_noun pattern and is descriptive. With only one tool, naming consistency is inherently perfect.

Tool Count3/5

A single tool feels thin for a dedicated server, though the tool itself is substantial and handles a complex rendering task. It falls at the borderline of acceptable scope.

Completeness2/5

The server provides only a render function with no way to discover available templates, validate DSL syntax, or list supported options. Agents must rely on external knowledge, creating a significant gap in the tool surface.

Maintenance

ActivityInactive
ResponsivenessNo issues

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

Related MCP Servers

  • Seedream/Seedance MCP Server

    nsmao-com
    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.
    8
    57
    3
    MIT

  • nakkas

    arikusi
    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.
    3
    167
    22
    MIT

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