AntV Infographic: deklarative Diagramme aus einer Textgrammatik

Welche Lücke die Grammatik schließt

Zwischen einem Datenpunkt und einer fertigen Grafik liegt meist ein manueller Schritt: Jemand öffnet ein Designwerkzeug, zieht Kästen, richtet Pfeile aus. AntV Infographic setzt an dieser Stelle an und beschreibt die Grafik als Text. Das README nennt die Engine eine deklarative Infografik-Visualisierungsengine mit einer Syntax, die schnelles und flexibles Rendern hochwertiger Infografiken erlauben soll. Die Zielgruppe sind damit nicht Designer, sondern Entwickler und Werkzeugbauer, die Diagramme programmatisch erzeugen. Der zweite Adressat ist deutlicher im Repository benannt: Die Konfiguration und die Syntax seien auf KI-Generierung abgestimmt, mit knappen Prompts und Unterstützung für Streaming-Ausgabe. Wer eine Pipeline baut, in der ein Sprachmodell eine Beschreibung in eine Grafik übersetzt, bekommt hier das Format gleich mitgeliefert.

Die Syntax als eigentliche Schnittstelle

Der Kern ist ein Textblock, den die Methode render entgegennimmt. Das README zeigt ein Beispiel: In der ersten Zeile steht ein Bezeichner wie infographic list-row-simple-horizontal-arrow, danach folgt der Schlüssel data, darunter lists mit Einträgen aus label und desc. Die erste Zeile bestimmt also die Struktur, der Rest liefert den Inhalt. Diese Trennung ist der Grund, warum Streaming überhaupt funktioniert. Im Beispiel für Streaming wird ein Puffer Zeichen für Zeichen gefüllt und bei jedem Chunk erneut an render übergeben. Die Dokumentation spricht von einer hochgradig fehlertoleranten Syntax, die Zwischenzustände verkraftet. Das ist eine bewusste Designentscheidung: Ein Parser, der bei unvollständiger Eingabe abbricht, wäre für tokenweise Ausgabe unbrauchbar. Der Preis dafür ist, dass die Grammatik nicht beliebig ist. Wer eine Struktur braucht, die nicht als Vorlage existiert, muss sie selbst entwerfen, und dafür nennt das Repository eigene Skills wie infographic-structure-creator.

Einbindung in fünf Zeilen

Die Installation läuft über npm install @antv/infographic. Im Code wird die Klasse Infographic importiert und mit einem Optionsobjekt instanziiert; das README zeigt container, width, height und editable. container ist ein Selektor, width und height werden dort als Prozentwerte übergeben, editable schaltet den integrierten Editor zu. Danach folgt der Aufruf infographic.render mit dem Syntaxblock. Die Breite und Höhe als Zeichenketten statt als Zahlen sind ein Detail, das bei der Einbindung in ein responsives Layout hilft, aber auch bedeutet, dass die Engine die Größe vom Container erbt und nicht selbst bestimmt. Bemerkenswert ist die Existenz des Editors: Das Ergebnis einer KI-Ausgabe lässt sich laut README nachbearbeiten. Das verschiebt die Rolle der Bibliothek weg von einem reinen Renderer hin zu einer Komponente, die einen Korrekturpfad für ungenaue Generierungen anbietet. Wer die Ausgabe nur als Datei braucht, zahlt für diese Option mit zusätzlichem Code im Bundle.

Vorlagen, Themes und die Grenze der Anpassung

Das README nennt rund 200 eingebaute Vorlagen, Daten-Item-Komponenten und Layouts. Dazu kommt ein Themsystem mit Handzeichnung, Verläufen, Mustern und mehreren Voreinstellungen sowie tiefergehender Anpassung. Die Formulierung tiefe Anpassung ist die Stelle, an der ich vorsichtig wäre: Das Material beschreibt nicht, wie weit diese Anpassung reicht. Ob sich Abstände, Schriftgrößen oder Achsen einzeln steuern lassen, geht aus dem README nicht hervor. Klar ist nur, dass die Ausgabe standardmäßig SVG ist, was visuelle Treue und einfache Nachbearbeitung sichern soll. SVG ist hier die richtige Wahl, weil sich Text und Pfade nachträglich ändern lassen, aber es heißt auch, dass sehr große Diagramme mit vielen Knoten im DOM landen. Wer hunderte Elemente in einer Ansicht rendert, sollte das vorher messen. Die Zahl 200 bezieht sich auf Vorlagen, nicht auf getestete Datenmengen.

Wann die Engine das falsche Werkzeug ist

Die Bindung an eine eigene Grammatik ist die klarste Einschränkung. Ein Team, das bereits Diagramme in einer anderen Spezifikation beschreibt, muss diese übersetzen, und für die Übersetzung gibt das Repository nichts her. Ebenso ungünstig ist der Einsatz, wenn das Layout exakt vorgegeben ist: Die Vorlagen bestimmen die Struktur, und eine Abweichung bedeutet, eine eigene Struktur zu entwerfen. Ein weiterer Fall ist die serverseitige Erzeugung ohne Browser. Die Bibliothek ist eine TypeScript-Komponente, die container, width und height erwartet, also eine DOM-Umgebung. Ob ein Headless-Betrieb vorgesehen ist, sagt das Material nicht. Und schließlich: Wenn nur ein einzelnes Balkendiagramm gebraucht wird, ist der Apparat aus Syntax, Vorlagen und Themes überdimensioniert. Für solche Fälle ist eine schlanke Diagrammbibliothek die bessere Wahl.

Der Vergleich mit Diagrammbibliotheken wie D3

D3 verfolgt den entgegengesetzten Ansatz. Dort beschreibt man Skalen, Achsen und Selektionen selbst und hat volle Kontrolle über jedes Element, zahlt aber mit deutlich mehr Code pro Diagramm. AntV Infographic tauscht diese Kontrolle gegen Vorlagen und eine kurze Beschreibungssprache. Der praktische Unterschied zeigt sich im Fehlerfall: Bei D3 ist ein falsch platziertes Element ein Fehler im eigenen Code, bei Infographic ist es eine Grenze der gewählten Vorlage. Umgekehrt ist ein neuer Diagrammtyp bei D3 eine Frage von Stunden, bei Infographic eine Frage des Vorlagenentwurfs. Für generative Pipelines spricht ein weiterer Punkt für die Engine: Eine Grammatik aus wenigen Schlüsselwörtern lässt sich einem Sprachmodell leichter beibringen als eine imperative Zeichenkette, und die Fehlertoleranz beim Streaming hat D3 nicht. Wer dagegen Diagramme mit ungewöhnlichen Achsen oder interaktiven Details braucht, bleibt bei D3 oder einer vergleichbaren Bibliothek.

Wartung, Versionen und Lizenz

Die letzten veröffentlichten Versionen sind 0.2.19 vom Mai 2026, davor 0.2.17 und 0.2.16 in den Monaten zuvor. Die Null vor dem Punkt sagt, was zu erwarten ist: Die öffentliche Schnittstelle ist nicht als stabil zugesagt, und ein Sprung auf 0.3 kann Optionen oder Syntaxdetails verschieben. Wer die Bibliothek produktiv einsetzt, sollte die Version festnageln und die Release Notes vor jedem Update lesen. Ein Hinweis auf die Updatekosten steht im README selbst: Der manuelle Installationsweg der Skills enthält einen VERSION-Platzhalter mit dem Kommentar, ihn durch das neueste Tag zu ersetzen, im Beispiel 0.2.14. Solche Stellen veralten. Die Lizenz ist MIT, was die Nutzung, Änderung und Weitergabe erlaubt, sofern der Copyright-Hinweis erhalten bleibt. Das ist keine Rechtsberatung; wer die Bibliothek in ein Produkt einbettet, sollte die Lizenzbedingungen im LICENSE-Verzeichnis selbst prüfen.

Skills als eigene Integrationsschicht

Neben der Bibliothek pflegt das Projekt Skills für KI-Agenten: infographic-creator erzeugt eine HTML-Datei mit gerenderter Infografik, infographic-syntax-creator wandelt Beschreibungen in Syntax um, infographic-structure-creator und infographic-item-creator erzeugen eigene Struktur- und Elemententwürfe, infographic-template-updater richtet sich an Entwickler der Vorlagenbibliothek. Die Installation ist für zwei Umgebungen dokumentiert. Für Claude Code gibt es einen Marketplace-Befehl und einen manuellen Weg über ein ZIP-Archiv aus den GitHub-Releases; für Codex wird ein Befehl mit der Skill-URL angegeben. Das ist eine zweite Abhängigkeit neben dem npm-Paket, mit eigenem Versionsstand. Wer die Skills nutzt, muss beide Stände im Blick behalten, sonst passt die generierte Syntax irgendwann nicht mehr zu dem Parser, der sie liest.

Redaktionelles Fazit

Sinnvoll ist AntV Infographic für Teams, die Textbausteine oder LLM-Ausgaben in ein festes Set an Diagrammtypen gießen wollen und dafür eine eigene Grammatik in Kauf nehmen. Falsch ist es, wenn jedes Layout pixelgenau vorgegeben ist oder wenn keine JavaScript-Laufzeit vorhanden ist; die Engine ist eine TypeScript-Bibliothek, kein Serverdienst. Vor der Festlegung sollte man prüfen, ob die eigene Datenform auf das data-Modell mit lists abbildbar ist und ob die Zielvorlage in der Galerie existiert, denn eine fehlende Struktur bedeutet eigenen Entwurf über infographic-structure-creator statt schneller Anpassung.

Offizielle Quellen

1. antvis/Infographic on GitHub
2. License: MIT
3. Project website
4. README
5. Releases