Chart

официальный

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

GitHub

4.4k

Попробовать этот MCPСпонсировано

Что можно делать с Chart MCP?

Создание стандартных типов диаграмм — Запросите столбчатые, линейные, круговые, точечные или областные диаграммы с помощью таких инструментов, как generate_bar_chart и generate_line_chart, чтобы визуализировать тренды и сравнения.
Создание специализированных визуализаций — Запросите продвинутые диаграммы, такие как generate_sankey_chart, generate_venn_chart или generate_word_cloud_chart, для анализа потоков, отношений множеств или частотности текста.
Построение диаграмм и карт — Используйте generate_flow_diagram, generate_organization_chart или generate_district_map, чтобы иллюстрировать процессы, иерархии или географические данные (карты, ориентированные на Китай).
Анализ распределений данных — Создайте generate_boxplot_chart, generate_histogram_chart или generate_violin_chart, чтобы исследовать статистический разброс, выбросы и плотность.
Отображение табличных данных — Используйте generate_spreadsheet для отображения обычных таблиц или сводных таблиц для перекрестных сводных данных.

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

MCP-сервер Chart

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