chart-visualization작성자 AntV

Chart Visualization 스킬.

Claude Code 및 Codex용 다이어그램 및 차트 스킬: AntV API를 통해 막대, 선, 파이, 레이더, 생키, 마인드맵, 플로우 차트로 데이터를 렌더링합니다.

Diagrams & Data Visualization
Chart image

antvis/chart-visualization-skills · skills/chart-visualization/SKILL.mdSKILL.md

--- name: chart-visualization description: 将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程图等图表时调用此技能，通过 curl 工具调用 AntV API 生成图表图片 --- ## 步骤 ## 图表选择指南 ## API 接口 ## 支持的图表类型 ## 通用可选参数 ## 各图表 data 格式

업스트림 파일에서 읽은 전문 및 섹션 제목 (2026-09-14) · 전체 3,736자

01 기능

Claude Code와 Codex에서 chart-visualization 스킬이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

이 스킬은 AntV의 차트 생성 API를 호출하여 사용자 데이터를 차트로 변환합니다. 데이터와 사용자의 요청을 분석해 폭넓은 카탈로그(막대, 선, 원형, 방사형, 생키, 마인드맵, 흐름도 등)에서 가장 적합한 차트 유형을 선택하고, 필요한 type 및 source 필드를 담은 JSON 요청 본문을 구성하고, curl로 API를 호출한 뒤 반환된 이미지 URL을 마크다운 이미지로 출력합니다.

약 20가지 지원되는 차트 유형 각각에 대한 데이터 형태 규약과 테마, 너비, 높이, 제목 같은 공유 선택적 매개변수를 문서화하여, 에이전트가 형식을 추측하는 대신 유효한 요청을 구성할 수 있는 구체적인 참조를 제공합니다.

산출물

성공 플래그와 resultObj 이미지 URL을 포함하는 JSON API 응답

예시 프롬프트 보기 ↗

작동 방식

01
차트 유형 선택
사용자의 데이터와 요구 사항을 분석하여 가장 적합한 차트 유형을 선택합니다.
02
요청 본문 구성
API 사양을 따르는 JSON 요청 본문을 구성합니다.
03
API 호출
curl 도구를 사용하여 API를 호출하고 차트 이미지를 생성합니다.
04
이미지 출력
반환된 이미지 URL을 Markdown 이미지 형식으로 출력합니다.

02 적합성 확인

chart-visualization 스킬 사용 시기

이러한 종류의 다이어그램 및 차트 작업일 때 Claude Code 또는 Codex에서 chart-visualization 스킬을 사용합니다. 아래 적합성 및 제한사항은 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

라인 차트로 시계열 추세를 시각화하거나, 영역 차트로 누적 추세를 시각화
바 차트로 항목을 가로로 비교하거나, 컬럼 차트로 세로로 비교
파이 차트로 비율 구성을 보여주거나, 트리맵으로 계층적 비중을 표시
생키 다이어그램으로 항목 간 흐름을 매핑하거나, 산점도로 상관관계를 표시
조직도 또는 마인드맵으로 계층 구조나 트리 구조를 표현

한계 인지하기

AntV API 필요SKILL.md에 이 의존성이 명시되어 있으며, 프로젝트에 없으면 스킬이 작동하지 않습니다.

제공할 사항

차트별 데이터 배열각 차트 유형은 고유한 데이터 형태를 요구합니다. 예를 들어 bar/column은 {category, value, group?} 배열이 필요하고, sankey는 {source, target, value} 배열이 필요합니다.
선택적 표시 매개변수출력을 사용자 지정하기 위해 theme, width, height, title, style.texture를 지정할 수 있으며, 축 차트의 경우 axisXTitle/axisYTitle도 지정할 수 있습니다.

03 스킬 내부

chart-visualization 스킬이 Claude Code와 Codex에 제공하는 규칙

SKILL.md가 에이전트를 위해 설정하는 7가지 구체적 지침, 기본값, 한도 — 결과를 바꾸는 파일의 부분

필수 필드
모든 요청 본문에는 type 필드와 "chart-visualization-skills"로 설정된 source 필드가 포함되어야 합니다.
고정 엔드포인트
차트는 단일 고정 API 엔드포인트에 POST 요청을 보내 생성됩니다.
기본 캔버스 크기
차트 너비는 기본값이 600이고 높이는 기본값이 400이며, 재정의하지 않는 한 이 값이 적용됩니다.
테마 옵션
테마는 기본값이 "default"이지만 "academy" 또는 "dark"로 설정할 수 있습니다.
텍스처 스타일
style.texture는 기본값이 "default"이지만 손그림 느낌을 위해 "rough"로 설정할 수 있습니다.
스태킹 기본값
바 차트는 기본적으로 stack: true이며, 컬럼 차트는 기본적으로 group이 true입니다.
출력 형식
API 응답의 resultObj URL은 패턴을 사용하여 Markdown 이미지로 렌더링해야 합니다.

04 활용하기

Claude Code 또는 Codex에 chart-visualization 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용자의 에이전트에 chart-visualization 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal

npx skills add https://github.com/antvis/chart-visualization-skills --skill chart-visualization

skills/chart-visualization/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소에서 자체 경로를 문서화할 수 있습니다.

Skill에 첫 다이어그램 및 차트 작업 부여

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt

Please turn this monthly revenue data into a chart: [2025-01: 100, 2025-02: 150, 2025-03: 130]. I want to see the trend over time.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

선택한 차트 유형을 데이터의 특성(시계열, 비교, 비율, 관계, 계층)에 맞춰 선택 가이드와 대조합니다

OpenDesign에서는 SKILL.md 링크로부터 chart-visualization을 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

OpenDesign 다운로드 빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author: AntV
Repository: github.com/antvis/chart-visualization-skills 브랜치 master
스킬 파일: skills/chart-visualization/SKILL.md 검증 시 기록된 콘텐츠 체크섬, 커밋 089b687
License: MIT LICENSE에서 확인
리포지토리 스타: 489 이 카탈로그에 2개의 skills가 포함된 전체 antvis/chart-visualization-skills 저장소에 대해 2026-09-14에 촬영한 GitHub 스냅샷입니다. chart-visualization의 평가 또는 사용 수가 아닙니다.
OpenDesign에서 검증됨: 2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

단계네 단계: 데이터 분석, JSON 본문 구성, curl로 API 호출, Markdown 이미지 출력
图表选择指南데이터 특성(시계열, 비교, 비율, 관계, 계층)을 차트 유형에 매핑합니다
API 접근POST 엔드포인트, 필수 필드, curl 요청/응답 예시를 설명합니다
지원되는 차트 유형지원되는 모든 차트 유형을 카테고리별로 나열한 표
공통 선택 파라미터공통 선택 파라미터(theme, width, height, title, texture)와 기본값
각 차트 data 형식각 개별 차트 유형에 필요한 정확한 데이터 형태와 선택적 필드

스킬 자체 설명

"将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程图等图表时调用此技能，通过 curl 工具调用 AntV API 生成图表图片"

SKILL.md의 front-matter 설명입니다. 전체 파일은 약 3,736자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

chart-visualization 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

이 스킬은 어떤 차트 유형을 생성할 수 있습니까

bar, column, waterfall, dual-axes, area, line, scatter, boxplot, histogram, violin, funnel, pie, liquid, word-cloud, organization-chart, mind-map, treemap, sankey, network-graph, venn, flow-diagram, fishbone-diagram, radar, spreadsheet를 포함한 광범위한 카탈로그를 지원합니다.

출력은 어떤 형식으로 제공됩니까

API는 resultObj URL이 포함된 JSON 객체를 반환하며, 스킬은 이를 Markdown 이미지 링크로 출력합니다.

Chart Visualization

실제 다이어그램 및 차트 작업에서 chart-visualization 실행

OpenDesign을 다운로드하고, SKILL.md 링크에서 chart-visualization을 가져온 후, 위 프롬프트를 붙여넣고 결과 전에 계획을 확인합니다.

OpenDesign 다운로드 모든 스킬 보기

터미널

npx skills add https://github.com/antvis/chart-visualization-skills --skill chart-visualization