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

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:

![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:

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

npm install @antv/infographic

Template Categories (~200 total)

Syntax (AI-Friendly DSL)

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)

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

# 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

# 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

#!/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)

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