# Keterampilan Agen Visualisasi Diagram > Ubah kumpulan data kompleks menjadi diagram visual yang intuitif dengan Keterampilan Visualisasi Diagram AntV, menawarkan 26+ jenis diagram dan pembuatan bertenaga AI. Mulai buat cerita data yang berdampak dengan mudah. - Canonical: https://nanoskill.ai/id/skills/chart-visualization-skills - Markdown: https://nanoskill.ai/id/skills/chart-visualization-skills.md - Author: antvis - Published: 2026-06-09T05:00:00.000Z - Updated: 2026-07-25T04:33:38.870Z - Language: id - Source type: github - Popularity signal: 523 ## Sources - https://github.com/antvis/chart-visualization-skills ## Install ```shell npx skills add https://github.com/antvis/chart-visualization-skills ``` ## About Keterampilan Visualisasi Diagram AntV menawarkan rangkaian solusi visualisasi profesional yang dirancang untuk mengubah kumpulan data kompleks menjadi diagram visual yang intuitif secara efisien dan akurat. Diprakarsai oleh Ant Group, kumpulan keterampilan ini memberdayakan pengguna untuk menavigasi seluruh alur kerja mulai dari desain diagram dan eksplorasi interaktif hingga analisis data mendalam, secara signifikan menurunkan hambatan pembuatan melalui spesifikasi desain cerdas dan pustaka komponen yang kaya. Ini memberikan dukungan kuat untuk pelaporan harian, dasbor dinamis, dan analisis interaktif canggih, membuat data terlihat dan mudah dipahami. Rangkaian ini mencakup keterampilan khusus seperti "chart-visualization" untuk menghasilkan 26+ jenis diagram, "infographic-creator" untuk mengubah teks menjadi infografis visual yang menarik dengan 50+ templat, dan "narrative-text-visualization" untuk mengonversi data tidak terstruktur menjadi laporan kaya semantik menggunakan Sintaks T8. Kemampuan ini semakin ditingkatkan dengan integrasi AI, menyederhanakan dan mengotomatiskan pembuatan serta pengoptimalan visualisasi, memungkinkan analis lebih fokus mengungkap wawasan dan mendorong keputusan bisnis. Pengembang juga dapat memanfaatkan keterampilan khusus seperti "antv-s2-expert" untuk tabel analisis silang multi-dimensi, "antv-g6-graph" untuk menghasilkan visualisasi graf G6 v5, dan "antv-g2-chart" untuk membuat diagram statistik G2 v5. Alat-alat ini menyediakan kode yang akurat dan dapat dijalankan mengikuti praktik terbaik, mencakup fungsionalitas inti, berbagai algoritma tata letak, tipe komponen, dan interaksi. Keterampilan ini dapat diintegrasikan ke dalam proyek Node.js melalui CLI atau API, menawarkan fleksibilitas untuk berbagai kebutuhan pengembangan. ## Key features - **Pembuatan Grafik Komprehensif**: Akses 26+ tipe grafik cerdas untuk berbagai kebutuhan visualisasi data, termasuk deret waktu, perbandingan, hubungan, dan data geografis. - **Pembuatan Infografis Berbasis AI**: Hasilkan infografis yang indah dari konten teks menggunakan 50+ templat, mengubah informasi menjadi bahasa visual yang mudah dipahami dengan simbol intuitif. - **Visualisasi Teks Naratif Terstruktur**: Ubah data tak terstruktur menjadi laporan naratif yang kaya secara semantik menggunakan Sintaks T8, bahasa mirip Markdown untuk narasi data dengan anotasi entitas dan grafik mini. - **Tabel Analisis Silang Multi-Dimensi**: Manfaatkan AntV S2 Expert untuk mengembangkan tabel pivot, lembar tabel, dan sel kustom, menawarkan panduan komprehensif untuk analisis data multi-dimensi. - **Pembuatan Grafik Lanjutan dan Grafik Statistik**: Hasilkan kode grafik G6 yang akurat untuk grafik jaringan, pohon, dan diagram alir, serta kode grafik G2 untuk visualisasi statistik seperti diagram batang, garis, dan lingkaran, mengikuti praktik terbaik. ## Use cases - **Buat Laporan Harian dan Dasbor Dinamis**: Dengan cepat ubah set data kompleks menjadi grafik visual yang intuitif untuk pelaporan harian dan dasbor dinamis, memungkinkan pengambilan keputusan berbasis data yang efisien. - **Kembangkan Alat Analisis Interaktif yang Canggih**: Manfaatkan toolkit AntV yang tangguh untuk membangun aplikasi analisis interaktif canggih, menyediakan kemampuan eksplorasi data dan visualisasi yang mendalam. - **Hasilkan Visualisasi yang Dioptimalkan AI**: Rampingkan dan otomatiskan pembuatan dan pengoptimalan visualisasi data dengan kemampuan AI terintegrasi, memungkinkan analis untuk fokus pada wawasan. - **Ubah Data Menjadi Infografis yang Menarik**: Ubah data, informasi, dan pengetahuan menjadi infografis yang menarik secara visual menggunakan berbagai templat untuk mengomunikasikan ide yang kompleks secara jelas dan mudah diingat. ## Result preview Jelajahi laporan visualisasi data profesional bertenaga AI yang didukung oleh Keterampilan ini. ![A chart visualizing 'Salary Distribution by Department' using box plots for Engineering, Design, Marketing, Sales, and Support. Each box plot shows median, interquartile ranges, whiskers, and outliers, with distinct color coding for each department. The chart clearly conveys salary spread and variability across departments.](https://file.nanoskill.ai/chart-outcome-1.png) ![A line chart titled 'Cumulative Growth Trajectory' showing growth over quarters from Q1 23 to Q4 24. Data points are labeled with numerical values and connected by a green line, with a shaded area beneath to highlight cumulative increase. The chart demonstrates steady upward growth from 1,200 to 6,100.](https://file.nanoskill.ai/chart-outcome-2.png) ![A composite image containing two data visualizations. The upper chart is a scatter plot titled 'Investment vs Performance' comparing investment amounts to performance scores for three groups, represented by color-coded circular markers of varying sizes. The lower chart is a bubble chart titled 'GDP vs Life Expectancy' showing GDP per capita versus life expectancy for countries including Japan, Sweden, USA, Germany, China, Brazil, India, and Kenya. Each country is represented by a colored bubble sized by an additional variable, highlighting global economic and health disparities.](https://file.nanoskill.ai/chart-outcome-3.png) ## Result walkthrough ### Instal Tambahkan Keterampilan Visualisasi Diagram AntV ke agen AI Anda. ![A screenshot of an AI assistant terminal showing the installation of the AntV chart-visualization-skills package. The assistant logs the execution of the command to add the skills repository via 'npx skills add', confirms interactive selection with the '--yes' flag, and lists all 9 installed skills including chart generation, graph visualization, multi-dimensional tables, editing engines, infographics, narrative visualizations, and skill maintenance. The log notes symlinking into Hermes Agent and a security assessment showing low/medium risk with nothing critical.](https://file.nanoskill.ai/chart-visualization-install.png) ### Deskripsikan Deskripsikan area topik yang ingin Anda visualisasikan, termasuk tujuan, audiens target, dan jenis atau gaya diagram yang disukai. ![A screenshot of an AI assistant task panel for creating a comprehensive AntV chart visualization package. The instructions specify generating multiple chart types, infographics from textual data with templates, and narrative-style reports. Emphasis is on a clean, modern, professional style, ensuring readability, hierarchy, interactivity, dynamic dashboards, drill-down exploration, cross-analysis, and production-ready code snippets for Node.js integration. The final output should be a structured PDF or interactive dashboard, balancing aesthetic elegance with functional clarity.](https://file.nanoskill.ai/chart-visualization-task.png) ### Optimalkan Visualisasi Keterampilan ini menghasilkan diagram dan dasbor yang dioptimalkan untuk kejelasan, tata letak, dan wawasan. ![A screenshot showing the AI assistant output after loading AntV visualization skills and preparing a professional PowerPoint deck. The assistant indicates understanding of all AntV visualization tools and plans to build a data visualization showcase featuring real data across multiple chart types, infographics, narrative visualizations, network graphs, and S2 tables, ready for presentation in PPT format.](https://file.nanoskill.ai/chart-visualization-outcome.png) ## Skill definition # 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: ```bash /plugin marketplace add antvis/chart-visualization-skills ``` Atau Anda dapat langsung menginstal keterampilan untuk beberapa agen Anda: ```bash 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: | **Model** | **G2** | **G6** | | :---: | :---: | :---: | | qwen3-coder-480b-a35b-instruct | ✨ 98.2% +17.7% | 94.8% +15.6% | | Kimi-K2.5 | 97.7% +17.2% | 96.9% +17.7% | | GLM-5.1 | 93.6% +13.1% | 92.8% +13.6% | | DeepSeek-V3.2 | 90.8% +10.3% | ✨ 97.9% +18.7% | | Context7 Dasar | 80.5% | 79.2% | 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: ```bash npm install -g @antv/chart-visualization-skills ``` **Ambil atau daftar keterampilan berdasarkan kueri**: ```bash # 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] Cari keterampilan yang cocok dengan kueri get [opsi] 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 Filter berdasarkan pustaka (mis. g2, g6) --topk 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 output: json | text (default: "text") ``` > Catatan: `--content` selalu menambahkan batasan inti pustaka (Bagian 1 & 2 dari SKILL.md, hingga penanda ``) sebagai hasil pertama, memastikan model menerima aturan penting bersama dengan dokumen referensi. ### Penggunaan API ```typescript // 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 }); ``` ```typescript 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) } ``` | Opsi | Tipe | Default | Deskripsi | | :--- | :--- | :--- | :--- | | `library` | `string` | semua | Filter pustaka (`g2` atau `g6`) | | `topK` | `number` | `7` | Jumlah hasil | | `content` | `boolean` | `false` | Sertakan konten body markdown | | `includeInfo` | `boolean` | sama dengan `content` | Tambahkan batasan inti SKILL.md (Bagian 1-2) di depan sebagai hasil pertama | > 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 `` β€” disuntikkan sebagai elemen pertama (id diawali dengan `__info__`), memastikan model selalu melihat aturan penting. ```typescript import { info } from '@antv/chart-visualization-skills'; const skillInfo = info('g2'); // => { name: 'antv-g2-chart', description: '...', content: '...', constraintsContent: '...' } ``` ```typescript 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 marker; injected by retrieve when includeInfo: true } ``` | Parameter | Tipe | Default | Deskripsi | | :--- | :--- | :--- | :--- | | `library` | `string` | `'g2'` | Pustaka yang akan diambil informasinya (`g2` atau `g6`) | ## Lisensi Lisensi MIT - lihat file [LICENSE](LICENSE) untuk detailnya. ## FAQ ### Apa itu Keterampilan Visualisasi Grafik AntV? Keterampilan Visualisasi Grafik AntV adalah sekumpulan alat dan kemampuan yang didukung oleh AntV, dirancang untuk membantu pengguna memvisualisasikan dan menganalisis data secara efisien dan akurat. Termasuk fitur pembuatan grafik, pembuatan infografis, visualisasi teks naratif, serta pengembangan grafik khusus dan grafik statistik. ### Berapa banyak tipe grafik yang didukung oleh keterampilan visualisasi grafik? Keterampilan visualisasi grafik menyediakan 26+ tipe grafik untuk visualisasi data cerdas, mencakup berbagai representasi data termasuk deret waktu, perbandingan, hubungan, dan data geografis. ### Dapatkah saya membuat infografis dengan keterampilan ini? Ya, keterampilan pembuat infografis memungkinkan Anda membuat infografis yang indah berdasarkan konten teks yang diberikan. Ini menggunakan AntV Infographic dan menawarkan 50+ templat untuk mengubah data menjadi bahasa visual yang mudah dipahami. ### Apa itu Visualisasi Teks Naratif (Sintaks T8)? Visualisasi Teks Naratif (T8) mengubah data tak terstruktur menjadi laporan naratif yang kaya secara semantik menggunakan Sintaks T8, bahasa deklaratif mirip Markdown. Ini dirancang untuk membuat narasi data dengan anotasi entitas, grafik mini, dan pemformatan profesional, cocok untuk laporan analisis dan dokumen wawasan. ### Bagaimana Keterampilan Visualisasi Grafik AntV membantu analisis multi-dimensi? Keterampilan antv-s2-expert berfungsi sebagai asisten pengembangan untuk mesin tabel analisis silang multi-dimensi S2. Memberikan panduan komprehensif untuk bekerja dengan tabel pivot, lembar tabel, sel kustom, dan berbagai fitur lainnya dari @antv/s2. ### Apakah ada alat untuk menghasilkan grafik khusus dan grafik statistik? Ya, keterampilan antv-g6-graph menghasilkan kode G6 v5 untuk visualisasi grafik seperti grafik jaringan, grafik pohon, dan diagram alir. Keterampilan antv-g2-chart menghasilkan kode G2 v5 untuk grafik statistik seperti diagram batang, diagram garis, diagram lingkaran, dan diagram sebar, mengikuti praktik terbaik.