Generating Infographics

Generate branded infographics with custom themes and backgrounds using @antv/infographic.

Prerequisites

• Run /brand-init to create project structure

• Run /brand-extract to generate brand-philosophy.md

• Run /template-infographic to create an infographic template

When to Use

• "Create an infographic"

• "Make a process diagram"

• "Visualize this data"

• "Create a timeline"

• "Show comparison infographic"

• NOT for: Charts/graphs (use charting library), presentations (use visual-content skill)

Commands

Command Purpose

/template-infographic

Create infographic template

/infographic

Generate infographic (guided)

/infographic-quick

Generate infographic (fast)

Template Categories (114 Total)

Category Count Use Cases Icons Illustrated

Sequence 43 Timelines, steps, processes, roadmaps ✓ (2) ✓ (5)

List 23 Features, grids, pyramids, sectors ✓ (4) ✓ (1)

Hierarchy 25 Org charts, tree structures — —

Compare 17 VS, before/after, SWOT — —

Quadrant 3 2x2 matrices — ✓ (1)

Relation 2 Networks, connections ✓ (1) —

Chart 1 Bar charts — —

Template Asset Types

Type Count Identifier Data Format

Text-only 100+ (default) { "label": "Cloud", "desc": "Infrastructure" }

Icon-based 8 icon in name { "label": "icon:rocket", "desc": "Fast" }

Illustrated 9 -illus suffix { "label": "Step 1", "desc": "Discovery", "illus": "step-1" }

Recommendation: Start with text-only templates. Illustrated templates require custom image files.

Illustrated Template Workflow

When using -illus templates:

• Content includes illus field referencing image filename

• Supported formats: SVG (recommended), PNG, JPG

• Options: provide your own images, find icons, or use placeholders

• Images stored with infographic output: infographics/{date}-{name}/illustrations/

• See references/illustrations.md for detailed workflow

Text Guidelines (Avoiding Overlap)

Element Max Good Bad

Labels 1-2 words "Cloud" "Cloud Computing Services"

Descriptions 2-4 words "Infrastructure design" "Complete infrastructure design and implementation"

If overlap occurs: shorten text, use wider canvas (1200px+), or use column/grid templates.

Quick Reference

Task How

Generate infographic node generate.js --config config.json --data '{...}' --output output.png

Set background --background "spotlight-dots"

SVG output --format svg

Background Presets

Layered (gradient + pattern):

Preset Effect

spotlight-dots

Radial spotlight + subtle dots (recommended)

spotlight-grid

Radial spotlight + grid lines

diagonal-crosshatch

Diagonal fade + crosshatch

tech-matrix

Tech gradient + dense grid

Simple (gradient or pattern only):

Preset Effect

spotlight

Radial gradient only

diagonal-fade

Corner to corner fade

top-down

Vertical fade

subtle-dots

Light dot pattern

tech-grid

Grid lines

crosshatch

Diagonal crosshatch

solid

Plain solid color

Workflow

1. Create Template (once)

/template-infographic

Select: category → design → palette → background → style

2. Generate Infographic (repeat)

/infographic-quick

Select template → paste content → name → get PNG

Accessibility & Readability (MANDATORY)

These checks are NON-NEGOTIABLE before generating any infographic.

Contrast Validation (WCAG AA)

Requirement Value

Minimum contrast ratio 4.5:1 for all text

Large text (title) 3:1 acceptable

Standard WCAG 2.1 AA

Key principle: Palette colors are for SHAPES and FILLS, not text. Text needs explicit high-contrast colors.

Text Color Rules by Background

Background Type Title Fill Description Fill Label Fill

Dark (spotlight-dots, tech-matrix) #FFFFFF

rgba(255,255,255,0.85)

#FFFFFF

Light (solid, subtle-dots) #1A202C

#4A5568

#1A202C

Never use palette colors for text - they're for decorative shapes only.

Spacing & Balance Rules

Element Requirement

Item spacing Minimum 20px between items

Edge margins Never touch canvas edges (min 5% padding)

Text truncation Labels 1-2 words, descriptions 2-4 words

Visual balance Equal spacing between similar elements

Pre-Generation Checklist

□ All text has 4.5:1 contrast against background □ Labels are 1-2 words (no overlap risk) □ Descriptions are 2-4 words □ Content fits template capacity (check item limits) □ Dark bg → white text, Light bg → dark text □ No text touching edges

If ANY check fails, DO NOT generate. Fix the content or config first.

Config Examples

Dark Backgrounds (spotlight-dots, tech-matrix, etc.)

{ "colorBg": "#0D2B5C", "colorPrimary": "#60A5FA", "title": { "fill": "#FFFFFF" }, "desc": { "fill": "rgba(255,255,255,0.85)" }, "item": { "label": { "fill": "#FFFFFF" }, "desc": { "fill": "rgba(255,255,255,0.7)" } } }

Light Backgrounds (solid, subtle-dots, etc.)

{ "colorBg": "#FFFFFF", "colorPrimary": "#3B82F6", "title": { "fill": "#1A202C" }, "desc": { "fill": "#4A5568" }, "item": { "label": { "fill": "#1A202C" }, "desc": { "fill": "#4A5568" } } }

Common mistake: Using pastel palette colors for text on light backgrounds. Pastels are for decorative shapes only.

See template-infographic.md for complete config examples.

Data Structure by Type

Sequence/List

{ "title": "Our Process", "items": [ { "label": "Step 1", "desc": "Discovery" }, { "label": "Step 2", "desc": "Design" } ] }

Compare

{ "title": "Before vs After", "items": [ { "label": "Before", "children": [{ "label": "Slow" }] }, { "label": "After", "children": [{ "label": "Fast" }] } ] }

Hierarchy

{ "title": "Organization", "items": [{ "label": "CEO", "children": [{ "label": "CTO" }, { "label": "CFO" }] }] }

Common Mistakes

Mistake Fix

Text overlapping Shorten labels (1-2 words), descriptions (2-4 words)

Missing illustrations Check template ends in -illus , provide SVG/PNG/JPG files

Icon not showing Use icon:name syntax, only for icon templates

Background not applied Pass --background flag to generate.js

Text invisible on light bg Add explicit title /desc /item fills with dark colors (#1A202C, #4A5568)

Pastel text unreadable Palette colors are for shapes only; text needs high contrast (~4.5:1)

References

• references/templates.md

• Complete 114 template catalog with asset requirements

• references/theming.md

• Theme configuration details

• references/backgrounds.md

• Background customization guide

• references/icons.md

• Available icons for icon-based templates

• references/illustrations.md

• Illustrated template workflow and SVG requirements

Module Structure

lib/ ├── renderer.js # Main entry point ├── dom-setup.js # JSDOM environment ├── infographic.js # Infographic creation ├── exporter.js # SVG/PNG export ├── backgrounds.js # Gradient/pattern backgrounds └── icons.js # Icon utilities