Chart MCP Server

официальный

Сервер Model Context Protocol для генерации визуальных диаграмм с использованием Ant

Документация

MCP-сервер Chart

Сервер протокола Model Context Protocol для генерации диаграмм с использованием AntV. Этот MCP-сервер можно использовать для генерации диаграмм и анализа данных.

Это MCP-сервер на TypeScript, предоставляющий возможности генерации диаграмм. Он позволяет создавать различные типы диаграмм с помощью инструментов MCP. Вы также можете использовать его в Dify.

📋 Содержание

✨ Возможности
🤖 Использование
🎨 Использование навыков
🚰 Запуск с транспортом SSE или Streamable
🎮 Параметры CLI
⚙️ Переменные окружения
📠 Приватное развертывание
🗺️ Записи генерации
🎛️ Фильтрация инструментов
🔨 Разработка
📄 Лицензия

✨ Возможности

Сейчас поддерживается более 26 диаграмм.

generate_area_chart: Создать диаграмму area, используемую для отображения тренда данных в зависимости от непрерывной независимой переменной, позволяя наблюдать общие тенденции данных.
generate_bar_chart: Создать диаграмму bar, используемую для сравнения значений по разным категориям, подходит для горизонтального сравнения.
generate_boxplot_chart: Создать boxplot, используемую для отображения распределения данных, включая медиану, квартили и выбросы.
generate_column_chart: Создать диаграмму column, используемую для сравнения значений по разным категориям, подходит для вертикального сравнения.
generate_district_map - Создать district-map, используемую для отображения административных границ и распределения данных.
generate_dual_axes_chart: Создать диаграмму dual-axes, используемую для отображения взаимосвязи между двумя переменными с разными единицами измерения или диапазонами.
generate_fishbone_diagram: Создать диаграмму fishbone, также известную как диаграмма Исикавы, используемую для выявления и отображения коренных причин проблемы.
generate_flow_diagram: Создать flowchart, используемую для отображения шагов и последовательности процесса.
generate_funnel_chart: Создать диаграмму funnel, используемую для отображения потерь данных на разных этапах.
generate_histogram_chart: Создать histogram, используемую для отображения распределения данных путем разделения на интервалы и подсчета количества точек данных в каждом интервале.
generate_line_chart: Создать диаграмму line, используемую для отображения тренда данных во времени или другой непрерывной переменной.
generate_liquid_chart: Создать диаграмму liquid, используемую для отображения доли данных, визуально представляя проценты в виде заполненных водой сфер.
generate_mind_map: Создать mind-map, используемую для отображения мыслительных процессов и иерархической информации.
generate_network_graph: Создать граф network, используемый для отображения отношений и связей между узлами.
generate_organization_chart: Создать диаграмму organizational, используемую для отображения структуры организации и отношений персонала.
generate_path_map - Создать path-map, используемую для отображения результатов планирования маршрутов для POI.
generate_pie_chart: Создать диаграмму pie, используемую для отображения доли данных, разделяя их на части, представленные секторами, показывающими процент каждой части.
generate_pin_map - Создать pin-map, используемую для отображения распределения POI.
generate_radar_chart: Создать диаграмму radar, используемую для комплексного отображения многомерных данных, показывая несколько измерений в радиолокационном формате.
generate_sankey_chart: Создать диаграмму sankey, используемую для отображения потока и объема данных, представляя перемещение данных между различными узлами в стиле Sankey.
generate_scatter_chart: Создать график scatter, используемый для отображения взаимосвязи между двумя переменными, показывая точки данных в виде рассеянных точек на системе координат.
generate_treemap_chart: Создать treemap, используемую для отображения иерархических данных, показывая данные в прямоугольных формах, где размер прямоугольников представляет значение данных.
generate_venn_chart: Создать диаграмму venn, используемую для отображения отношений между множествами, включая пересечения, объединения и разности.
generate_violin_chart: Создать график violin, используемый для отображения распределения данных, сочетая особенности ящичковых диаграмм и графиков плотности для более детального представления распределения данных.
generate_word_cloud_chart: Создать word-cloud, используемую для отображения частоты слов в текстовых данных, где размер шрифта указывает на частоту каждого слова.
generate_spreadsheet: Создать spreadsheet или сводную таблицу для отображения табличных данных. Когда предоставлены поля 'rows' или 'values', отображается как сводная таблица (кросс-табуляция); в противном случае отображается как обычная таблица.

[!NOTE] Вышеуказанный инструмент генерации географических визуализаций использует сервис AMap и в настоящее время поддерживает только генерацию карт в пределах Китая.

🤖 Использование

Для использования с Desktop APP, такими как Claude, VSCode, Cline, Cherry Studio, Cursor и т.д., добавьте конфигурацию MCP-сервера ниже. В системе Mac:

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"]
    }
  }
}

В системе Windows:

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@antv/mcp-server-chart"]
    }
  }
}

Также вы можете использовать его на aliyun, modelscope, glama.ai, smithery.ai или других с протоколом HTTP, SSE.

🎨 Использование навыков

Если вы используете AI IDE с поддержкой навыков (например, Claude Code), вы можете использовать навык chart-visualization для автоматического выбора наилучшего типа диаграммы и генерации визуализаций.

Вы можете добавить навык из https://github.com/antvis/chart-visualization-skills с помощью:

npx skills add antvis/chart-visualization-skills

Затем предоставьте свои данные или опишите желаемую визуализацию. Навык интеллектуально выберет из более чем 25 типов диаграмм и сгенерирует диаграмму для вас.

🚰 Запуск с транспортом SSE или Streamable

Прямой запуск

Установите пакет глобально.

npm install -g @antv/mcp-server-chart

Запустите сервер с предпочитаемым вариантом транспорта:

# For SSE transport (default endpoint: /sse)
mcp-server-chart --transport sse

# For Streamable transport with custom endpoint
mcp-server-chart --transport streamable

Затем вы можете получить доступ к серверу по адресу:

Транспорт SSE: http://localhost:1122/sse
Транспорт Streamable: http://localhost:1122/mcp

Развертывание Docker

Войдите в директорию docker.

cd docker

Разверните с помощью docker-compose.

docker compose up -d

Затем вы можете получить доступ к серверу по адресу:

Транспорт SSE: http://localhost:1123/sse
Транспорт Streamable: http://localhost:1122/mcp

🎮 Параметры CLI

Вы также можете использовать следующие параметры CLI при запуске MCP-сервера. Параметры команд при запуске CLI с -H.

MCP Server Chart CLI

Options:
  --transport, -t  Specify the transport protocol: "stdio", "sse", or "streamable" (default: "stdio")
  --host, -h       Specify the host for SSE or streamable transport (default: localhost)
  --port, -p       Specify the port for SSE or streamable transport (default: 1122)
  --endpoint, -e   Specify the endpoint for the transport:
                   - For SSE: default is "/sse"
                   - For streamable: default is "/mcp"
  --help, -H       Show this help message

⚙️ Переменные окружения

Переменная	Описание	По умолчанию	Пример
`VIS_REQUEST_SERVER`	Пользовательский URL сервиса генерации диаграмм для приватного развертывания	`https://antv-studio.alipay.com/api/gpt-vis`	`https://your-server.com/api/chart`
`SERVICE_ID`	Идентификатор сервиса для записей генерации диаграмм	-	`your-service-id-123`
`DISABLED_TOOLS`	Список имен инструментов для отключения, разделенных запятыми	-	`generate_fishbone_diagram,generate_mind_map`

📠 Приватное развертывание

MCP Server Chart по умолчанию предоставляет бесплатный сервис генерации диаграмм. Для пользователей, которым требуется приватное развертывание, они могут попробовать использовать VIS_REQUEST_SERVER для настройки собственного сервиса генерации диаграмм.

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "VIS_REQUEST_SERVER": "<YOUR_VIS_REQUEST_SERVER>"
      }
    }
  }
}

Вы можете использовать проект AntV GPT-Vis-SSR для развертывания HTTP-сервиса в частной среде, а затем передать URL-адрес через переменную окружения VIS_REQUEST_SERVER.

Метод: POST
Параметр: Который будет передан в GPT-Vis-SSR для рендеринга. Например, { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }.
Возврат: Объект возврата HTTP-сервиса.
- success: boolean Успешно ли сгенерировано изображение диаграммы.
- resultObj: string URL изображения диаграммы.
- errorMessage: string Когда success = false, возвращает сообщение об ошибке.

[!NOTE] Решение приватного развертывания в настоящее время не поддерживает генерацию географических визуализаций, включая 3 инструмента: geographic-district-map, geographic-path-map, geographic-pin-map.

🗺️ Записи генерации

По умолчанию пользователи должны сохранять результаты самостоятельно, но мы также предоставляем сервис для просмотра записей генерации диаграмм, который требует от пользователей сгенерировать для себя идентификатор сервиса и настроить его.

Используйте Alipay для сканирования и открытия мини-программы, чтобы сгенерировать персональный идентификатор сервиса (нажмите меню «Мой» внизу, перейдите на страницу «Мои сервисы», нажмите кнопку «Сгенерировать» и после успеха нажмите кнопку «Копировать»):

Далее вам нужно добавить переменную окружения SERVICE_ID в конфигурацию MCP-сервера. Например, конфигурация для Mac выглядит следующим образом (для систем Windows просто добавьте переменную env):

{
  "mcpServers": {
    "AntV Map": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "SERVICE_ID": "***********************************"
      }
    }
  }
}

После обновления конфигурации MCP-сервера вам необходимо перезапустить ваше клиентское приложение AI и снова проверить, успешно ли вы запустили и подключились к MCP-серверу. Затем вы можете попробовать снова сгенерировать карту. После успешной генерации вы можете перейти на страницу «Мои карты» мини-программы, чтобы просмотреть ваши записи генерации карт.

🎛️ Фильтрация инструментов

Вы можете отключить определенные инструменты генерации диаграмм, используя переменную окружения DISABLED_TOOLS. Это полезно, когда определенные инструменты имеют проблемы совместимости с вашим MCP-клиентом или когда вы хотите ограничить доступную функциональность.

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "DISABLED_TOOLS": "generate_fishbone_diagram,generate_mind_map"
      }
    }
  }
}

Доступные имена инструментов для фильтрации См. ✨ Возможности.

🔨 Разработка

Установите зависимости:

npm install

Соберите сервер:

npm run build

Запустите MCP-сервер:

npm run start

Запустите MCP-сервер с транспортом SSE:

node build/index.js -t sse

Запустите MCP-сервер с транспортом Streamable:

node build/index.js -t streamable

📄 Лицензия

MIT@AntV.