Diagrammvisualisierungs-Agentenfähigkeiten

Diagramm-Visualisierungsfähigkeiten

Daten in eine visuelle Sprache verwandeln, um besser zu denken.

Überblick

Im Zeitalter datengesteuerter Entscheidungsfindung sind effiziente und präzise Datenvisualisierung und -analyse von größter Bedeutung. AntV bietet eine professionelle Suite von Visualisierungslösungen, die ein robustes Toolkit und umfassende Fähigkeiten für den gesamten Workflow bereitstellt – vom Diagrammdesign und der interaktiven Erkundung bis hin zur tiefgehenden Datenanalyse. Es befähigt Benutzer, komplexe Datensätze schnell in intuitive visuelle Diagramme umzuwandeln, wobei die Erstellungshürde durch intelligente Designspezifikationen und eine umfangreiche Komponentenbibliothek erheblich gesenkt wird. Ob für tägliche Berichte, dynamische Dashboards oder anspruchsvolle interaktive Analysen – AntV liefert zuverlässige Unterstützung. Durch die Integration von KI-Funktionen optimieren und automatisieren diese Werkzeuge die Erstellung und Optimierung von Visualisierungen weiter. Dies ermöglicht es Analysten, sich stärker auf die Gewinnung von Erkenntnissen und die Förderung von Geschäftsentscheidungen zu konzentrieren, wodurch Daten wirklich sichtbar und verständlich werden.

[!WARNING] Dieses Projekt fasst nur KI-generierten Code zusammen.

So können Sie beitragen:

1. Reichen Sie ein Issue ein, das das Problem klar beschreibt.
2. Weisen Sie es @copilot mit Ihren Anforderungen zu.

Verwendung

Fügen Sie diesen Marktplatz zu Claude Code hinzu:

/plugin marketplace add antvis/chart-visualization-skills

Oder Sie können die Fähigkeiten direkt für Ihre mehreren Agenten installieren:

npx skills add antvis/chart-visualization-skills

Verfügbare Fähigkeiten

• 📊 chart-visualization: Eine umfassende Fähigkeit zur Diagrammerstellung, unterstützt von AntV, die über 26 Diagrammtypen für intelligente Datenvisualisierung bereitstellt.

Chart Visualization wählt intelligent den am besten geeigneten Diagrammtyp aus über 26 verfügbaren Optionen aus, extrahiert Parameter basierend auf detaillierten Spezifikationen und generiert hochwertige Diagrammbilder. Es deckt Zeitreihen, Vergleiche, Teil-Ganzes-Beziehungen, Zusammenhänge, geografische, hierarchische, statistische und spezialisierte Visualisierungen ab.

• 🎨 infographic-creator: Erstellen Sie ansprechende Infografiken basierend auf gegebenem Textinhalt. Verwenden Sie diese Fähigkeit, wenn Benutzer die Erstellung von Infografiken anfordern.

Infographic Creator verwendet AntV Infographic, um Daten, Informationen und Wissen in eine wahrnehmbare visuelle Sprache zu transformieren. Es kombiniert visuelles Design mit Datenvisualisierung und bietet über 50 Vorlagen, darunter Listen, Sequenzen, Hierarchien, Vergleiche, Beziehungen und Diagramme. Es komprimiert komplexe Informationen mit intuitiven Symbolen, um dem Publikum zu helfen, Kernpunkte schnell zu verstehen und sich einzuprägen.

• 🖼️ icon-retrieval: Suchen und rufen Sie Icon-SVG-Strings aus der Icon-Bibliothek ab. Gibt standardmäßig bis zu 5 passende Icons zurück (anpassbar).

Icon Search hilft Benutzern, passende Icons für verschiedene Anwendungsfälle zu finden, darunter Infografiken, Webentwicklung, Design und mehr. Suchen Sie nach Schlüsselwörtern, um verfügbare Icons zu entdecken und deren SVG-Strings direkt abzurufen. Jede Suche gibt standardmäßig bis zu 5 passende Icons zurück (über den topK-Parameter anpassbar) mit ihren URLs und vollständigem SVG-Inhalt.

• 📝 narrative-text-visualization: Generieren Sie strukturierte narrative Textvisualisierungen aus Daten unter Verwendung der T8-Syntax.

Narrative Text Visualization (T8) transformiert unstrukturierte Daten in semantisch reichhaltige narrative Berichte mit der T8-Syntax – einer deklarativen, Markdown-ähnlichen Sprache zur Erstellung von Datenerzählungen mit Entitätsanmerkungen. Es ist LLM-freundlich und framework-agnostisch und arbeitet nahtlos mit HTML, React und Vue. Perfekt für die Erstellung von Datenanalyseberichten, Zusammenfassungen und Erkenntnisdokumenten mit Entitäten wie Metriken, Werten, Trends und Dimensionen, die ordnungsgemäß gekennzeichnet sind. Zu den Funktionen gehören integrierte Mini-Diagramme, standardisierte Gestaltung und professionelle Formatierung. Unterstützt authentische Datenquellen und bietet eine leichtgewichtige, technologieunabhängige Darstellung.

• 📋 antv-s2-expert: Assistent für die Entwicklung multidimensionaler Kreuzanalyse-Tabellen mit S2. Verwenden Sie dies, wenn Benutzer Hilfe bei S2-Pivot-Tabellen, Tabellenblättern oder jeglicher Entwicklung im Zusammenhang mit @antv/s2 benötigen.

AntV S2 Expert hilft Benutzern bei der Entwicklung mit der S2-Engine für multidimensionale Kreuzanalyse-Tabellen. Es bietet umfassende Anleitung zum Kern-Engine @antv/s2, den Framework-Anbindungen @antv/s2-react und @antv/s2-vue, den erweiterten Analysekomponenten @antv/s2-react-components und dem serverseitigen Rendering @antv/s2-ssr. Deckt Pivot-Tabellen, Tabellenblätter, benutzerdefinierte Zellen, Theming, Ereignisse, Interaktionen, Sortierung, Gesamtsummen, Tooltips, fixierte Zeilen/Spalten, Icons, Paginierung und mehr ab.

• 🕸️ antv-g6-graph: Code-Generator für G6 v5 Graph-Visualisierungen. Verwenden Sie dies, wenn Benutzer G6-Graphen generieren müssen – Netzwerkgraphen, Baumgraphen, Flussdiagramme, Mindmaps und jegliche Visualisierung relationaler oder graphstrukturierter Daten mit der G6-Bibliothek.

AntV G6 Graph generiert genauen, ausführbaren G6 v5-Code, der bewährten Praktiken folgt. Es deckt die Kerninitialisierung von Graphen, Datenstrukturen (Knoten, Kanten, Combos), über 10 Layout-Algorithmen (force, dagre, circular, grid, mindmap, fishbone usw.), alle integrierten Knoten-/Kanten-/Combo-Typen, Zustandsverwaltung, über 15 Verhaltensweisen (drag-canvas, zoom-canvas, click-select, lasso usw.), über 10 Plugins (minimap, tooltip, toolbar, legend, timebar usw.), die Entwicklung benutzerdefinierter Elemente, Transformationen und Animationen ab. Integrierte Schutzmechanismen verhindern häufige Fallstricke bei der Migration von v4 zu v5, wie die Verwendung veralteter G6.Graph()-Konstruktoren, graph.data()-APIs oder modusbasierter Verhaltenskonfiguration.

• 📈 antv-g2-chart: Code-Generator für G2 v5-Diagramme. Verwenden Sie dies, wenn Benutzer G2-Diagramme generieren müssen – Balkendiagramme, Liniendiagramme, Tortendiagramme, Streudiagramme, Flächendiagramme, Heatmaps und jegliche statistische Datenvisualisierung mit der G2-Bibliothek.

AntV G2 Chart generiert genauen, ausführbaren G2 v5-Code, der den Best Practices des Spec-Modus folgt. Es deckt über 30 Diagrammtypen (Interval, Line, Area, Point, Rect, Cell, Treemap, Sankey, Chord, WordCloud, Gauge und mehr), Datentransformationen (stackY, dodgeX, binX, fold usw.), Koordinatensysteme (kartesisch, polar, theta, radial), Skalen, Interaktionen (brush, slider, legend filter), Komponenten (Achse, Legende, Tooltip, Annotation) und Multi-View-Kompositionen ab. Integrierte Schutzmechanismen verhindern häufige Fallstricke bei der Migration von v4 zu v5, wie die Verwendung veralteter Chain-APIs, ungültiger Palettennamen oder die Referenzierung von d3 im Benutzercode.

Evaluierungsergebnisse

Der Harness Engineering-Ansatz wurde rigoros anhand von 174 Diagrammerstellungs-Testfällen getestet und zeigte signifikante Verbesserungen gegenüber den Baseline-Methoden:

Die Ergebnisse zeigen, dass Harness Engineering es LLMs ermöglicht, eine nahezu produktionsreife Genauigkeit (bis zu 98,2 %) zu erreichen und damit den Context7-Baseline-Ansatz deutlich zu übertreffen.

[!TIP] Weitere Fähigkeiten kommen bald.

Bibliotheksnutzung

Es kann als Bibliothek in Ihren Node.js-Projekten mit CLI und API verwendet werden.

CLI-Verwendung

Wir bieten auch ein CLI-Tool namens antv für die einfache Nutzung in Ihrem Terminal, global installieren:

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

Fähigkeiten nach Abfrage abrufen oder auflisten:

# Fähigkeiten nach Abfrage abrufen (nur Metadaten)
antv retrieve "bar chart" --library g2 --topk 10

# Fähigkeiten mit vollständigem Markdown-Inhalt abrufen (Kernbeschränkungen werden automatisch vorangestellt)
antv retrieve "bar chart" --library g2 --content

# Fähigkeiten abrufen und als JSON ausgeben
antv retrieve "bar chart" --library g2 --output json

# Eine Fähigkeit anhand ihrer exakten ID abrufen
antv get g2-mark-interval-basic --library g2

# Alle verfügbaren Fähigkeiten auflisten
antv list --library g2 --category core

# Fähigkeiten auflisten und als JSON ausgeben
antv list --output json

# Fähigkeitsinformationen anzeigen (Kernbeschränkungen aus SKILL.md)
antv info --library g2

# Fähigkeitsinformationen als JSON anzeigen
antv info --library g2 --output json

Verwendung des Befehls:

Usage: antv [options] [command]

CLI-Tool für die Abfrage von AntV-Diagrammvisualisierungsfähigkeiten

Options:
  -V, --version               Versionsnummer ausgeben
  -h, --help                  Hilfe für Befehl anzeigen

Commands:
  retrieve [options] <query>  Nach Fähigkeiten suchen, die einer Abfrage entsprechen
  get [options] <id>          Eine Fähigkeit anhand ihrer exakten ID abrufen
  list [options]              Alle verfügbaren Fähigkeiten auflisten
  info [options]              Fähigkeitsinformationen aus SKILL.md anzeigen
  help [command]              Hilfe für einen Befehl anzeigen

Options for retrieve:
  --library <lib>             Nach Bibliothek filtern (z. B. g2, g6)
  --topk <n>                  Anzahl der zurückzugebenden Ergebnisse (Standard: 7)
  --content                   Markdown-Inhaltstext in die Ergebnisse aufnehmen; Kernbeschränkungen (SKILL.md Abschnitt 1-2) werden immer als erstes Ergebnis vorangestellt
  --output <format>           Ausgabeformat: json | text (Standard: "text")

Hinweis: --content stellt den Kernbeschränkungen der Bibliothek (Abschnitt 1 & 2 von SKILL.md, bis zur Markierung <!-- CONSTRAINTS:END -->) immer als erstes Ergebnis voran, um sicherzustellen, dass das Modell die wesentlichen Regeln zusammen mit den Referenzdokumenten erhält.

API-Verwendung

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

// Nur Metadaten (kein Inhalt)
const skills = retrieve('bar chart', { library: 'g2', topK: 5 });

// Mit vollständigem Markdown-Inhalt (Kernbeschränkungen werden automatisch als erstes Ergebnis vorangestellt)
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true });

// Mit Inhalt, aber ohne Kernbeschränkungen
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true, includeInfo: false });

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

interface RetrieveOptions {
  library?: string;   // Bibliotheksfilter, z. B. 'g2' oder 'g6'
  topK?: number;      // Anzahl der Ergebnisse (Standard: 7)
  content?: boolean;  // Markdown-Inhaltstext einbeziehen (Standard: false)
  includeInfo?: boolean; // SKILL.md-Kernbeschränkungen voranstellen (Standard: gleich wie content)
}

Hinweise:

• Die Standardabfrage gibt leichte Ergebnisobjekte ohne das content-Feld zurück.
• content: true gibt den Markdown-Inhaltstext zurück (Frontmatter-Metadaten sind ausgeschlossen).
• Wenn includeInfo true ist (der Standard bei content: true), wird der Block der Kernbeschränkungen – SKILL.md bis <!-- CONSTRAINTS:END --> – als erstes Element eingefügt (ID mit dem Präfix __info__), um sicherzustellen, dass das Modell immer die wesentlichen Regeln sieht.

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;            // Vollständiger SKILL.md-Text (nach dem Frontmatter)
  constraintsContent: string; // SKILL.md-Text bis zur Markierung <!-- CONSTRAINTS:END -->; wird von retrieve eingefügt, wenn includeInfo: true
}

Lizenz

MIT-Lizenz – siehe die LICENSE-Datei für Details.