antvis/Infographic
Infographic
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.
Features
- Generative Infographic Layouts - Converts natural language descriptions into complete infographic layouts and designs using AI agents.
- Sequence Data Definitions - Defines sequence data structures for ordered timelines or steps in infographics.
- Hierarchy Data Definitions - Defines hierarchy data structures with root nodes and recursive children for infographics.
- Custom Template Registrations - Saves a design configuration under a name so it can be reused across infographics by referencing that name in the syntax.
- Comparison Data Definitions - Defines comparison data structures for side-by-side or grouped infographic charts.
- Data Storytelling Frameworks - Combines AI generation with structured layout templates for creating data-driven visual narratives.
- Declarative Rendering - Transforms structured declarative specifications into SVG graphics for data storytelling.
- Infographic Declarative Renderers - Transforms structured declarative specifications into high-fidelity SVG infographics for data storytelling.
- Relation Data Definitions - Defines relation data structures with edges, labels, and arrow styles for infographics.
- Infographic Spec Compilers - Defines infographics by combining design, template, data, theme, and resource blocks into a single declarative specification.
- Canvas-Based - Provides a real-time editing canvas with element manipulation and state history management.
- Infographic Theme Templates - Applies reusable color palettes, custom templates, and global style defaults for consistent infographic design.
- Statistical Data Definitions - Defines statistical data structures with numeric metrics and category grouping for infographics.
- Infographic Declarative Engines - Transforms concise declarative specifications into high-fidelity SVG infographics with multi-pattern layout support.
- Infographic Layout Orientations - Provides multi-pattern layout selection for arranging infographic data structures.
- Multi-Pattern Layout Engines - Arranges data into lists, hierarchies, sequences, and relations for infographic layouts.
- Infographic Layouts - Renders high-fidelity SVG infographics by parsing declarative syntax describing layout and data.
- Visual Hierarchies - Constructs visual hierarchies using color depth, size, shape, and guided viewing order.
- Infographic Canvas Editors - Provides a canvas-based visual editor for real-time infographic element manipulation and state history management.
- Infographic Incremental Streams - Provides real-time incremental rendering of infographics as AI-generated syntax fragments arrive.
- List Data Definitions - Defines list data structures with labels, values, descriptions, and icons for infographics.
- Compositional Grid and Ratio Layouts - Manages spatial layout with grids, ratios, and compositional techniques for visual rhythm.
- Named Theme Registrations - Saves a custom theme under a name so it can be applied to any infographic without redefining its styles.
- Template Galleries - Browses a curated library of high-fidelity infographic templates organized by chart type and layout category.
- Application Templates - Applies selected infographic templates directly into applications for immediate rendering.
- Template and Theme Plugin Interfaces - Extends the interactive editor by registering custom templates, themes, palettes, and resources.
- Theme Overrides - Adjusts specific visual properties of an active theme at render time without altering the registered theme.
- Infographic Template References - Applies pre-configured infographic layouts by referencing registered template names.
- Composition Balance Techniques - Arranges elements by mirroring or by visual weight (color, size, density) to create a stable, non-lopsided layout.
- Color Hierarchy Designers - Implements color hierarchy design using saturation, transparency, and light-dark pairing for visual priority.
- Named Registries - Manages named themes and templates with reusable color palettes and style configurations.
- Design Resource Registrations - Extends the infographic engine by registering custom templates, themes, palettes, and resources.
- Named Theme Application - Applies a set of global style and aesthetic defaults to an infographic by referencing a registered theme name.
- Spatial and Visual Binding - Binds text to graphics by adjacent placement (≤32px) or container grouping, and echoes colors and symbols between them.
- Visual Themes - Switches the entire look of an infographic by selecting a theme that controls color palettes and patterns.
- Theme Customization - Sets primary color, background, palette, and per-element styles to control infographic appearance.
- Infographic Server-Side Renderers - Generates infographic SVGs server-side for non-browser environments.
- SVG Renderers - Renders infographics to SVG strings in non-browser environments using a dedicated server-side method.
- SVG Server-Side Renderers - Generates infographic SVGs in non-browser environments for static or server-rendered outputs.
- Game Engines - Declarative engine for infographic visualization.
Star history
How this analysis was created: This summary and feature list were written by an AI model that read the project's README and public documentation pages. Each feature links to the documentation it came from; stars, license and language come straight from the GitHub API. The model does not read the source code, and the analysis is refreshed when the project is re-analysed. Learn more on our About page.
