mcp-server-chart

MCP Server Chart
AntV를 사용해 차트를 생성하는 Model Context Protocol 서버입니다. 이 MCP 서버를 차트 생성과 데이터 분석에 사용할 수 있습니다.

TypeScript 기반의 MCP 서버로 차트 생성 기능을 제공합니다. MCP 도구를 통해 다양한 유형의 차트를 만들 수 있습니다. Dify에서도 사용할 수 있습니다.

📋 목차

✨ 기능
🤖 사용법
🎨 스킬 사용법
🚰 SSE 또는 Streamable 전송으로 실행
🎮 CLI 옵션
⚙️ 환경 변수

VIS_REQUEST_SERVER
SERVICE_ID
DISABLED_TOOLS

📠 프라이빗 배포
🗺️ 생성 기록
🎛️ 도구 필터링
🔨 개발
📄 라이선스

✨ 기능
현재 26개 이상의 차트를 지원합니다.

generate_area_chart : 영역 차트를 생성합니다. 연속적인 독립 변수 아래에서 데이터의 추세를 표시하는 데 사용되며, 전체 데이터 추세를 관찰할 수 있습니다.
generate_bar_chart : 막대 차트를 생성합니다. 서로 다른 카테고리 간의 값을 비교하는 데 사용되며, 가로 비교에 적합합니다.
generate_boxplot_chart : 박스플롯 을 생성합니다. 중앙값, 사분위수, 이상치를 포함한 데이터의 분포를 표시하는 데 사용됩니다.
generate_column_chart : 세로 막대 차트를 생성합니다. 서로 다른 카테고리 간의 값을 비교하는 데 사용되며, 세로 비교에 적합합니다.
generate_district_map - 구역 지도 를 생성합니다. 행정 구역과 데이터 분포를 표시하는 데 사용됩니다.
generate_dual_axes_chart : 이중 축 차트를 생성합니다. 단위나 범위가 다른 두 변수 간의 관계를 표시하는 데 사용됩니다.
generate_fishbone_diagram : 피시본 다이어그램(Ishikawa 다이어그램이라고도 함)을 생성합니다. 문제의 근본 원인을 식별하고 표시하는 데 사용됩니다.
generate_flow_diagram : 순서도 를 생성합니다. 프로세스의 단계와 순서를 표시하는 데 사용됩니다.
generate_funnel_chart : 깔때기 차트를 생성합니다. 각 단계에서의 데이터 손실을 표시하는 데 사용됩니다.
generate_histogram_chart : 히스토그램 을 생성합니다. 데이터를 구간으로 나누고 각 구간의 데이터 포인트 수를 세어 데이터 분포를 표시하는 데 사용됩니다.
generate_line_chart : 선 차트를 생성합니다. 시간 또는 다른 연속 변수에 따른 데이터의 추세를 표시하는 데 사용됩니다.
generate_liquid_chart : 액체 차트를 생성합니다. 데이터의 비율을 표시하는 데 사용되며, 물로 채워진 구 형태로 백분율을 시각적으로 표현합니다.
generate_mind_map : 마인드맵 을 생성합니다. 사고 과정과 계층 정보를 표시하는 데 사용됩니다.
generate_network_graph : 네트워크 그래프를 생성합니다. 노드 간의 관계와 연결을 표시하는 데 사용됩니다.
generate_organization_chart : 조직 차트를 생성합니다. 조직의 구조와 인사 관계를 표시하는 데 사용됩니다.
generate_path_map - 경로 지도 를 생성합니다. POI의 경로 계획 결과를 표시하는 데 사용됩니다.
generate_pie_chart : 원형 차트를 생성합니다. 데이터의 비율을 표시하는 데 사용되며, 각 부분의 백분율을 보여주는 부채꼴로 나뉩니다.
generate_pin_map - 핀 지도 를 생성합니다. POI의 분포를 표시하는 데 사용됩니다.
generate_radar_chart : 레이더 차트를 생성합니다. 다차원 데이터를 종합적으로 표시하는 데 사용되며, 여러 차원을 레이더 형태로 보여줍니다.
generate_sankey_chart : 생키 차트를 생성합니다. 데이터 흐름과 양을 표시하는 데 사용되며, Sankey 스타일로 서로 다른 노드 간의 데이터 이동을 표현합니다.
generate_scatter_chart : 산점도를 생성합니다. 두 변수 간의 관계를 표시하는 데 사용되며, 좌표계에 데이터 포인트를 흩어진 점으로 보여줍니다.
generate_treemap_chart : 트리맵 을 생성합니다. 계층적 데이터를 표시하는 데 사용되며, 사각형의 크기가 데이터 값을 나타내는 사각형 형태로 데이터를 보여줍니다.
generate_venn_chart : 벤 다이어그램을 생성합니다. 교집합, 합집합, 차집합을 포함한 집합 간의 관계를 표시하는 데 사용됩니다.
generate_violin_chart : 바이올린 플롯을 생성합니다. 데이터의 분포를 표시하는 데 사용되며, 박스플롯과 밀도 플롯의 특징을 결합하여 데이터 분포를 더 자세히 볼 수 있습니다.
generate_word_cloud_chart : 워드 클라우드 를 생성합니다. 텍스트 데이터에서 단어의 빈도를 표시하는 데 사용되며, 글꼴 크기가 각 단어의 빈도를 나타냅니다.
generate_spreadsheet : 표 형식 데이터를 표시하기 위한 스프레드시트 또는 피벗 테이블을 생성합니다. 'rows' 또는 'values' 필드가 제공되면 피벗 테이블(교차 표)로 렌더링되고, 그렇지 않으면 일반 표로 렌더링됩니다.

참고

위의 지리적 시각화 차트 생성 도구는 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
그런 다음 데이터를 제공하거나 원하는 시각화를 설명하세요. 스킬이 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 옵션
MCP 서버를 실행할 때 다음 CLI 옵션을 사용할 수도 있습니다. -H 로 CLI를 실행하면 명령 옵션을 볼 수 있습니다.

MCP Server Chart CLI

Options:
--transport, -t 전송 프로토콜 지정: "stdio", "sse", 또는 "streamable" (기본값: "stdio")
--host, -h SSE 또는 streamable 전송의 호스트 지정 (기본값: localhost)
--port, -p SSE 또는 streamable 전송의 포트 지정 (기본값: 1122)
--endpoint, -e 전송의 엔드포인트 지정:
- SSE의 경우: 기본값은 "/sse"
- streamable의 경우: 기본값은 "/mcp"
--help, -H 이 도움말 메시지 표시

⚙️ 환경 변수

변수
설명
기본값
예시

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 주소를 env VIS_REQUEST_SERVER를 통해 전달할 수 있습니다.

Method : POST
Parameter : GPT-Vis-SSR로 렌더링하기 위해 전달됩니다. 예: { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] } .
Return : HTTP 서비스의 반환 객체.

success : boolean 차트 이미지 생성 성공 여부.
resultObj : string 차트 이미지 URL.
errorMessage : string success = false 일 때 오류 메시지를 반환합니다.

참고

프라이빗 배포 솔루션은 현재 geographic-district-map , geographic-path-map , geographic-pin-map 의 3개 도구를 포함한 지리적 시각화 차트 생성을 지원하지 않습니다.

🗺️ 생성 기록
기본적으로 사용자는 결과를 직접 저장해야 하지만, 차트 생성 기록을 조회할 수 있는 서비스도 제공합니다. 이를 위해서는 사용자가 직접 서비스 식별자를 생성하고 구성해야 합니다.

Alipay로 스캔하여 미니 프로그램을 열고 개인 서비스 식별자를 생성하세요(아래 "My" 메뉴를 클릭하고 "My Services" 페이지로 이동한 후 "Generate" 버튼을 클릭하고, 성공 후 "Copy" 버튼을 클릭):

다음으로 MCP 서버 구성에 SERVICE_ID 환경 변수를 추가해야 합니다. 예를 들어 Mac의 구성은 다음과 같습니다(Windows 시스템의 경우 env 변수만 추가하면 됩니다):

{
"mcpServers" : {
"AntV Map" : {
"command" : " npx " ,
"args" : [ " -y " , " @antv/mcp-server-chart " ],
"env" : {
"SERVICE_ID" : " *********************************** "
}
}
}
}
MCP Server 구성을 업데이트한 후 AI 클라이언트 애플리케이션을 재시작하고 MCP Server에 성공적으로 시작 및 연결되었는지 다시 확인해야 합니다. 그런 다음 지도를 다시 생성해 볼 수 있습니다. 생성이 성공하면 미니 프로그램의 "My Map" 페이지로 이동하여 지도 생성 기록을 확인할 수 있습니다.

🎛️ 도구 필터링
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
SSE 전송으로 MCP 서버 시작:

node build/index.js -t sse
Streamable 전송으로 MCP 서버 시작:

node build/index.js -t streamable
📄 라이선스
MIT@ AntV .