infographize

어떤 스킬인가요?

Convert markdown documents into AntV infographic SVGs. Analyzes content structure, selects optimal template, generates AntV syntax, and renders to SVG. Use when user wants to create infographics, visual summaries, or storytelling visuals from markdown.

설치 방법

프로젝트 폴더에서 아래 명령어를 실행하고, 설치할 에이전트를 선택하세요.

설치 명령을 직접 실행해야 적용됩니다. 지원 에이전트와 필요한 권한·라이선스는 제작자의 안내를 확인하세요.

스킬 원문 파일

# Infographize Reference

## Visual Storytelling Principles

- **60/40 rule**: 60% graphics, 40% text — infographics are visual-first
- **Hierarchy**: Title → section headers → item labels → descriptions. Size and weight decrease with depth
- **Proximity** (Gestalt): Related items grouped spatially. Use template structure to reinforce groupings
- **Balance**: Distribute visual weight evenly. Avoid overloading one side
- **Contrast**: Use color/size to highlight key data. Primary color for emphasis, muted for supporting
- **Simplicity**: One idea per infographic. Split complex content into multiple renders if needed

## Content Analysis → Template Category

| Content pattern | Category | Data field |
|---|---|---|
| Bullet lists, features, options | `list-*` | `lists` |
| Numbered steps, processes, timelines | `sequence-*` | `sequences` |
| Pros/cons, A vs B, SWOT, quadrant | `compare-*` | `compares` |
| Nested structure, org chart, taxonomy | `hierarchy-*` | `root` with `children` |
| Connected items, network, flow | `relation-*` | `nodes` + `relations` |
| Numeric data, percentages, stats | `chart-*` | `values` |

## Template Catalog (Top 20)

### List (5)

| Template ID | Best for |
|---|---|
| `list-row-simple-horizontal-arrow` | Horizontal feature list with flow |
| `list-grid-simple` | Grid layout for 4-8 equal items |
| `list-column-simple-vertical-arrow` | Vertical list with progressive flow |
| `list-pyramid-rounded-rect-node` | Ranked items, importance hierarchy |
| `list-zigzag-up-compact-card` | Alternating layout, visual variety |

### Sequence (4)

| Template ID | Best for |
|---|---|
| `sequence-timeline-rounded-rect-node` | Timeline with detailed steps |
| `sequence-roadmap-vertical-simple` | Project roadmap, milestones |
| `sequence-steps-simple` | Simple numbered steps |
| `sequence-stairs-front-simple` | Progressive/building steps |

### Compare (3)

| Template ID | Best for |
|---|---|
| `compare-binary-horizontal-badge-card-fold` | Two-option comparison |
| `compare-swot` | SWOT analysis (4 quadrants) |
| `compare-quadrant-quarter-simple-card` | 2×2 matrix classification |

### Hierarchy (3)

| Template ID | Best for |
|---|---|
| `hierarchy-tree-horizontal-simple` | Org chart, horizontal tree |
| `hierarchy-tree-vertical-card` | Top-down taxonomy |
| `hierarchy-mindmap-branch-simple-left` | Mind map, brainstorming |

### Relation (3)

| Template ID | Best for |
|---|---|
| `relation-dagre-flow-tb-simple-circle-node` | Top-down flow diagram |
| `relation-circle-icon-badge` | Circular relationship |
| `relation-dagre-flow-lr-simple-circle-node` | Left-right flow diagram |

### Chart (2)

| Template ID | Best for |
|---|---|
| `chart-bar-plain-text` | Bar chart for comparisons |
| `chart-pie-donut-plain-text` | Proportions, market share |

## Data Field Reference

### List / Sequence items
```
lists (or sequences):
  - label: Item title
    desc: Item description
    icon: Optional emoji or URL
    value: Optional numeric value
```

### Compare items
```
compares:
  - label: Option name
    desc: Option description
    lists:
      - label: Sub-item
        desc: Sub-detail
```

### SWOT compare
```
compares:
  - label: Strengths
    lists:
      - label: Point 1
  - label: Weaknesses
    lists:
      - label: Point 1
  - label: Opportunities
    lists:
      - label: Point 1
  - label: Threats
    lists:
      - label: Point 1
```

### Hierarchy (root + children)
```
root:
  label: Root node
  children:
    - label: Child 1
      children:
        - label: Grandchild
    - label: Child 2
```

### Relation (nodes + edges)
```
nodes:
  - id: a
    label: Node A
  - id: b
    label: Node B
relations:
  - from: a
    to: b
    label: Edge label
```

### Chart values
```
values:
  - label: Category A
    value: 42
  - label: Category B
    value: 58
```

## Theme Options

Three built-in themes set via `theme` keyword:
- `light` (default) — clean white background
- `dark` — dark background, light text
- `hand-drawn` — sketch/whiteboard aesthetic

Custom theming via `themeConfig`:
```
themeConfig
  colorPrimary #3B82F6
  colorBg #0F172A
  palette #FBBF24,#3B82F6,#EF4444,#10B981
```

## AntV Syntax Structure

```
infographic <template-id>
  title <infographic title>
  theme <light|dark|hand-drawn>
  themeConfig
    colorPrimary <hex>
    colorBg <hex>
    palette <hex>,<hex>,...
  data
    <data-fields per category>
```

Indentation: 2 spaces per level. All data nested under `data` keyword.

#!/usr/bin/env bun
/**
 * AntV Infographic SSR renderer
 * Usage: bun run render.ts <syntax-file> <output.svg> [--preview]
 */
import { renderToString } from "@antv/infographic/ssr";
import { writeFileSync, readFileSync, mkdirSync } from "fs";
import { dirname } from "path";
import "@antv/infographic";

const [syntaxFile, outputPath, ...flags] = Bun.argv.slice(2);

if (!syntaxFile || !outputPath) {
  console.error("Usage: bun run render.ts <syntax-file> <output.svg> [--preview]");
  process.exit(1);
}

// Read AntV syntax from file
const syntax = readFileSync(syntaxFile, "utf-8");

// Ensure output directory exists
mkdirSync(dirname(outputPath), { recursive: true });

try {
  const svg = await renderToString(syntax);
  writeFileSync(outputPath, svg);
  console.log(`✅ Rendered → ${outputPath}`);
} catch (e: any) {
  console.error(`❌ Render failed: ${e.message}`);
  process.exit(1);
}

// Auto-preview in VS Code if requested
if (flags.includes("--preview")) {
  try {
    Bun.spawnSync(["code", "--reuse-window", outputPath]);
    console.log(`🔍 Opened preview in VS Code`);
  } catch {
    console.log(`⚠️ VS Code preview unavailable — open manually: ${outputPath}`);
  }
}

---
name: infographize
description: Convert markdown documents into AntV infographic SVGs. Analyzes content structure, selects optimal template, generates AntV syntax, and renders to SVG. Use when user wants to create infographics, visual summaries, or storytelling visuals from markdown.
tools: Bash, Read, Write
model: sonnet
---

# Infographize

Convert any markdown document into a visual infographic SVG via AntV Infographic SSR.

## Workflow

1. **Dependency check**: Run `bun run -e "import '@antv/infographic'" 2>/dev/null`. If it fails, install via `install-dependency` skill (`@antv/infographic`, bun package) before proceeding
2. **Read** the source markdown file
2. **Read** `<skill_dir>/reference.md` for template catalog and data field mappings
3. **Analyze** content structure — identify the dominant information type:
   - Bullet lists, features, options → `list-*`
   - Numbered steps, processes, timelines → `sequence-*`
   - Pros/cons, A vs B, SWOT → `compare-*`
   - Nested structure, org chart, taxonomy → `hierarchy-*`
   - Connected items, network, dependencies → `relation-*`
   - Numeric data, percentages, stats → `chart-*`
4. **Select** the best template from the catalog (match content pattern to template's "best for")
5. **Map** markdown content → AntV syntax using the correct data fields for that category
6. **Write** the AntV syntax to a `.txt` file next to the output path
7. **Render** by calling: `bun run <skill_dir>/scripts/render.ts <syntax-file> <output.svg> --preview`

## Output

- Default output: same directory as input, same basename with `.svg` extension
- User can specify a custom output path as second argument

## Content Mapping Rules

- **Be concise**: Infographics are visual-first. Distill prose into short labels (3-7 words) and brief descriptions (1 sentence max)
- **60/40 rule**: Favor graphics over text. Cut detail that doesn't serve the visual narrative
- **One idea per infographic**: If the markdown covers multiple distinct topics, pick the primary one or ask the user
- **Preserve hierarchy**: Map heading levels to visual hierarchy (title → section → item)
- **Extract data**: Pull numbers, percentages, counts into `value` fields when available

## Theme

Default: `light`. User can request `dark`, `hand-drawn`, or custom colors — see reference.md for `themeConfig` options.