chart-visualizationvon AntV

Chart Visualization Skill.

Ein Skill für Claude Code und Codex für Diagramme und Charts: rendert Daten als Balken-, Linien-, Kreis-, Radar-, Sankey-, Mindmap- und Flussdiagramme über die AntV-API.

Diagrams & Data Visualization
Chart image

OpenDesign herunterladen Anleitung ansehen

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

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

Front Matter und Abschnittsüberschriften aus der Quelldatei vom 14.09.2026 · 3.736 Zeichen insgesamt

01 Was es tut

Was der chart-visualization Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Dieser Skill verwandelt Nutzerdaten in Diagramme, indem er die Chart-Generierungs-API von AntV aufruft. Er analysiert die Daten und die Anfrage des Nutzers, um aus einem breiten Katalog (Balken, Linien, Kreis, Radar, Sankey, Mind-Map, Flussdiagramm und mehr) den passendsten Diagrammtyp auszuwählen, erstellt einen JSON-Anfragekörper mit den erforderlichen type- und source-Feldern, ruft die API per curl auf und gibt die zurückgegebene Bild-URL als Markdown-Bild aus.

Es dokumentiert den Datenformat-Vertrag für jeden der rund 20 unterstützten Diagrammtypen sowie gemeinsame optionale Parameter wie theme, width, height und title und gibt dem Agent damit eine konkrete Referenz zum Erstellen gültiger Anfragen, statt Formate raten zu müssen.

Was er erzeugt

Eine JSON-API-Antwort mit einem success-Flag und einer resultObj-Bild-URL

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Diagrammtyp auswählen
Analysieren Sie die Daten und Anforderungen des Nutzers, um den am besten geeigneten Diagrammtyp auszuwählen.
02
Anfragetext erstellen
Erstellen Sie einen JSON-Anfragetext, der der Spezifikation der API entspricht.
03
API aufrufen
Verwenden Sie das curl-Tool, um die API aufzurufen und das Diagrammbild zu generieren.
04
Bild ausgeben
Geben Sie die zurückgegebene Bild-URL im Markdown-Bildformat aus.

02 Finden Sie Ihren Favoriten

Wann Sie die chart-visualization-Skill verwenden

Verwenden Sie die chart-visualization skill in Claude Code oder Codex, wenn es um Diagramme und Grafiken dieser Art geht. Eignung und Grenzen stammen aus der eigenen Datei der Skill.

Gut geeignet

Visualisierung von Zeitreihentrends mit einem Liniendiagramm oder kumulativen Trends mit einem Flächendiagramm
Vergleich von Kategorien horizontal mit einem Balkendiagramm oder vertikal mit einem Säulendiagramm
Darstellung anteiliger Zusammensetzung mit einem Kreisdiagramm oder hierarchischer Anteile mit einer Treemap
Abbildung von Flüssen zwischen Kategorien mit einem Sankey-Diagramm oder Korrelationen mit einem Streudiagramm
Darstellung hierarchischer oder Baumstrukturen mit Organigramm oder Mind-Map

Grenzen kennen

Benötigt AntV APIDie SKILL.md benennt diese Abhängigkeit; die Skill funktioniert ohne sie nicht in Ihrem Projekt.

Was Sie bereitstellen sollten

Diagrammspezifisches DatenarrayJeder Diagrammtyp erwartet eine bestimmte Datenstruktur, z. B. benötigen Balken-/Säulendiagramme {category, value, group?}-Arrays, Sankey benötigt {source, target, value}-Arrays.
Optionale AnzeigeparameterTheme, width, height, title, style.texture und bei Achsendiagrammen axisXTitle/axisYTitle können angegeben werden, um die Ausgabe anzupassen.

03 Innerhalb des Skills

Regeln, die das chart-visualization Skill Claude Code und Codex vorgibt

7 konkrete Anweisungen, Voreinstellungen und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Pflichtfelder
Jeder Anfragetext muss ein type-Feld und ein source-Feld mit dem Wert "chart-visualization-skills" enthalten.
Fester Endpunkt
Diagramme werden durch einen POST an einen einzigen festen API-Endpunkt generiert.
Standard-Canvas-Größe
Die Diagrammbreite beträgt standardmäßig 600 und die Höhe 400, sofern nicht anders angegeben.
Theme-Optionen
Das Theme ist standardmäßig "default", kann aber auf "academy" oder "dark" gesetzt werden.
Texturstil
style.texture ist standardmäßig auf „default“ gesetzt, kann aber für einen handgezeichneten Look auf „rough“ gesetzt werden.
Standardeinstellungen für Stapelung
Balkendiagramme sind standardmäßig auf stack: true gesetzt, während bei Säulendiagrammen group standardmäßig auf true steht.
Ausgabeformat
Die resultObj-URL aus der API-Antwort muss als Markdown-Bild mit dem Muster gerendert werden.

04 In Betrieb nehmen

chart-visualization in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

chart-visualization zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

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

Allgemeine skills-CLI-Form für skills/chart-visualization/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Dem Skill eine erste Diagramm- und Chart-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

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.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Gleichen Sie den gewählten Diagrammtyp mit dem Auswahlleitfaden für die Eigenschaften der Daten ab (Zeitreihe, Vergleich, Anteil, Beziehung, Hierarchie)

In OpenDesign importieren Sie chart-visualization über seinen SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es anschließend in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: AntV
Repository: github.com/antvis/chart-visualization-skills Branch master
Skill-Datei: skills/chart-visualization/SKILL.md Inhaltsprüfsumme bei Verifizierung aufgezeichnet; Commit 089b687
License: MIT Aus LICENSE.
Repository-Sterne: 489 GitHub-Snapshot vom 2026-09-14 für das gesamte Repository antvis/chart-visualization-skills, das 2 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungsanzahl für chart-visualization.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

步骤Vier Schritte: Daten analysieren, JSON-Body erstellen, API mit curl aufrufen, Markdown-Bild ausgeben
图表选择指南Ordnet Dateneigenschaften (Zeitreihe, Vergleich, Anteil, Beziehungen, Hierarchie) Diagrammtypen zu
API 接口Beschreibt den POST-Endpunkt, erforderliche Felder und ein curl-Anfrage-/Antwortbeispiel
支持的图表类型Tabelle mit allen unterstützten Diagrammtypen, gruppiert nach Kategorie
通用可选参数Gemeinsame optionale Parameter (theme, width, height, title, texture) und deren Standardwerte
各图表 data 格式Exakte Datenstruktur und optionale Felder, die für jeden einzelnen Diagrammtyp erforderlich sind

Die eigene Beschreibung des Skills

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

Front-matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 3.736 Zeichen. Die vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum Skill chart-visualization

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Welche Diagrammtypen kann dieser Skill erzeugen

Er unterstützt einen breiten Katalog, darunter 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 und spreadsheet.

In welchem Format liegt die Ausgabe vor

Die API liefert ein JSON-Objekt mit einer resultObj-URL zurück, die der Skill anschließend als Markdown-Bildlink ausgibt.

Chart Visualization

chart-visualization auf einer echten Diagramm- und Chart-Aufgabe ausführen.

Laden Sie OpenDesign herunter, importieren Sie chart-visualization über seinen SKILL.md-Link, fügen Sie den Prompt oben ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen