Chart

공식

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

GitHub
4.3k

Chart MCP(으)로 무엇을 할 수 있나요?

  • 일반 통계 차트 생성 — generate_line_chart 같은 도구를 사용해 데이터로부터 꺾은선형, 막대형, 세로 막대형, 영역형, 원형, 분산형, 레이더형 또는 이중 축 차트를 만듭니다.
  • 분포와 비율 시각화 — 히스토그램, 상자 그림, 바이올린 그림, 트리맵, 액체 게이지 또는 깔때기형 차트를 생성하여 데이터 분포와 부분-전체 관계를 탐색합니다.
  • 다이어그램 및 구조적 시각 자료 생성 — 순서도, 마인드맵, 조직도, 생선뼈(이시카와) 다이어그램, 생키 흐름도, 네트워크 그래프 또는 벤 다이어그램을 만듭니다.
  • 지리적 지도 렌더링 — generate_district_map, generate_pin_map, generate_path_map을 통해 구역, 핀 또는 경로 지도에 데이터를 표시합니다(중국 지역만 해당).
  • 표 형식 데이터 표시 — generate_spreadsheet를 사용해 구조화된 데이터를 스프레드시트 또는 피벗 테이블로 변환합니다.
  • 워드 클라우드 생성 — generate_word_cloud_chart를 사용해 텍스트에서 단어 빈도를 시각화합니다.

문서

MCP 서버 Chart

AntV를 사용하여 차트를 생성하기 위한 모델 컨텍스트 프로토콜 서버입니다. 이 MCP 서버는 차트 생성 및 _데이터 분석_에 사용할 수 있습니다.

build npm Version npm License codecov smithery installations badge 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 차트를 생성하며, 데이터 흐름과 양을 표시하고 생키 스타일 형식으로 서로 다른 노드 간의 데이터 이동을 나타냅니다.
  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 서비스를 사용하며 현재 중국 내 지도 생성만 지원합니다.

🤖 사용법

Claude, VSCode, Cline, Cherry Studio, Cursor 등과 같은 Desktop APP과 함께 사용하려면 아래 MCP 서버 구성을 추가하세요. Mac 시스템에서:

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

Window 시스템에서:

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

또한 HTTP, SSE 프로토콜을 통해 aliyun, modelscope, glama.ai, smithery.ai 등에서 사용할 수 있습니다.

🎨 스킬 사용법

스킬을 지원하는 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] 프라이빗 배포 솔루션은 현재 geographic-district-map, geographic-path-map, geographic-pin-map의 3가지 도구를 포함한 지리적 시각화 차트 생성을 지원하지 않습니다.

🗺️ 생성 기록

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

Alipay를 사용하여 스캔하고 미니 프로그램을 열어 개인 서비스 식별자를 생성합니다(아래의 "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.