Skip to content

Smart Infographic

Action v1.4.9

An AntV Infographic engine powered plugin that transforms long text into professional, beautiful infographics with a single click.


Overview

The Smart Infographic plugin uses AI to analyze text content and generate professional infographics using the AntV visualization engine. It automatically extracts key points and structures them into visually appealing charts and diagrams.

Features

  • AI-Powered Transformation: Automatically analyzes text logic, extracts key points, and generates structured charts
  • 70+ Professional Templates: Includes various AntV official templates: Lists, Trees, Roadmaps, Timelines, Comparison Tables, SWOT, Quadrants, and Statistical Charts
  • Auto-Icon Matching: Built-in logic to search and match the most relevant icons (Iconify) and illustrations (unDraw)
  • Multi-Format Export: Download your infographics as SVG, PNG, or Standalone HTML file
  • Theme Support: Supports Dark/Light modes, auto-adapts theme colors
  • Responsive Design: Generated charts look great on both desktop and mobile devices
  • Image Embedding: Option to embed charts as static images for better compatibility
  • Adaptive Sizing: Images automatically adapt to the chat container width

Installation

  1. Download the plugin file: infographic.py
  2. Upload to OpenWebUI: Admin PanelSettingsFunctions
  3. Configure plugin settings (optional)
  4. Enable the plugin

Supported Template Types

Category Template Name Use Case
Sequence sequence-timeline-simple, sequence-roadmap-vertical-simple, sequence-snake-steps-compact-card Timelines, Roadmaps, Processes
Lists list-grid-candy-card-lite, list-row-horizontal-icon-arrow, list-column-simple-vertical-arrow Features, Bullet Points, Lists
Comparison compare-binary-horizontal-underline-text-vs, compare-swot, quadrant-quarter-simple-card Pros/Cons, SWOT, Quadrants
Hierarchy hierarchy-tree-tech-style-capsule-item, hierarchy-structure Org Charts, Structures
Charts chart-column-simple, chart-bar-plain-text, chart-line-plain-text, chart-wordcloud Trends, Distributions, Metrics

Usage

  1. Enter your text content in the chat
  2. Click the Infographic button (📊 icon) in the message action bar
  3. Wait for AI to analyze and generate the infographic
  4. Preview the result and use the download buttons to save

Configuration

Option Type Default Description
SHOW_STATUS boolean true Show real-time AI analysis and generation status
MODEL_ID string "" Specify the LLM model for text analysis. If empty, uses current chat model
MIN_TEXT_LENGTH integer 100 Minimum characters required to trigger analysis
CLEAR_PREVIOUS_HTML boolean false Whether to clear previous charts
MESSAGE_COUNT integer 1 Number of recent messages to use for analysis
OUTPUT_MODE string image image for static image embedding (default), html for interactive chart

Syntax Example (Advanced Users)

You can also input infographic syntax directly for rendering:

infographic list-grid
data
  title 🚀 Plugin Benefits
  desc Why use the Smart Infographic plugin
  items
    - label Fast Generation
      desc Convert text to charts in seconds
    - label Beautiful Design
      desc Uses AntV professional design standards

Requirements

Prerequisites

  • OpenWebUI v0.3.0 or later
  • No additional Python packages required (uses built-in OpenWebUI dependencies)

Troubleshooting

Infographic not generating?

Make sure your text content is at least 100 characters (configurable via MIN_TEXT_LENGTH).

Template not matching content?

The AI automatically selects the best template based on content structure. For specific templates, you can use the advanced syntax.

Export not working?

Ensure your browser supports HTML5 Canvas and SVG. Try refreshing the page.


Source Code

View on GitHub