Chart

공식

AntV를 사용하여 시각적 차트를 생성하기 위한 모델 컨텍스트 프로토콜 서버입니다.

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 Server Chart

AntV를 사용하여 차트를 생성하기 위한 Model Context Protocol 서버입니다. 이 MCP 서버를 차트 생성 및 _데이터 분석_에 사용할 수 있습니다.

build npm Version npm License codecov Listed on Skillselion Visitors

mcp-server-chart technical digram

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

📋 목차

✨ 기능

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

mcp-server-chart preview
  1. generate_area_chart: area 차트를 생성하여 연속형 독립 변수 하에서 데이터의 추세를 표시하고, 전체 데이터 흐름을 관찰할 수 있습니다.
  2. generate_bar_chart: bar 차트를 생성하여 여러 범주 간의 값을 비교하며, 수평 비교에 적합합니다.
  3. generate_boxplot_chart: boxplot를 생성하여 데이터의 분포를 표시하며, 중앙값, 사분위수, 이상치를 포함합니다.
  4. generate_column_chart: column 차트를 생성하여 여러 범주 간의 값을 비교하며, 수직 비교에 적합합니다.
  5. generate_district_map - district-map를 생성하여 행정 구역과 데이터 분포를 표시합니다.
  6. generate_dual_axes_chart: dual-axes 차트를 생성하여 단위나 범위가 다른 두 변수 간의 관계를 표시합니다.
  7. generate_fishbone_diagram: fishbone 다이어그램(이시카와 다이어그램이라고도 함)을 생성하여 문제의 근본 원인을 식별하고 표시합니다.
  8. generate_flow_diagram: flowchart를 생성하여 프로세스의 단계와 순서를 표시합니다.
  9. generate_funnel_chart: funnel 차트를 생성하여 여러 단계에서의 데이터 손실을 표시합니다.
  10. generate_histogram_chart: histogram를 생성하여 데이터를 구간으로 나누고 각 구간의 데이터 포인트 수를 세어 데이터 분포를 표시합니다.
  11. generate_line_chart: line 차트를 생성하여 시간 또는 다른 연속 변수에 따른 데이터의 추세를 표시합니다.
  12. generate_liquid_chart: liquid 차트를 생성하여 데이터의 비율을 표시하며, 물로 채워진 구 형태로 백분율을 시각적으로 표현합니다.
  13. generate_mind_map: mind-map를 생성하여 사고 과정과 계층적 정보를 표시합니다.
  14. generate_network_graph: network 그래프를 생성하여 노드 간의 관계와 연결을 표시합니다.
  15. generate_organization_chart: organizational 차트를 생성하여 조직의 구조와 인사 관계를 표시합니다.
  16. generate_path_map - path-map를 생성하여 POI의 경로 계획 결과를 표시합니다.
  17. generate_pie_chart: pie 차트를 생성하여 데이터의 비율을 표시하며, 각 부분의 백분율을 나타내는 부채꼴로 나눕니다.
  18. generate_pin_map - pin-map를 생성하여 POI의 분포를 표시합니다.
  19. generate_radar_chart: radar 차트를 생성하여 다차원 데이터를 종합적으로 표시하며, 레이더 형태로 여러 차원을 보여줍니다.
  20. generate_sankey_chart: sankey 차트를 생성하여 데이터 흐름과 양을 표시하며, Sankey 스타일로 서로 다른 노드 간의 데이터 이동을 나타냅니다.
  21. generate_scatter_chart: scatter 플롯을 생성하여 두 변수 간의 관계를 표시하며, 좌표계에 데이터 포인트를 흩어진 점으로 보여줍니다.
  22. generate_treemap_chart: treemap를 생성하여 계층적 데이터를 표시하며, 사각형의 크기가 데이터 값을 나타내는 직사각형 형태로 보여줍니다.
  23. generate_venn_chart: venn 다이어그램을 생성하여 집합 간의 관계를 표시하며, 교집합, 합집합, 차집합을 포함합니다.
  24. generate_violin_chart: violin 플롯을 생성하여 데이터 분포를 표시하며, 박스플롯과 밀도 플롯의 특징을 결합하여 더 상세한 데이터 분포를 제공합니다.
  25. generate_word_cloud_chart: word-cloud를 생성하여 텍스트 데이터에서 단어의 빈도를 표시하며, 글꼴 크기가 각 단어의 빈도를 나타냅니다.
  26. 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 옵션

MCP 서버를 실행할 때 다음 CLI 옵션을 사용할 수도 있습니다. -H로 CLI를 실행하여 명령 옵션을 확인하세요.

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프라이빗 배포를 위한 사용자 정의 차트 생성 서비스 URLhttps://antv-studio.alipay.com/api/gpt-vishttps://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 서비스를 배포한 다음, env VIS_REQUEST_SERVER를 통해 URL 주소를 전달할 수 있습니다.

  • 메서드: 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.

🗺️ 생성 기록

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

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

my service identifier website

다음으로 MCP 서버 구성에 SERVICE_ID 환경 변수를 추가해야 합니다. 예를 들어 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

SSE 전송으로 MCP 서버 시작:

node build/index.js -t sse

Streamable 전송으로 MCP 서버 시작:

node build/index.js -t streamable

📄 라이선스

MIT@AntV.