chart-visualizationyazan AntV

Chart Visualization Skill.

Claude Code ve Codex için diyagram ve grafik skill'i: AntV API üzerinden veriyi çubuk, çizgi, pasta, radar, Sankey, zihin haritası ve akış şemaları olarak görselleştirir.

Diagrams & Data Visualization
Chart image

OpenDesign İndir Kullanım kılavuzunu görüntüle

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

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

Ön bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okunmuştur · tam hali 3.736 karakter

01 Ne yapar

chart-visualization Skill'in Claude Code ve Codex'te Yaptığı

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Bu skill, AntV'nin grafik oluşturma API'sini çağırarak kullanıcı verilerini grafiklere dönüştürür. Veriyi ve kullanıcının isteğini analiz ederek geniş bir katalogdan (çubuk, çizgi, pasta, radar, sankey, zihin haritası, akış diyagramı ve daha fazlası) en uygun grafik türünü seçer, gerekli type ve source alanlarını içeren bir JSON istek gövdesi oluşturur, API'yi curl ile çağırır ve döndürülen görüntü URL'sini bir Markdown görüntüsü olarak çıktı verir.

Desteklenen yaklaşık 20 grafik türünün her biri için veri şekli sözleşmesini, ayrıca tema, genişlik, yükseklik ve başlık gibi paylaşılan isteğe bağlı parametreleri belgeler; bu sayede ajan biçimleri tahmin etmek yerine geçerli istekler oluşturmak için somut bir referansa sahip olur.

Neler üretir

Bir başarı bayrağı ve bir resultObj görüntü URL'si içeren JSON API yanıtı

Örnek istemi görün ↗

Nasıl Çalışır

01
Grafik Türü Seçin
Kullanıcının verilerini ve gereksinimlerini analiz ederek en uygun grafik türünü seçin.
02
İstek Gövdesi Oluştur
API'nin şartnamesine uyan bir JSON istek gövdesi oluşturun.
03
API'yi Çağır
API'yi çağırmak ve grafik görselini oluşturmak için curl aracını kullanın.
04
Görseli Çıkar
Döndürülen görsel URL'sini Markdown görsel biçiminde çıkarın.

02 Uyumunuzu bulun

chart-visualization Skill'i Ne Zaman Kullanılır

Bu tür diyagram ve grafikler için Claude Code veya Codex'te chart-visualization becerisini kullanın. Aşağıdaki uyum ve sınırlar, becerinin kendi dosyasından alınmıştır.

İyi Uyum

Zaman serisi eğilimlerini çizgi grafikle veya kümülatif eğilimleri alan grafikle görselleştirme
Kategorileri çubuk grafikle yatay olarak veya sütun grafikle dikey olarak karşılaştırma
Orantısal bileşimi pasta grafikle veya hiyerarşik payı ısı haritasıyla (treemap) gösterme
Kategoriler arasındaki akışları sankey diyagramıyla veya korelasyonu dağılım grafiğiyle haritalama
Hiyerarşik veya ağaç yapılarını organizasyon şeması ya da zihin haritasıyla oluşturma

Sınırları Bilin

AntV API GerektirirSKILL.md bu bağımlılığı belirtir; skill projenizde bu olmadan çalışmaz.

Ne Sağlamalısınız

Grafik türüne özgü veri dizisiHer grafik türü belirli bir veri şekli bekler; örneğin bar/sütun grafikleri {category, value, group?} dizileri, sankey ise {source, target, value} dizileri gerektirir.
İsteğe bağlı görüntüleme parametreleriÇıkışı özelleştirmek için theme, width, height, title, style.texture ve eksen grafikleri için axisXTitle/axisYTitle sağlanabilir.

03 Skill'in içinde

chart-visualization Skill'in Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 7 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

Gerekli Alanlar
Her istek gövdesi bir type alanı ve "chart-visualization-skills" olarak ayarlanmış bir source alanı içermelidir.
Sabit Uç Nokta
Grafikler, tek bir sabit API uç noktasına POST yapılarak oluşturulur.
Varsayılan Tuval Boyutu
Grafik genişliği, geçersiz kılınmadığı sürece varsayılan olarak 600, yükseklik ise 400'dür.
Tema Seçenekleri
Tema varsayılan olarak "default"tur ancak "academy" veya "dark" olarak ayarlanabilir.
Doku Stili
style.texture varsayılan olarak "default" değerini alır, ancak el çizimi görünümü için "rough" olarak ayarlanabilir.
Yığınlama Varsayılanları
Çubuk grafikler varsayılan olarak stack: true değerini alır, sütun grafiklerde ise group varsayılan olarak true'dur.
Çıktı Formatı
API yanıtındaki resultObj URL'si, deseni kullanılarak bir Markdown görseli olarak işlenmelidir.

04 İşe koyun

Claude Code veya Codex içine chart-visualization kurun

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

Claude Code, Codex veya Ajanınıza chart-visualization ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal

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

skills/chart-visualization/SKILL.md için genel skills CLI formu; depo kendi yolunu belgeleyebilir.

Beceriye İlk Diyagram ve Grafik Görevi Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

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.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

Seçilen grafik türünü verinin özelliklerine (zaman serisi, karşılaştırma, oran, ilişki, hiyerarşi) göre seçim kılavuzuyla eşleştirin

OpenDesign'da chart-visualization'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubukta seçin.

OpenDesign İndir Hızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author: AntV
Repository: github.com/antvis/chart-visualization-skills Branch master
Skill dosyası: skills/chart-visualization/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit 089b687
License: MIT LICENSE dosyasından.
Repository yıldızları: 489 Bu katalogda 2 beceri içeren antvis/chart-visualization-skills deposunun tamamı için 14 Eylül 2026'da alınan GitHub anlık görüntüsü. chart-visualization için bir değerlendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı: 2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

步骤Dört adım: veriyi analiz et, JSON gövdesi oluştur, curl ile API'yi çağır, Markdown görseli çıkar
图表选择指南Veri özelliklerini (zaman serisi, karşılaştırma, oran, ilişkiler, hiyerarşi) grafik türleriyle eşleştirir
API 接口POST uç noktasını, gerekli alanları ve bir curl istek/yanıt örneğini açıklar
支持的图表类型Desteklenen tüm grafik türlerini kategoriye göre listeleyen tablo
通用可选参数Ortak isteğe bağlı parametreler (theme, width, height, title, texture) ve varsayılan değerleri
各图表 data 格式Her bir grafik türü için gereken tam veri şekli ve isteğe bağlı alanlar

Skill'in Kendi Açıklaması

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

SKILL.md dosyasından ön bilgi açıklaması. Dosyanın tamamı yaklaşık 3.736 karakter. GitHub'da dosyanın tamamını okuyun.

06 Kurmadan önce

chart-visualization Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Bu skill hangi grafik türlerini oluşturabilir

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 ve spreadsheet dahil geniş bir katalog destekler.

Çıktı hangi formatta gelir

API, resultObj URL'si içeren bir JSON nesnesi döndürür; skill bunu ardından bir Markdown görsel bağlantısı olarak çıkarır.

Chart Visualization

chart-visualization becerisini gerçek bir diyagram ve grafik görevinde çalıştırın.

OpenDesign'ı indirin, chart-visualization'ı SKILL.md bağlantısından içe aktarın, yukarıdaki komutu yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın