переведено ИИ

MCP Server Chart

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

mcp-server-chart technical digram

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

📋 Содержание

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

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

На данный момент поддерживается 26+ типов диаграмм.

mcp-server-chart preview

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-диаграмму (диаграмму Санкей), используемую для отображения потока и объёма данных, представляя перемещение данных между различными узлами в формате Санкей.
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 и в настоящее время поддерживает генерацию карт только для Китая.

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

Для использования с настольными приложениями, такими как 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

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

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

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

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

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

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

# Для транспорта SSE (конечная точка по умолчанию: /sse)
mcp-server-chart --transport sse

# Для транспорта Streamable с пользовательской конечной точкой
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 для сканирования и открытия мини-программы для генерации личного идентификатора сервиса (нажмите меню «My» внизу, перейдите на страницу «My Services», нажмите кнопку «Generate» и после успешного выполнения — кнопку «Copy»):

my service identifier website

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

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

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

my map records website

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

Вы можете отключить определённые инструменты генерации диаграмм с помощью переменной окружения 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.

mcp-server-chart