Modèle / jeu de données
antvis/Infographic avatar
antvis/Infographic

AntV Infographic : un moteur de rendu déclaratif pour des infographies générées par LLM

🦋 An Infographic Generation and Rendering Framework, bring words to life with AI!

6 667 étoiles546 forksTypeScriptMIT

En bref

De quoi s’agit-il ?
AntV Infographic est une bibliothèque TypeScript qui transforme une syntaxe textuelle en infographie SVG. Elle vise les applications d'IA qui doivent afficher un résultat structuré sans passer par un éditeur graphique.
À qui s’adresse-t-il ?
AntV Infographic convient aux équipes qui produisent du texte structuré par LLM et veulent le rendre en SVG sans écrire de code de mise en page. Il ne convient pas à qui cherche un éditeur graphique complet ou un format de sortie bureautique natif.
Puis-je l’utiliser commercialement ?
Oui. MIT est une licence permissive : vous pouvez utiliser, modifier et vendre un logiciel qui en dépend, à condition de conserver les mentions de droit d’auteur et de licence.
Est-il encore maintenu ?
Oui. Les derniers commits datent d’il y a 25 jours.
En quel langage est-il écrit ?
Principalement TypeScript, d’après les statistiques de langage de GitHub.

Ces réponses reposent sur les données GitHub du projet (dernière synchronisation le 15 septembre 2026) et sur notre analyse. Elles ne constituent pas un avis juridique.

ANALYSE OPEN SOURCE APPROFONDIE

Le problème : afficher une structure sans écrire de mise en page

Un LLM produit du texte. Dès qu'on veut en faire une figure, il faut choisir une disposition, placer les blocs, gérer les flèches et les alignements. AntV Infographic prend le problème à l'autre bout : l'appelant décrit une intention (une liste horizontale avec des flèches, par exemple) et la bibliothèque choisit le rendu. La syntaxe montrée dans le README tient en quelques lignes : un nom de structure sur la première ligne, puis un bloc data avec une liste d'éléments label et desc. Le public visé n'est pas le designer mais le développeur d'interface qui branche une sortie de modèle sur un composant d'affichage. Le README insiste sur deux points : la syntaxe est tolérante aux erreurs et le rendu est progressif, ce qui suppose un usage en flux plutôt qu'en une seule passe.

Ce que fait réellement le moteur entre le texte et le SVG

D'après le README, Infographic est un moteur déclaratif : la chaîne de caractères est interprétée, associée à une structure nommée, puis rendue en SVG. Le rendu SVG est présenté comme le format par défaut, avec un argument de fidélité visuelle et de facilité d'édition. Le composant s'instancie avec new Infographic({ container, width, height, editable }), puis on appelle infographic.render() avec la syntaxe. L'option editable active un éditeur intégré, ce qui indique que le résultat n'est pas figé : l'utilisateur peut retoucher ce que le modèle a produit. Les gabarits, composants d'éléments et dispositions sont décrits comme environ 200 éléments intégrés. Le README ne détaille pas la répartition entre gabarits et composants, ni la façon dont un gabarit est sélectionné lorsque la syntaxe ne nomme pas de structure. C'est une zone que la documentation en ligne doit couvrir, pas le README.

Le rendu en flux, contrainte de conception plus que fonctionnalité

L'exemple de streaming est court : on accumule les morceaux de réponse dans un buffer, et on rappelle render() à chaque morceau. Cela signifie que le parseur doit accepter une entrée incomplète, par exemple une liste ouverte sans dernier élément, ou une ligne label sans desc. Le README qualifie la syntaxe de highly fault-tolerant, ce qui est cohérent avec cet usage. La conséquence pratique est double. D'un côté, l'utilisateur voit la figure se construire pendant la génération. De l'autre, chaque morceau déclenche un nouveau rendu complet : sur une longue réponse, cela multiplie les cycles d'analyse et de dessin. Le README ne donne aucune indication sur un éventuel throttling ou sur un rendu incrémental interne. Si votre interface affiche plusieurs infographies en parallèle, c'est le premier point à mesurer vous-même.

Installation et intégration dans un agent

L'installation se limite à npm install @antv/infographic. Le paquet publié s'appelle @antv/infographic, ce qui diffère du nom du dépôt (Infographic) : c'est le nom npm qu'il faut retenir dans un package.json. Pour les agents, le README décrit un dossier skills contenant cinq entrées : infographic-creator, infographic-syntax-creator, infographic-structure-creator, infographic-item-creator et infographic-template-updater. Les quatre premières servent à produire du contenu, la dernière est explicitement marquée comme destinée aux développeurs qui mettent à jour la bibliothèque de gabarits. L'installation côté Claude Code passe par un marketplace de plugin, avec une alternative manuelle qui télécharge skills.zip depuis les releases GitHub et le décompresse dans .claude/skills. Le README donne VERSION=0.2.4 en exemple tout en précisant qu'il faut utiliser le dernier tag, ce qui laisse penser que cette valeur est un simple gabarit à remplacer.

Ce que la bibliothèque ne fera pas

Le rendu SVG est adapté à l'écran et au web. Rien dans le matériel fourni n'indique une exportation vers PowerPoint, PDF ou un format bureautique. Les projets de l'écosystème cités dans le README, comme InfographicAI ou LangChat Slides, parlent de génération de diapositives, mais cela décrit des produits construits au-dessus de la bibliothèque, pas une capacité de la bibliothèque elle-même. Autre limite : la qualité du résultat dépend de la correspondance entre la structure demandée et les gabarits disponibles. Si votre syntaxe décrit une mise en page qui n'existe pas, le comportement dépend du parseur et n'est pas documenté dans le README. Enfin, l'éditeur intégré activé par editable suppose un contexte navigateur ; le README ne mentionne aucun rendu côté serveur, ce qui exclut pour l'instant un usage en génération d'image hors navigateur.

Face à un générateur de diagrammes classique

Un outil comme Mermaid part d'une grammaire de diagrammes : organigrammes, séquences, états. L'auteur écrit la structure logique et l'outil applique un style unique et peu paramétrable. AntV Infographic prend une position différente : la syntaxe décrit un contenu et un type de disposition, et une bibliothèque de gabarits fournit l'apparence. Le README met en avant des thèmes prédéfinis, des dégradés et un style dessiné à la main, ce que Mermaid ne propose pas. En échange, la sortie est moins normalisée : deux gabarits différents produisent deux figures qui ne partagent pas la même grille visuelle. Pour de la documentation technique où l'homogénéité compte, la grammaire fermée de Mermaid reste plus prévisible. Pour une figure de communication générée à la volée, la variété des gabarits est l'argument principal d'Infographic.

Maintenance, licence et coût de mise à jour

Le dépôt n'est pas archivé et la dernière poussée indiquée est le 21 août 2026. Les releases listées dans le matériel vont de 0.2.16 en mars 2026 à 0.2.19 en mai 2026, avec une version 0.2.17 en avril. La numérotation reste en 0.x, ce qui signifie que l'API peut encore bouger entre versions mineures. Le README pointe d'ailleurs vers des tags de skills séparés, avec un exemple en 0.2.4 alors que le paquet npm est en 0.2.19 : les deux cycles de publication ne semblent pas alignés, et il faut vérifier lequel correspond à votre installation. La licence est MIT, ce qui autorise la réutilisation et la modification, y compris dans un produit commercial, à condition de conserver la mention de copyright et le texte de licence. Ce paragraphe décrit le texte de la licence, il ne constitue pas un avis juridique. Le coût réel de mise à jour tient à la syntaxe : si vous générez du texte à partir de prompts figés, une évolution du parseur peut changer le rendu sans changer votre code.

Conclusion éditoriale

AntV Infographic convient aux équipes qui produisent du texte structuré par LLM et veulent le rendre en SVG sans écrire de code de mise en page. Il ne convient pas à qui cherche un éditeur graphique complet ou un format de sortie bureautique natif. Avant d'adopter, vérifiez la version publiée sur npm, le contenu réel du dossier skills et la manière dont le parseur réagit à une syntaxe partielle.

Sources officielles

  1. antvis/Infographic on GitHub
  2. License: MIT
  3. Project website
  4. README
  5. Releases
Notes de la communauté

Notes de la communauté