Keterampilan Agen Visualisasi Diagram

Keterampilan Visualisasi Bagan

Mengubah data menjadi bahasa visual untuk pemikiran yang lebih baik.

Ikhtisar

Di era pengambilan keputusan berbasis data, visualisasi dan analisis data yang efisien dan akurat sangat penting. AntV menawarkan rangkaian solusi visualisasi profesional, menyediakan perangkat yang kuat dan seperangkat keterampilan komprehensif untuk seluruh alur kerja—mulai dari desain bagan dan eksplorasi interaktif hingga analisis data mendalam. Ini memberdayakan pengguna untuk dengan cepat mengubah dataset kompleks menjadi bagan visual yang intuitif, secara signifikan menurunkan hambatan pembuatan melalui spesifikasi desain cerdas dan pustaka komponen yang kaya. Baik untuk pelaporan harian, dasbor dinamis, atau analisis interaktif yang canggih, AntV memberikan dukungan yang andal. Dengan mengintegrasikan kemampuan AI, alat-alat ini lebih menyederhanakan dan mengotomatiskan pembuatan dan optimalisasi visualisasi. Hal ini memungkinkan analis untuk lebih fokus pada penggalian wawasan dan mendorong keputusan bisnis, benar-benar membuat data terlihat dan dapat dipahami.

[!PERINGATAN] Proyek ini hanya menggabungkan kode yang dihasilkan oleh AI.

Cara berkontribusi:

1. Kirim isu yang menjelaskan masalah dengan jelas
2. Tetapkan ke @copilot dengan persyaratan Anda

Penggunaan

Tambahkan marketplace ini ke Claude Code:

/plugin marketplace add antvis/chart-visualization-skills

Atau Anda dapat langsung menginstal keterampilan untuk beberapa agen Anda:

npx skills add antvis/chart-visualization-skills

Keterampilan yang Tersedia

• 📊 chart-visualization: Keterampilan pembuatan bagan komprehensif yang didukung oleh AntV yang menyediakan lebih dari 26 jenis bagan untuk visualisasi data cerdas.

Chart Visualization secara cerdas memilih jenis bagan yang paling sesuai dari lebih dari 26 opsi yang tersedia, mengekstrak parameter berdasarkan spesifikasi terperinci, dan menghasilkan gambar bagan berkualitas tinggi. Ini mencakup visualisasi deret waktu, perbandingan, bagian-ke-keseluruhan, hubungan, geografis, hierarkis, statistik, dan visualisasi khusus.

• 🎨 infographic-creator: Membuat infografis yang indah berdasarkan konten teks yang diberikan. Gunakan ketika pengguna meminta untuk membuat infografis.

Infographic Creator menggunakan AntV Infographic untuk mengubah data, informasi, dan pengetahuan menjadi bahasa visual yang dapat dipahami. Ini menggabungkan desain visual dengan visualisasi data, menyediakan lebih dari 50 templat termasuk daftar, urutan, hierarki, perbandingan, relasi, dan bagan. Ini memampatkan informasi kompleks dengan simbol intuitif untuk membantu audiens dengan cepat memahami dan mengingat poin-poin penting.

• 🖼️ icon-retrieval: Mencari dan mengambil string SVG ikon dari perpustakaan ikon. Mengembalikan hingga 5 ikon yang cocok secara default (dapat disesuaikan).

Icon Search membantu pengguna menemukan ikon yang sesuai untuk berbagai kasus penggunaan termasuk infografis, pengembangan web, desain, dan lainnya. Cari berdasarkan kata kunci untuk menemukan ikon yang tersedia dan mengambil string SVG mereka secara langsung. Setiap pencarian mengembalikan hingga 5 ikon yang cocok secara default (dapat disesuaikan melalui parameter topK) dengan URL dan konten SVG lengkap.

• 📝 narrative-text-visualization: Menghasilkan visualisasi teks naratif terstruktur dari data menggunakan Sintaks T8.

Narrative Text Visualization (T8) mengubah data tidak terstruktur menjadi laporan naratif kaya semantik menggunakan Sintaks T8 - bahasa deklaratif mirip Markdown untuk membuat narasi data dengan anotasi entitas. Ramah LLM dan agnostik kerangka kerja, bekerja dengan mulus dengan HTML, React, dan Vue. Sempurna untuk membuat laporan analisis data, ringkasan, dan dokumen wawasan dengan entitas seperti metrik, nilai, tren, dan dimensi yang diberi label dengan benar. Fitur termasuk bagan mini bawaan, gaya terstandarisasi, dan pemformatan profesional. Mendukung sumber data autentik dan menyediakan rendering yang ringan dan agnostik teknologi.

• 📋 antv-s2-expert: Asisten pengembangan tabel analisis silang multi-dimensi S2. Gunakan ketika pengguna membutuhkan bantuan dengan tabel pivot S2, lembar tabel, atau pengembangan terkait @antv/s2.

AntV S2 Expert membantu pengguna mengembangkan dengan mesin tabel analisis silang multi-dimensi S2. Ini memberikan panduan komprehensif tentang mesin inti @antv/s2, binding kerangka kerja @antv/s2-react dan @antv/s2-vue, komponen analisis lanjutan @antv/s2-react-components, dan rendering sisi server @antv/s2-ssr. Mencakup tabel pivot, lembar tabel, sel kustom, tema, acara, interaksi, pengurutan, total, tooltip, baris/kolom beku, ikon, paginasi, dan lainnya.

• 🕸️ antv-g6-graph: Generator kode visualisasi grafik G6 v5. Gunakan ketika pengguna perlu menghasilkan grafik G6 — grafik jaringan, grafik pohon, diagram alir, peta pikiran, dan visualisasi data relasional atau terstruktur grafik lainnya dengan pustaka G6.

AntV G6 Graph menghasilkan kode G6 v5 yang akurat dan dapat dijalankan mengikuti praktik terbaik. Ini mencakup inisialisasi grafik inti, struktur data (node, edge, combo), lebih dari 10 algoritma tata letak (force, dagre, circular, grid, mindmap, fishbone, dll.), semua tipe node/edge/combo bawaan, manajemen state, lebih dari 15 perilaku (drag-canvas, zoom-canvas, click-select, lasso, dll.), lebih dari 10 plugin (minimap, tooltip, toolbar, legend, timebar, dll.), pengembangan elemen kustom, transformasi, dan animasi. Rel pengaman bawaan mencegah jebakan migrasi umum dari v4 ke v5 seperti menggunakan konstruktor G6.Graph() yang sudah usang, API graph.data(), atau konfigurasi perilaku berbasis Mode.

• 📈 antv-g2-chart: Generator kode bagan G2 v5. Gunakan ketika pengguna perlu menghasilkan bagan G2 — diagram batang, diagram garis, diagram pai, plot sebar, diagram area, peta panas, dan visualisasi data statistik lainnya dengan pustaka G2.

AntV G2 Chart menghasilkan kode G2 v5 yang akurat dan dapat dijalankan mengikuti praktik terbaik Spec Mode. Ini mencakup lebih dari 30 jenis bagan (interval, line, area, point, rect, cell, treemap, sankey, chord, wordCloud, gauge, dan lainnya), transformasi data (stackY, dodgeX, binX, fold, dll.), sistem koordinat (cartesian, polar, theta, radial), skala, interaksi (brush, slider, filter legenda), komponen (axis, legend, tooltip, annotation), dan komposisi multi-tampilan. Rel pengaman bawaan mencegah jebakan migrasi umum dari v4 ke v5 seperti menggunakan API berantai yang sudah usang, nama palet yang tidak valid, atau merujuk d3 dalam kode pengguna.

Hasil Evaluasi

Pendekatan Harness Engineering telah diuji secara ketat terhadap 174 kasus uji pembuatan bagan, menunjukkan peningkatan yang signifikan dibandingkan metode dasar:

Hasil menunjukkan bahwa Harness Engineering memungkinkan LLM mencapai akurasi hampir siap produksi (hingga 98,2%), secara signifikan mengungguli pendekatan dasar Context7.

[!KIAT] Keterampilan lainnya akan segera hadir.

Penggunaan Pustaka

Ini dapat digunakan sebagai pustaka dalam proyek Node.js Anda dengan CLI dan API.

Penggunaan CLI

Kami juga menyediakan alat CLI bernama antv untuk penggunaan mudah di terminal Anda, Instal secara global:

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

Ambil atau daftar keterampilan berdasarkan kueri:

# Ambil keterampilan berdasarkan kueri (hanya metadata)
antv retrieve "bar chart" --library g2 --topk 10

# Ambil keterampilan dengan konten markdown lengkap (batasan inti otomatis ditambahkan di depan)
antv retrieve "bar chart" --library g2 --content

# Ambil keterampilan dan output sebagai JSON
antv retrieve "bar chart" --library g2 --output json

# Dapatkan keterampilan berdasarkan ID persisnya
antv get g2-mark-interval-basic --library g2

# Daftar semua keterampilan yang tersedia
antv list --library g2 --category core

# Daftar keterampilan dan output sebagai JSON
antv list --output json

# Tampilkan info keterampilan (batasan inti dari SKILL.md)
antv info --library g2

# Tampilkan info keterampilan sebagai JSON
antv info --library g2 --output json

Usage for the command:

Usage: antv [opsi] [perintah]

Alat CLI untuk pengambilan keterampilan visualisasi bagan AntV

Options:
  -V, --version               tampilkan nomor versi
  -h, --help                  tampilkan bantuan untuk perintah

Commands:
  retrieve [opsi] <query>     Cari keterampilan yang cocok dengan kueri
  get [opsi] <id>             Dapatkan keterampilan berdasarkan ID persisnya
  list [opsi]                 Daftar semua keterampilan yang tersedia
  info [opsi]                 Tampilkan info keterampilan dari SKILL.md
  help [perintah]             tampilkan bantuan untuk perintah

Options for retrieve:
  --library <lib>             Filter berdasarkan pustaka (mis. g2, g6)
  --topk <n>                  Jumlah hasil yang akan dikembalikan (default: 7)
  --content                   Sertakan konten body markdown dalam hasil; batasan inti (SKILL.md Bagian 1-2) selalu ditambahkan di depan sebagai hasil pertama
  --output <format>           Format output: json | text (default: "text")

Catatan: --content selalu menambahkan batasan inti pustaka (Bagian 1 & 2 dari SKILL.md, hingga penanda <!-- CONSTRAINTS:END -->) sebagai hasil pertama, memastikan model menerima aturan penting bersama dengan dokumen referensi.

Penggunaan API

// Hanya metadata (tanpa konten)
const skills = retrieve('bar chart', { library: 'g2', topK: 5 });

// Dengan konten markdown lengkap (batasan inti otomatis ditambahkan di depan sebagai hasil pertama)
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true });

// Dengan konten tetapi tanpa batasan inti
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true, includeInfo: false });

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

interface RetrieveOptions {
  library?: string;   // Library filter, e.g. 'g2' or 'g6'
  topK?: number;      // Number of results (default: 7)
  content?: boolean;  // Include markdown content body (default: false)
  includeInfo?: boolean; // Prepend SKILL.md core constraints (default: same as content)
}

Catatan:

• Pengambilan default mengembalikan objek hasil ringan tanpa field content.
• content: true mengembalikan konten body markdown (metadata frontmatter dikecualikan).
• Ketika includeInfo true (default ketika content: true), blok batasan inti — SKILL.md hingga <!-- CONSTRAINTS:END --> — disuntikkan sebagai elemen pertama (id diawali dengan __info__), memastikan model selalu melihat aturan penting.

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;            // Full SKILL.md body (after frontmatter)
  constraintsContent: string; // SKILL.md body up to <!-- CONSTRAINTS:END --> marker; injected by retrieve when includeInfo: true
}

Lisensi

Lisensi MIT - lihat file LICENSE untuk detailnya.