AntV Infographic

AntV Infographic's core functionality is divided into these modules:

• JSX Engine: Parses JSX without relying on React, outputs SVG.
• Design Assets: Collection of visual building blocks including structures, items, decorations, etc.
• Syntax Parsing: Parses infographic syntax to compose reusable templates.
• Editor: Interactive canvas element modification capabilities, including plugin system, interactions, and command/state management.
• Renderer: Renders templates and data into final SVG output, supports export.
• Stylization: Provides various stylization effects such as hand-drawn, textures, etc.
• Resource Loading: Loads external icons, illustrations, and other resources, with custom extension support.

The rendering process consists of two distinct stages:

1. Processing Stage (processElement): Converts the JSX tree into a ProcessedElement tree. This stage expands function components, flattens fragments, executes layout functions (via createLayout), and collects bounds information.
2. Rendering Stage (render): Converts the ProcessedElement tree into a final SVG string. This stage generates SVG tags, applies attributes/styles, and auto-computes the viewBox.

The project follows this directory structure:

• /src/content: Markdown documentation content
• /src/components: UI components
• /src/pages: Next.js page routes
• /public: Static assets

The repository is organized into several key directories:

• src/designs: Design assets (structures, items, layouts, components, decorations, titles, etc.)
• src/jsx: JSX engine (primitive components, types, layouts, and rendering)
• src/options: Infographic syntax definition and parsing
• src/editor: Editor (plugins, interactions, commands, state management)
• src/renderer: Core renderer and stylization capabilities
• src/resource: Resource loading system
• src/runtime: Runtime logic
• src/templates: Template registration
• src/themes: Theme configuration
• src/types: Common types
• src/utils: Utility functions
• src/constants: Constant definitions
• __tests__: Unit and utility tests
• dev: Development environment and debugging

An infographic is composed of several key visual elements used to transform complex information into readable and memorable content. The core components include:

• Title: Identifies the core theme and purpose. It should be concise and prominent, typically placed at the top.
• Item: The basic unit of narrative that carries specific information. Multiple items combine to form complete content.
• Decoration: Elements used to optimize visual hierarchy, guide the eye, or create atmosphere (e.g., background textures, dividers, geometric color blocks).
• Illustration: Large-scale visual images that assist in explaining themes or providing metaphors, complementing text and data.

AntV Infographic is built on a three-layer architecture designed to decouple infographic description from specific UI frameworks:

1. JSX Rendering Engine: An independent JSX Runtime that allows describing infographics using JSX syntax. It renders JSX elements as SVG and does not require React. It uses built-in primitive nodes (shapes, text, groups) and provides createLayout for custom layout algorithms.
2. Runtime Environment: Consists of a Template Generator (parses infographic syntax into reusable templates), a Renderer (converts templates and data into SVG with export support), and an Editor (for interactive modification, coming soon).
3. External API Interface: Provides APIs for creation, rendering, and exporting, along with Schema acquisition capabilities for AI model integration.

An Item is the fundamental unit of information in an infographic, responsible for displaying a single data element. Items are organized and laid out using a Structure to form a complete infographic.

Every Item component must be designed to receive the following props:

• datum: The data object for the current item.
• data: The complete dataset (containing all items).
• indexes: The positional index of the current item within the structure.
• themeColors: The theme color configuration.
• positionH: Horizontal alignment. Supported values: 'normal', 'center', 'flipped'.
• positionV: Vertical alignment. Supported values: 'normal', 'middle', 'flipped'.

The AntV Infographic classification system is built around a single core dimension: structural form. Its key characteristics include:

• Unified Dimension: Focuses exclusively on structural form.
• Clear Boundaries: Uses a priority-based judgment process to reduce classification ambiguity.
• High Practicality: Directly supports design, template recommendation, and data extraction scenarios.
• Extensibility: Supports multi-classification and tagging systems for complex use cases.

AntV Infographic provides several categories of built-in design assets to accelerate infographic creation. These assets can be combined with custom capabilities to handle common design scenarios. Available asset categories include:

• Built-in Structures: Pre-defined layout frameworks.
• Built-in Items: Individual graphic elements.
• Built-in Templates: Complete infographic layouts.
• Built-in Palettes: Pre-configured color schemes.
• Built-in Patterns: Background or texture patterns.
• Built-in Components: Reusable UI or infographic modules.

The @antv/infographic library is built on four design pillars to make data storytelling simple, elegant, and efficient:

• Simplicity over Complexity: Avoid excessive decoration; let the information be the protagonist.
• Clarity over Gimmicks: Prioritize accurate information transmission over visual stunts.
• Balance of Professionalism and Aesthetics: Combine credibility with visual pleasure.
• Balance of Standardization and Flexibility: Provide out-of-the-box templates while supporting deep customization.

The Infographic framework is built upon three fundamental components that work together to create a complete infographic:

• Structure: The entry point component responsible for the overall layout and the organization of data items.
• Title: An optional component used for providing headings or titles.
• Item/Items: Components used to display single or multiple units of information.

For hierarchical layouts, you can use an Items array to pass multiple components, such as a root node component and its child node components.