---
name: generating-infographics
description: Use when creating infographics, data visualizations, process diagrams, timelines, or comparisons - generates branded infographics using @antv/infographic with 114 templates across 7 categories. Triggers on "create infographic", "make infographic", "visualize data", "timeline", "process diagram".
version: 2.9.1
allowed-tools: Read, Write, Glob, Bash
user-invocable: false
---

# Generating Infographics

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

## Prerequisites

1. Run `/brand-init` to create project structure
2. Run `/brand-extract` to generate brand-philosophy.md
3. Run `/template-infographic` to create an infographic template

### No-Brand Safeguard

If `brand-philosophy.md` is not found OR contains no `## Color Palette` section:
- **STOP generation** — inform user: "No brand colors found. Run `/brand-extract` first to analyze your brand."
- If user insists on proceeding: use deliberately bland neutrals (#1a1a1a, #666, #f5f5f5, system fonts)
- Never fall back to any recognizable brand colors

## 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:
1. Content includes `illus` field referencing image filename
2. Supported formats: SVG (recommended), PNG, JPG
3. Options: provide your own images, find icons, or use placeholders
4. Images stored with infographic output: `infographics/{date}-{name}/illustrations/`
5. 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 presets (gradient + pattern) include `spotlight-dots` (recommended),
`spotlight-grid`, `diagonal-crosshatch`, `tech-matrix`. Simple presets include
`spotlight`, `diagonal-fade`, `top-down`, `subtle-dots`, `tech-grid`,
`crosshatch`, `solid`. Full effect descriptions and custom background
configuration: `references/backgrounds.md`.

## 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) | White or near-white (WCAG >= 4.5:1) | White at ~85% opacity | White or near-white |
| **Light** (solid, subtle-dots) | Near-black (WCAG >= 4.5:1) | Dark gray | Near-black |

**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
□ colorBg derived from brand-philosophy.md, not from skill defaults
□ colorPrimary derived from brand-philosophy.md, not from skill defaults
□ Colors traced to brand-philosophy.md (not copied from reference docs or runtime fallbacks)
□ font-family from brand-philosophy.md, not a generic default
□ Text colors WCAG-validated against actual background
```

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

### Config by Background Type

Set `title`/`desc`/`item` text fills by background brightness — dark
backgrounds need white/near-white text, light backgrounds need near-black.
**Never use palette colors for text** — they are for decorative shapes only.
Ready-to-adapt dark-bg and light-bg config JSON is in `references/theming.md`
§ Text Fill by Background Type. The `/template-infographic` command generates
correct configs from your brand-philosophy.md.

## Data Structure by Type

Content JSON shape depends on the template category — Sequence/List use a flat
`items` array of `label`+`desc`; Compare and Hierarchy nest `children`. Full
JSON examples per category: `references/templates.md` § Data Structure by Type.

## 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
```