차트 시각화 에이전트 기술

차트 시각화 스킬

더 나은 사고를 위해 데이터를 시각적 언어로 전환합니다.

개요

데이터 기반 의사 결정 시대에 효율적이고 정확한 데이터 시각화 및 분석이 가장 중요합니다. 앤트브이(AntV)는 전문적인 시각화 솔루션 제품군을 제공하여 차트 디자인 및 인터랙티브 탐색부터 심층 데이터 분석까지 전체 워크플로우를 위한 강력한 도구 키트와 포괄적인 스킬 세트를 제공합니다. 이를 통해 사용자는 복잡한 데이터 세트를 직관적인 시각적 차트로 신속하게 변환할 수 있으며, 지능형 디자인 사양과 풍부한 컴포넌트 라이브러리를 통해 제작 장벽을 크게 낮춥니다. 일일 보고, 동적 대시보드 또는 정교한 인터랙티브 분석 등 어떤 경우에도 앤트브이는 신뢰할 수 있는 지원을 제공합니다. AI 기능을 통합함으로써 이 도구들은 시각화의 생성 및 최적화를 더욱 간소화하고 자동화합니다. 이를 통해 분석가는 인사이트 발견 및 비즈니스 의사 결정 추진에 더 집중할 수 있으며, 데이터를 진정으로 가시적이고 이해하기 쉽게 만듭니다.

[!WARNING] 이 프로젝트는 AI 생성 코드만 병합합니다.

기여 방법:

1. 문제를 명확하게 설명하는 이슈를 제출하세요
2. 요구 사항과 함께 @copilot에게 할당하세요

사용법

Claude Code에 이 마켓플레이스를 추가합니다:

/plugin marketplace add antvis/chart-visualization-skills

또는 여러 에이전트를 위해 스킬을 직접 설치할 수 있습니다:

npx skills add antvis/chart-visualization-skills

사용 가능한 스킬

• 📊 차트 시각화: 앤트브이로 구동되는 포괄적인 차트 생성 스킬로, 지능형 데이터 시각화를 위해 26개 이상의 차트 유형을 제공합니다.

Chart Visualization은 26개 이상의 사용 가능한 옵션 중에서 가장 적합한 차트 유형을 지능적으로 선택하고, 상세 사양을 기반으로 매개변수를 추출하여 고품질 차트 이미지를 생성합니다. 시계열, 비교, 부분 대 전체, 관계, 지리, 계층, 통계 및 특수 시각화를 다룹니다.

• 🎨 인포그래픽 생성기: 주어진 텍스트 콘텐츠를 기반으로 아름다운 인포그래픽을 생성합니다. 사용자가 인포그래픽 생성을 요청할 때 사용합니다.

Infographic Creator는 앤트브이 인포그래픽을 사용하여 데이터, 정보, 지식을 인식 가능한 시각적 언어로 변환합니다. 시각 디자인과 데이터 시각화를 결합하여 목록, 순서, 계층, 비교, 관계 및 차트 등 50개 이상의 템플릿을 제공합니다. 직관적인 기호로 복잡한 정보를 압축하여 청중이 핵심 내용을 빠르게 이해하고 기억할 수 있도록 돕습니다.

• 🖼️ 아이콘 검색: 아이콘 라이브러리에서 아이콘 SVG 문자열을 검색하고 가져옵니다. 기본적으로 최대 5개의 일치하는 아이콘을 반환합니다 (사용자 지정 가능).

Icon Search는 인포그래픽, 웹 개발, 디자인 등 다양한 사용 사례에 적합한 아이콘을 찾도록 도와줍니다. 키워드로 검색하여 사용 가능한 아이콘을 발견하고 SVG 문자열을 직접 가져옵니다. 각 검색은 기본적으로 최대 5개의 일치하는 아이콘을 반환하며 (topK 매개변수로 사용자 지정 가능), 아이콘의 URL과 전체 SVG 콘텐츠를 제공합니다.

• 📝 내러티브 텍스트 시각화: T8 구문을 사용하여 데이터로부터 구조화된 내러티브 텍스트 시각화를 생성합니다.

Narrative Text Visualization (T8)은 엔티티 주석이 포함된 데이터 내러티브를 생성하기 위한 선언적 마크다운 유사 언어인 T8 구문을 사용하여 비구조화된 데이터를 의미론적으로 풍부한 내러티브 보고서로 변환합니다. LLM 친화적이고 프레임워크에 구애받지 않으며 HTML, React, Vue와 원활하게 작동합니다. 지표, 값, 추세, 차원 등의 엔티티가 적절히 레이블 지정된 데이터 분석 보고서, 요약 및 인사이트 문서를 만드는 데 완벽합니다. 특징으로는 내장 미니 차트, 표준화된 스타일, 전문적인 서식이 있습니다. 실제 데이터 소스를 지원하며 가볍고 기술에 구애받지 않는 렌더링을 제공합니다.

• 📋 앤트브이 S2 전문가: S2 다차원 교차 분석 테이블 개발 도우미입니다. 사용자가 S2 피벗 테이블, 테이블 시트 또는 @antv/s2 관련 개발에 도움이 필요할 때 사용합니다.

AntV S2 Expert는 S2 다차원 교차 분석 테이블 엔진을 사용한 개발을 돕습니다. @antv/s2 코어 엔진, @antv/s2-react 및 @antv/s2-vue 프레임워크 바인딩, @antv/s2-react-components 고급 분석 컴포넌트, @antv/s2-ssr 서버 측 렌더링에 대한 포괄적인 지침을 제공합니다. 피벗 테이블, 테이블 시트, 사용자 정의 셀, 테마, 이벤트, 인터랙션, 정렬, 합계, 툴팁, 고정 행/열, 아이콘, 페이지네이션 등을 다룹니다.

• 🕸️ 앤트브이 G6 그래프: G6 버전 5 그래프 시각화 코드 생성기입니다. 사용자가 G6 그래프(네트워크 그래프, 트리 그래프, 플로우 차트, 마인드 맵 및 관계형 또는 그래프 구조 데이터 시각화)를 G6 라이브러리로 생성해야 할 때 사용합니다.

AntV G6 Graph는 모범 사례를 따라 정확하고 실행 가능한 G6 버전 5 코드를 생성합니다. 핵심 그래프 초기화, 데이터 구조(노드, 엣지, 콤보), 10개 이상의 레이아웃 알고리즘(force, dagre, circular, grid, mindmap, fishbone 등), 모든 내장 노드/엣지/콤보 유형, 상태 관리, 15개 이상의 동작(drag-canvas, zoom-canvas, click-select, lasso 등), 10개 이상의 플러그인(minimap, tooltip, toolbar, legend, timebar 등), 사용자 정의 요소 개발, 변환 및 애니메이션을 다룹니다. 내장된 가드 레일은 더 이상 사용되지 않는 G6.Graph() 생성자, graph.data() API 또는 모드 기반 동작 구성과 같은 v4→v5 마이그레이션의 일반적인 함정을 방지합니다.

• 📈 앤트브이 G2 차트: G2 버전 5 차트 코드 생성기입니다. 사용자가 G2 차트(막대 차트, 선 차트, 파이 차트, 산점도, 영역 차트, 히트맵 및 기타 통계 데이터 시각화)를 G2 라이브러리로 생성해야 할 때 사용합니다.

AntV G2 Chart는 Spec Mode 모범 사례를 따라 정확하고 실행 가능한 G2 버전 5 코드를 생성합니다. 30개 이상의 차트 유형(interval, line, area, point, rect, cell, treemap, sankey, chord, wordCloud, gauge 등), 데이터 변환(stackY, dodgeX, binX, fold 등), 좌표계(cartesian, polar, theta, radial), 스케일, 상호작용(brush, slider, legend filter), 컴포넌트(axis, legend, tooltip, annotation) 및 다중 보기 구성을 다룹니다. 내장된 가드 레일은 더 이상 사용되지 않는 체인 API, 잘못된 팔레트 이름 또는 사용자 코드에서 d3 참조와 같은 v4→v5 마이그레이션의 일반적인 함정을 방지합니다.

평가 결과

하네스 엔지니어링 접근 방식은 174개의 차트 생성 테스트 케이스에 대해 엄격하게 테스트되었으며, 기준 방법 대비 상당한 개선을 보여줍니다:

The results show that Harness Engineering enables LLMs to achieve near-production-ready accuracy (up to 98.2%), significantly outperforming the Context7 baseline approach.

[!TIP] 더 많은 스킬이 곧 제공됩니다.

라이브러리 사용법

Node.js 프로젝트에서 CLI 및 API와 함께 라이브러리로 사용할 수 있습니다.

CLI 사용법

터미널에서 쉽게 사용할 수 있도록 antv라는 CLI 도구도 제공합니다. 전역으로 설치하세요:

npm install -g @antv/chart-visualization-skills

쿼리로 스킬 검색 또는 목록 보기:

# 쿼리로 스킬 검색 (메타데이터만)
antv retrieve "bar chart" --library g2 --topk 10

# 전체 마크다운 콘텐츠와 함께 스킬 검색 (핵심 제약 조건이 자동으로 앞에 추가됨)
antv retrieve "bar chart" --library g2 --content

# 스킬을 검색하고 JSON으로 출력
antv retrieve "bar chart" --library g2 --output json

# 정확한 ID로 스킬 가져오기
antv get g2-mark-interval-basic --library g2

# 사용 가능한 모든 스킬 목록
antv list --library g2 --category core

# 스킬 목록을 JSON으로 출력
antv list --output json

# 스킬 정보 표시 (SKILL.md의 핵심 제약 조건)
antv info --library g2

# 스킬 정보를 JSON으로 표시
antv info --library g2 --output json

명령 사용법:

Usage: antv [options] [command]

AntV 차트 시각화 스킬 검색을 위한 CLI 도구

Options:
  -V, --version               버전 번호 출력
  -h, --help                  명령 도움말 표시

Commands:
  retrieve [options] <query>  쿼리와 일치하는 스킬 검색
  get [options] <id>          정확한 ID로 스킬 가져오기
  list [options]              사용 가능한 모든 스킬 목록
  info [options]              SKILL.md에서 스킬 정보 표시
  help [command]              명령 도움말 표시

Options for retrieve:
  --library <lib>             라이브러리로 필터링 (예: g2, g6)
  --topk <n>                  반환할 결과 수 (기본값: 7)
  --content                   결과에 마크다운 콘텐츠 본문 포함; 핵심 제약 조건 (SKILL.md 섹션 1-2)이 항상 첫 번째 결과로 앞에 추가됨
  --output <format>           출력 형식: json | text (기본값: "text")

참고: --content은 항상 라이브러리의 핵심 제약 조건(<!-- CONSTRAINTS:END --> 마커까지의 SKILL.md 섹션 1 및 2)을 첫 번째 결과로 앞에 추가하여 모델이 참조 문서와 함께 필수 규칙을 받도록 합니다.

API 사용법

import { retrieve } from '@antv/chart-visualization-skills';

// 메타데이터만 (콘텐츠 없음)
const skills = retrieve('bar chart', { library: 'g2', topK: 5 });

// 전체 마크다운 콘텐츠 포함 (핵심 제약 조건이 첫 번째 결과로 자동 추가됨)
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true });

// 콘텐츠 포함하지만 핵심 제약 조건 없음
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true, includeInfo: false });

retrieve(query: string, options?: RetrieveOptions): Skill[]

interface RetrieveOptions {
  library?: string;   // 라이브러리 필터, 예: 'g2' 또는 'g6'
  topK?: number;      // 결과 수 (기본값: 7)
  content?: boolean;  // 마크다운 콘텐츠 본문 포함 (기본값: false)
  includeInfo?: boolean; // SKILL.md 핵심 제약 조건을 앞에 추가 (기본값: content와 동일)
}

참고:

• 기본 검색은 content 필드가 없는 경량 결과 객체를 반환합니다.
• content: true는 마크다운 콘텐츠 본문을 반환합니다 (프론트매터 메타데이터는 제외됩니다).
• includeInfo가 true일 때 (content: true일 때의 기본값), 핵심 제약 조건 블록 — <!-- CONSTRAINTS:END -->까지의 SKILL.md — 이 첫 번째 요소로 주입되며(id가 __info__로 접두사가 붙음), 이로써 모델이 항상 필수 규칙을 볼 수 있도록 합니다.

import { info } from '@antv/chart-visualization-skills';

const skillInfo = info('g2');
// => { name: 'antv-g2-chart', description: '...', content: '...', constraintsContent: '...' }

info(library?: string): SkillInfo | undefined

interface SkillInfo {
  name: string;
  description: string;
  content: string;            // 전체 SKILL.md 본문 (프론트매터 이후)
  constraintsContent: string; // <!-- CONSTRAINTS:END --> 마커까지의 SKILL.md 본문; includeInfo가 true일 때 retrieve에 의해 주입됨
}

라이선스

MIT 라이선스 - 자세한 내용은 LICENSE 파일을 참조하세요.