# antvis/infographic **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/antvis-infographic).** 4,408 stars · 310 forks · TypeScript · mit ## Links - GitHub: https://github.com/antvis/Infographic - Homepage: https://infographic.antv.vision - awesome-repositories: https://awesome-repositories.com/repository/antvis-infographic.md ## Topics `ai` `antv` `infographic` `llm` `visualization` ## Description Infographic is a declarative SVG infographic engine and AI-powered generator that transforms structured specifications and natural language descriptions into complete visual layouts. At its core, it provides a data storytelling framework that combines AI-driven layout generation with multi-pattern composition, supporting linear, circular, radial, tree, and mirror arrangements for sequential, hierarchical, and comparative data structures. The project distinguishes itself through a canvas-based interactive editor with real-time element manipulation and state history management, alongside a server-side SVG renderer for non-browser environments. It offers a comprehensive theme and template registry system that allows users to register, apply, and override reusable design configurations, including custom color palettes, patterns, and style defaults. The editor can be extended through a plugin system for custom templates, themes, and resources, while the rendering pipeline supports incremental streaming for real-time updates as AI output arrives. The system handles structured data types including comparisons, hierarchies, lists, relations, sequences, and statistical data, each with dedicated definition syntax. Visual composition capabilities include spatial layout management with grids and ratios, color hierarchy design, text and graphic alignment, and symmetrical or asymmetrical balance. Users can browse a curated template gallery organized by chart type and layout category, apply predefined themes, and customize visual properties on the fly. The declarative specification combines design, template, data, theme, and resource blocks into a single syntax for rendering high-fidelity SVG infographics. ## Tags ### Artificial Intelligence & ML - [Generative Infographic Layouts](https://awesome-repositories.com/f/artificial-intelligence-ml/prompt-variation-generators/generative-infographic-layouts.md) — Converts natural language descriptions into complete infographic layouts and designs using AI agents. ### Data & Databases - [Sequence Data Definitions](https://awesome-repositories.com/f/data-databases/data-sorting-engines/ui-data-sorting/sequence-data-definitions.md) — Defines sequence data structures for ordered timelines or steps in infographics. ([source](https://infographic.antv.vision/learn/infographic-syntax)) - [Hierarchy Data Definitions](https://awesome-repositories.com/f/data-databases/tree-hierarchy-mappings/hierarchy-data-definitions.md) — Defines hierarchy data structures with root nodes and recursive children for infographics. ([source](https://infographic.antv.vision/learn/infographic-syntax)) ### Development Tools & Productivity - [Custom Template Registrations](https://awesome-repositories.com/f/development-tools-productivity/pre-built-sdk-distributions/infographic-template-references/custom-template-registrations.md) — Saves a design configuration under a name so it can be reused across infographics by referencing that name in the syntax. ([source](https://infographic.antv.vision/learn/custom-template)) - [Application Templates](https://awesome-repositories.com/f/development-tools-productivity/application-templates.md) — Applies selected infographic templates directly into applications for immediate rendering. ([source](https://infographic.antv.vision/gallery)) - [Template and Theme Plugin Interfaces](https://awesome-repositories.com/f/development-tools-productivity/code-editors-ides/extension-ecosystems-management/editor-extensions/editor-architectures/plugin-based-editor-frameworks/template-and-theme-plugin-interfaces.md) — Extends the interactive editor by registering custom templates, themes, palettes, and resources. - [Theme Overrides](https://awesome-repositories.com/f/development-tools-productivity/global-configurations/theme-overrides.md) — Adjusts specific visual properties of an active theme at render time without altering the registered theme. ([source](https://infographic.antv.vision/learn/custom-theme)) - [Infographic Template References](https://awesome-repositories.com/f/development-tools-productivity/pre-built-sdk-distributions/infographic-template-references.md) — Applies pre-configured infographic layouts by referencing registered template names. ([source](https://infographic.antv.vision/learn/template)) ### Education & Learning Resources - [Comparison Data Definitions](https://awesome-repositories.com/f/education-learning-resources/language-comparisons/side-by-side-comparisons/comparison-data-definitions.md) — Defines comparison data structures for side-by-side or grouped infographic charts. ([source](https://infographic.antv.vision/learn/infographic-syntax)) ### Graphics & Multimedia - [Data Storytelling Frameworks](https://awesome-repositories.com/f/graphics-multimedia/data-storytelling-frameworks.md) — Combines AI generation with structured layout templates for creating data-driven visual narratives. - [Declarative Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering/declarative-rendering.md) — Transforms structured declarative specifications into SVG graphics for data storytelling. - [Infographic Declarative Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering/declarative-rendering/infographic-declarative-renderers.md) — Transforms structured declarative specifications into high-fidelity SVG infographics for data storytelling. - [Relation Data Definitions](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/axis-appearance-configurations/node-appearance/node-and-edge-customizations/relation-data-definitions.md) — Defines relation data structures with edges, labels, and arrow styles for infographics. ([source](https://infographic.antv.vision/learn/infographic-syntax)) - [Composition Balance Techniques](https://awesome-repositories.com/f/graphics-multimedia/composition-balance-techniques.md) — Arranges elements by mirroring or by visual weight (color, size, density) to create a stable, non-lopsided layout. ([source](https://infographic.antv.vision/learn/infographic-design)) ### Software Engineering & Architecture - [Infographic Spec Compilers](https://awesome-repositories.com/f/software-engineering-architecture/declarative-spec-compilers/infographic-spec-compilers.md) — Defines infographics by combining design, template, data, theme, and resource blocks into a single declarative specification. ([source](https://infographic.antv.vision/learn/core-concepts)) - [Canvas-Based](https://awesome-repositories.com/f/software-engineering-architecture/state-management/canvas-based.md) — Provides a real-time editing canvas with element manipulation and state history management. ### User Interface & Experience - [Infographic Theme Templates](https://awesome-repositories.com/f/user-interface-experience/color-themes/theme-application-switching/document-theme-templates/infographic-theme-templates.md) — Applies reusable color palettes, custom templates, and global style defaults for consistent infographic design. - [Statistical Data Definitions](https://awesome-repositories.com/f/user-interface-experience/data-visualization-tools/data-visualization/charting-frameworks/immediate-mode-plotting-libraries/statistical-distribution-visualizers/statistical-charting-suites/statistical-data-definitions.md) — Defines statistical data structures with numeric metrics and category grouping for infographics. ([source](https://infographic.antv.vision/learn/infographic-syntax)) - [Infographic Declarative Engines](https://awesome-repositories.com/f/user-interface-experience/declarative-layout-engines/infographic-declarative-engines.md) — Transforms concise declarative specifications into high-fidelity SVG infographics with multi-pattern layout support. - [Infographic Layout Orientations](https://awesome-repositories.com/f/user-interface-experience/interface-layout-orientations/infographic-layout-orientations.md) — Provides multi-pattern layout selection for arranging infographic data structures. ([source](https://infographic.antv.vision/learn/infographic-design)) - [Multi-Pattern Layout Engines](https://awesome-repositories.com/f/user-interface-experience/multi-pattern-layout-engines.md) — Arranges data into lists, hierarchies, sequences, and relations for infographic layouts. - [Infographic Layouts](https://awesome-repositories.com/f/user-interface-experience/ui-layout-design/template-deployment/infographic-layouts.md) — Renders high-fidelity SVG infographics by parsing declarative syntax describing layout and data. ([source](https://infographic.antv.vision/learn)) - [Visual Hierarchies](https://awesome-repositories.com/f/user-interface-experience/visual-hierarchies.md) — Constructs visual hierarchies using color depth, size, shape, and guided viewing order. ([source](https://infographic.antv.vision/learn/infographic-design)) - [Color Hierarchy Designers](https://awesome-repositories.com/f/user-interface-experience/color-systems/color-rendering-adjustments/color-saturation-adjusters/color-hierarchy-designers.md) — Implements color hierarchy design using saturation, transparency, and light-dark pairing for visual priority. ([source](https://infographic.antv.vision/learn/infographic-design)) - [Named Registries](https://awesome-repositories.com/f/user-interface-experience/color-themes/theme-application-switching/document-theme-templates/named-registries.md) — Manages named themes and templates with reusable color palettes and style configurations. - [Design Resource Registrations](https://awesome-repositories.com/f/user-interface-experience/custom-component-extensions/design-resource-registrations.md) — Extends the infographic engine by registering custom templates, themes, palettes, and resources. ([source](https://infographic.antv.vision/learn/custom-design)) - [Named Theme Application](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/theme-management/theme-development/theme-settings-configurations/named-theme-application.md) — Applies a set of global style and aesthetic defaults to an infographic by referencing a registered theme name. ([source](https://infographic.antv.vision/learn/custom-theme)) - [Spatial and Visual Binding](https://awesome-repositories.com/f/user-interface-experience/text-alignment/graphic-text-alignment-rules/spatial-and-visual-binding.md) — Binds text to graphics by adjacent placement (≤32px) or container grouping, and echoes colors and symbols between them. ([source](https://infographic.antv.vision/learn/infographic-design)) - [Visual Themes](https://awesome-repositories.com/f/user-interface-experience/visual-theme-configurations/visual-themes.md) — Switches the entire look of an infographic by selecting a theme that controls color palettes and patterns. ([source](https://infographic.antv.vision/learn/core-concepts)) - [Theme Customization](https://awesome-repositories.com/f/user-interface-experience/visual-theme-configurations/visual-themes/theme-customization.md) — Sets primary color, background, palette, and per-element styles to control infographic appearance. ([source](https://infographic.antv.vision/learn/infographic-syntax)) ### Web Development - [Infographic Canvas Editors](https://awesome-repositories.com/f/web-development/history-management/visual-editor-history/infographic-canvas-editors.md) — Provides a canvas-based visual editor for real-time infographic element manipulation and state history management. - [Infographic Incremental Streams](https://awesome-repositories.com/f/web-development/streaming-rendering/incremental-content-streaming/infographic-incremental-streams.md) — Provides real-time incremental rendering of infographics as AI-generated syntax fragments arrive. ([source](https://infographic.antv.vision/learn/infographic-syntax)) - [List Data Definitions](https://awesome-repositories.com/f/web-development/unordered-lists/list-data-definitions.md) — Defines list data structures with labels, values, descriptions, and icons for infographics. ([source](https://infographic.antv.vision/learn/infographic-syntax)) - [Infographic Server-Side Renderers](https://awesome-repositories.com/f/web-development/server-side-rendering/infographic-server-side-renderers.md) — Generates infographic SVGs server-side for non-browser environments. ([source](https://infographic.antv.vision/learn)) - [SVG Renderers](https://awesome-repositories.com/f/web-development/server-side-rendering/svg-renderers.md) — Renders infographics to SVG strings in non-browser environments using a dedicated server-side method. - [SVG Server-Side Renderers](https://awesome-repositories.com/f/web-development/server-side-rendering/svg-server-side-renderers.md) — Generates infographic SVGs in non-browser environments for static or server-rendered outputs. ### Part of an Awesome List - [Compositional Grid and Ratio Layouts](https://awesome-repositories.com/f/awesome-lists/devtools/list-and-grid-layouts/compositional-grid-and-ratio-layouts.md) — Manages spatial layout with grids, ratios, and compositional techniques for visual rhythm. ([source](https://infographic.antv.vision/learn/infographic-design)) - [Named Theme Registrations](https://awesome-repositories.com/f/awesome-lists/devtools/theming-and-customization/ui-theme-customization/theme-persistence/named-theme-registrations.md) — Saves a custom theme under a name so it can be applied to any infographic without redefining its styles. ([source](https://infographic.antv.vision/learn/custom-theme)) - [Game Engines](https://awesome-repositories.com/f/awesome-lists/devtools/game-engines.md) — Declarative engine for infographic visualization. ### Content Management & Publishing - [Template Galleries](https://awesome-repositories.com/f/content-management-publishing/category-organizations/product-categories/category-browsing/template-galleries.md) — Browses a curated library of high-fidelity infographic templates organized by chart type and layout category. ([source](https://infographic.antv.vision/gallery))