# Infographic Generator

> Infographic Generator

- Skill: `lucadominguez/infographic-generator` (Agent Skill)
- Install (CLI): `npx skillmds@latest add lucadominguez/infographic-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lucadominguez/infographic-generator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: lucadominguez (https://skillmd.com/u/lucadominguez)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lucadominguez/infographic-generator

---

# Infographic Generator

Generate professional infographics for two primary use cases:
1. **GitHub repo marketing** — social preview images, stats cards, profile banners
2. **BHW-style business infographics** — MRR screenshots, comparison tables, process flows, earnings proof

## Tool Selection Guide

| What you want | Best tool | Why |
|---|---|---|
| GitHub repo social preview (OG image) | **wei/socialify** | Zero-code, just a URL |
| GitHub stats cards (stars, commits, langs) | **eru123/gh-stats** or anuraghazra/github-readme-stats | Markdown embed, self-hostable |
| Quick chart (bar, line, pie) | **QuickChart.io** (curl API) | No install needed, PNG output |
| Structured infographic (process, compare, hierarchy) | **@antv/infographic** | ~200 templates, AI-friendly DSL, SVG |
| Custom HTML/CSS infographic → PNG | **Playwright + Chromium** | Full control, installed locally |
| OG image from HTML/CSS (no browser) | **@vercel/og / Satori** | Serverless, JSX→PNG |
| MRR / revenue screenshot | **Custom HTML → Playwright** or superframeworks.com | Social proof for BHW |

## 1. GitHub Repo Social Preview

### 1a. Socialify (easiest, no install)

**wei/socialify** (2,211 stars) — generates beautiful project cards with live data.

```
URL format: https://socialify.git.ci/<owner>/<repo>/image?<params>

Key params:
  - font=Raleway|Inter|Bitter|Jost|KoHo|Source+Code+Pro
  - language=1 (show primary language)
  - name=1 (show repo name)
  - owner=1 (show owner)
  - pattern=Plus|Circuit+Board|Charlie+Brown|Diagonal+Stripes|Signal|Formal+Invitation
  - theme=Light|Dark
  - stargazers=1 (show star count)
  - forks=1 (show fork count)
  - issues=1 (show issue count)
  - pulls=1 (show PR count)
  - description=1 (show description)
  - logo=<URL> (custom logo)
```

Example:
```
https://socialify.git.ci/antvis/Infographic/image?description=1&font=Raleway&language=1&name=1&owner=1&pattern=Circuit+Board&stargazers=1&theme=Dark
```

**Usage:** Just embed the URL as an `<img>` tag in your README. It updates live from GitHub data.

For downloading as PNG for GitHub social preview settings, append `&format=png` or use the web UI at https://socialify.git.ci.

### 1b. GitHub Stats Cards (self-hostable)

**eru123/gh-stats** — self-hosted replacement for anuraghazra/github-readme-stats. Runs on Node.js/Express or Cloudflare Workers.

Embed in README:
```markdown
![GitHub Stats](https://gh-stats.skiddph.com/api/stats?username=YOUR_USERNAME&show_icons=true)
![Top Langs](https://gh-stats.skiddph.com/api/top-langs?username=YOUR_USERNAME)
![Repo Pin](https://gh-stats.skiddph.com/api/pin?username=YOUR_USERNAME&repo=REPO_NAME)
```

**Local setup:**
```bash
git clone https://github.com/eru123/gh-stats
cd gh-stats
npm install
# Set GITHUB_TOKEN in .env
node server.js  # runs on :3000
```

### 1c. Repo OG Image Generator (self-hosted, Satori-based)

**amansanoj/repo-og-generator** — Vercel-based, uses Satori + Hono.
- 1200x630 PNG output
- Customizable color variants
- Font bundling for layout fidelity

**SylphxAI/og** — 6 themes, Bun-based, instant generation.

## 2. @antv/infographic — Structured Infographics (the powerhouse)

**@antv/infographic** (from Ant Group/Alibaba) is the single most powerful tool. ~200 built-in templates, AI-friendly declarative syntax, SVG output by default.

### Installation

```bash
npm install @antv/infographic
```

### Template Categories (~200 total)

| Category | Template prefix | Count | Best for |
|---|---|---|---|
| **Charts** | `chart-bar`, `chart-column`, `chart-line`, `chart-pie`, `chart-wordcloud` | ~12 | Data viz |
| **Lists** | `list-row`, `list-grid`, `list-column`, `list-pyramid`, `list-sector`, `list-waterfall`, `list-zigzag` | ~33 | Feature lists, pricing, comparisons |
| **Sequences** | `sequence-steps`, `sequence-stairs`, `sequence-ascending`, `sequence-circle`, `sequence-circular`, `sequence-color` | ~13 | Process flows, timelines, roadmaps |
| **Comparisons** | `compare-binary`, `compare-hierarchy`, `compare-quadrant`, `compare-swot` | ~20 | SWOT, quadrants, side-by-side |
| **Hierarchy** | `hierarchy-structure`, `hierarchy-tree` (100 templates!) | ~102 | Org charts, taxonomies |
| **Relations** | `relation-circle`, `relation-dagre`, `relation-network` | ~18 | Network graphs, flow diagrams |
| **Quadrants** | `quadrant-quarter`, `quadrant-simple` | ~3 | 2x2 matrices |
| **Mind Maps** | mind map templates | ~10 | Brainstorming |

### Syntax (AI-Friendly DSL)

```yaml
infographic <template-name>
theme <theme-name>
  palette [color1, color2, ...]
  fontFamily <font>
data
  title Main Title
  desc Description text
  lists
    - label Item 1
      desc Description 1
      icon icon-name
      value 100
    - label Item 2
      desc Description 2
      value 200
```

### Usage Pattern (Node.js script → SVG output)

```javascript
const { Infographic } = require('@antv/infographic');
const fs = require('fs');

const infographic = new Infographic({
  width: 1200,
  height: 800,
  editable: false,
});

const syntax = `
infographic list-grid-compact-card
theme light
  palette ['#1890ff', '#52c41a', '#faad14', '#f5222d']
data
  title Feature Comparison
  lists
    - label Speed
      desc 10x faster
      value 95
    - label Reliability
      desc 99.9% uptime
      value 99
    - label Support
      desc 24/7 team
      value 90
    - label Price
      desc Affordable
      value 85
`;

const svg = await infographic.renderToSVG(syntax);
fs.writeFileSync('output.svg', svg);
```

### Key Template Names (ready to use)

**For BHW-style feature comparisons:**
- `list-grid-compact-card` — card grid with icons
- `list-row-horizontal-icon-arrow` — horizontal feature list
- `list-zigzag-alternating` — alternating feature rows
- `compare-binary-simple` — side-by-side comparison
- `compare-swot` — SWOT analysis matrix

**For process/how-it-works:**
- `sequence-steps-simple` — linear step sequence
- `sequence-stairs-front-pill-badge` — stair-step progression
- `sequence-circular-simple` — circular process
- `sequence-ascending-progress` — ascending steps

**For data/charts:**
- `chart-bar-grouped` — grouped bar chart
- `chart-column-stacked` — stacked column chart
- `chart-line-multi` — multi-line chart
- `chart-pie-donut` — donut chart
- `chart-wordcloud` — word cloud

**For hierarchy/taxonomy:**
- `hierarchy-structure` — org chart
- `relation-dagre-flow-tb-simple-circle-node` — flow diagram

### Converting SVG to PNG

```bash
# Using resvg (fast, Rust-based)
cargo install resvg
resvg input.svg output.png

# Using rsvg-convert (apt install librsvg2-bin)
rsvg-convert -w 1200 input.svg -o output.png

# Using Inkscape (apt install inkscape)
inkscape input.svg --export-filename=output.png --export-width=1200

# Using Chromium headless (most reliable for complex SVGs)
chromium-browser --headless --screenshot=output.png --window-size=1200,800 --default-background-color=0 input.svg
```

## 3. QuickChart.io — Chart API (zero install, curl-based)

Produces PNG/SVG charts from Chart.js config via a simple HTTP GET.

### Quick Reference

```bash
# Bar chart
curl -G "https://quickchart.io/chart" \
  --data-urlencode 'c={"type":"bar","data":{"labels":["Jan","Feb","Mar","Apr"],"datasets":[{"label":"Revenue","data":[12000,19000,15000,25000],"backgroundColor":"#4F46E5"}]}}' \
  -o revenue-chart.png

# Line chart  
curl -G "https://quickchart.io/chart" \
  --data-urlencode 'c={"type":"line","data":{"labels":["Week1","Week2","Week3","Week4"],"datasets":[{"label":"Traffic","data":[1000,2500,1800,4200],"borderColor":"#10B981","fill":false}]}}' \
  -o traffic-chart.png

# Pie chart
curl -G "https://quickchart.io/chart" \
  --data-urlencode 'c={"type":"doughnut","data":{"labels":["Direct","Social","Referral","Organic"],"datasets":[{"data":[30,25,20,25],"backgroundColor":["#4F46E5","#10B981","#F59E0B","#EF4444"]}]}}' \
  -o traffic-sources.png

# Custom size
curl -G "https://quickchart.io/chart" \
  --data-urlencode 'width=800' \
  --data-urlencode 'height=400' \
  --data-urlencode 'c={"type":"bar","data":{"labels":["A","B","C"],"datasets":[{"data":[5,3,8]}]}}' \
  -o chart.png
```

### BHW Earning-Style Chart Template

```bash
#!/bin/bash
# MRR growth chart (BHW style)
curl -G "https://quickchart.io/chart" \
  --data-urlencode 'width=1200' \
  --data-urlencode 'height=630' \
  --data-urlencode 'backgroundColor=#0F172A' \
  --data-urlencode 'c={
    "type":"line",
    "data":{
      "labels":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
      "datasets":[{
        "label":"MRR",
        "data":[500,800,1200,2000,3500,5000,7800,11000,15000,22000,28000,35000],
        "borderColor":"#10B981",
        "backgroundColor":"rgba(16,185,129,0.1)",
        "fill":true,
        "borderWidth":3,
        "pointRadius":4,
        "pointBackgroundColor":"#10B981"
      }]
    },
    "options":{
      "scales":{
        "yAxes":[{"ticks":{"fontColor":"#94A3B8","callback":"function(v){return \"$\"+v.toLocaleString()}"}}],
        "xAxes":[{"ticks":{"fontColor":"#94A3B8"}}]
      },
      "legend":{"labels":{"fontColor":"#E2E8F0"}},
      "title":{"display":true,"text":"Monthly Recurring Revenue (MRR)","fontColor":"#F1F5F9","fontSize":24}
    }
  }' \
  -o mrr-chart.png
```

## 4. Playwright + Chromium — HTML→PNG (Full Control)

For custom infographic designs that need precise HTML/CSS control.

### Environment

- Chromium 150 installed via snap (`/usr/bin/chromium-browser`)
- Python Playwright installed system-wide (`from playwright.sync_api import sync_playwright`)
- Node.js v22 available but Node Playwright NOT installed — use Python, not Node

### Usage (Python Playwright — preferred)

```python
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(
        executable_path='/usr/bin/chromium-browser',
        args=['--no-sandbox', '--disable-setuid-sandbox']
    )
    page = browser.new_page()
    page.set_viewport_size({"width": 800, "height": 600})
    page.goto("file:///path/to/file.html")
    page.wait_for_timeout(800)
    
    # For tall infographics, detect actual height
    body = page.query_selector("body")
    box = body.bounding_box()
    page.set_viewport_size({"width": 800, "height": int(box["height"])})
    
    page.screenshot(path="output.png", full_page=True)
    browser.close()
```

Or use the convenience script: `python3 scripts/render_html.py input.html output.png [width] [height]`

### Pitfalls

- **Node.js `require('playwright')` will fail** — Python Playwright is installed, not Node.js. Always use Python.
- **`page.setViewportSize` is camelCase in Node, snake_case (`set_viewport_size`) in Python** — don't mix them up.
- **Full-page height detection**: For tall infographics (like BHW ads), set a small initial viewport height (600), load the page, query `body.bounding_box()`, then resize to the actual height before screenshotting.

### BHW Marketing Ad Template

Two template tiers available:

- **Quick dashboard** — `templates/mrr-dashboard.html`: Single-card MRR metrics (1200x630px). Good for social proof screenshots.
- **Full sales thread** — `templates/bhw-sales-thread.html`: Complete 12-section BHW sales page (975px wide, 6,000+px tall). Contains hero, trust bar, problem/solution, how-it-works, before/after, proof screenshots, pricing, competitor comparison, testimonials, FAQ, guarantee, and final CTA. This is the template to use for actual BHW marketplace threads.

Copy and modify for your service.

## 5. BHW Sales Thread Infographics — Style Guide

**CRITICAL**: BHW infographics are NOT modern SaaS-style. They are dense, long-scroll, direct-response sales pages embedded in images. See `references/bhw-style-guide.md` for full research notes.

### Key Rules

1. **Dimensions**: 975px wide (forum width). 6,000-10,000px tall. Under 2MB.
2. **Aesthetic**: Dark developer theme (`#0d1117` base). Bold colored section banners (red, green, blue, orange, purple). NOT sleek gradients.
3. **Density**: Every pixel carries information. Pack it in. This is a sales page, not a teaser.
4. **Required sections** (in order):
   - Hero + trust bar + CTA buttons + Telegram contact
   - "THE PROBLEM" (red banner) — what competitors do wrong
   - "THE SOLUTION" (green banner) — feature grid
   - "HOW IT WORKS" (blue banner) — 3-4 steps
   - "BEFORE vs AFTER" (orange banner) — metrics comparison
   - "LIVE DASHBOARD" (purple banner) — screenshot proof
   - Pricing table (3 tiers, middle "BEST VALUE")
   - Competitor comparison table
   - Testimonials (with BHW member badges)
   - FAQ (5-7 questions)
   - Money-back guarantee seal
   - Final CTA with all contact methods
5. **Colors**: Orange for CTAs/highlights, green for checkmarks/growth, red for problems/competitor weaknesses, blue for links/Telegram
6. **Trust signals**: Jr. VIP badges, member join dates, star ratings, live metrics, SSL/PayPal icons
7. **Never**: Minimal design, large whitespace, elegant typography, subtle gradients, single-CTA layouts

### Template

Copy and modify `templates/bhw-sales-thread.html` for full-structure BHW sales infographics. It contains all 12+ sections pre-styled with the correct color system. Replace the fictional "RankPulse" content with your real service details.

## 6. Decision Flow

```
User wants an infographic?
│
├─ GitHub repo social preview?
│  ├─ Quick & live → socialify.git.ci (URL)
│  ├─ Stats/graphs in README → gh-stats (self-hosted)
│  └─ Custom OG image → repo-og-generator (Satori)
│
├─ BHW social proof / MRR dashboard?
│  ├─ Just a chart → QuickChart.io (curl API)
│  ├─ Dashboard with metrics → Custom HTML → Playwright (see templates/bhw-marketing-ad.html)
│  └─ Feature comparison → @antv/infographic
│
├─ Process / timeline / steps?
│  └─ @antv/infographic (sequence-* templates)
│
├─ SWOT / comparison / quadrant?
│  └─ @antv/infographic (compare-* or quadrant-* templates)
│
├─ Hierarchical / org chart / taxonomy?
│  └─ @antv/infographic (hierarchy-* templates, 100+ available)
│
├─ Data visualization (charts)?
│  ├─ Simple → QuickChart.io
│  └─ Complex/multi → @antv/infographic (chart-* templates)
│
└─ Custom design not fitting any template?
   └─ Custom HTML/CSS → Playwright + Chromium
```

## 6. Image Conversion Pipeline

```
DSL/Syntax                HTML+CSS                URL
    │                        │                     │
    ▼                        ▼                     ▼
@antv/infographic    Playwright/Chromium    socialify.git.ci
    │                        │              QuickChart.io
    ▼                        ▼
   SVG                      PNG
    │
    ├── resvg (fast CLI)
    ├── rsvg-convert
    ├── inkscape
    └── chromium headless screenshot
    │
    ▼
   PNG (final deliverable)
```

## 7. File Output Conventions

Save generated infographics to:
```
~/.hermes/output/infographics/<project-name>-<type>-<timestamp>.png
```

Examples:
```
~/.hermes/output/infographics/my-saas-mrr-dashboard-20250716.png
~/.hermes/output/infographics/repo-social-preview.png
~/.hermes/output/infographics/feature-comparison.svg
```

## 8. Anti-Patterns (what NOT to do)

- DON'T use Canva/Figma — no programmatic API, manual exports only
- DON'T use imagemagick for chart generation — QuickChart is better
- DON'T use D3.js from scratch when @antv/infographic has a template
- DON'T use Google Charts — requires browser, not headless-friendly
- DON'T rely on external SaaS that may change pricing — prefer self-hosted options