# Process Infographic

> |

- **Type:** Skill
- **Install:** `agentstack add skill-widnyana-eyay-toolkits-process-infographic`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [widnyana](https://agentstack.voostack.com/s/widnyana)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [widnyana](https://github.com/widnyana)
- **Source:** https://github.com/widnyana/eyay-toolkits/tree/main/plugins/visual-gen/skills/process-infographic

## Install

```sh
agentstack add skill-widnyana-eyay-toolkits-process-infographic
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Process Infographic Generator

Generate step-by-step process infographics as PNG by writing HTML+CSS and
rendering through Chrome headless. Each infographic is a self-contained HTML
file with numbered steps, titles, and descriptions arranged in a vertical
timeline, horizontal phases, or grid layout.

The output is a static PNG suitable for blog posts, documentation, and
presentations. No external images, no JavaScript, no server-side rendering.

## Overview

Process infographics turn multi-step procedures into scannable visual flows.
Use this skill when the content has a clear sequence: deployment pipelines,
onboarding steps, request lifecycles, data transformation stages, or any
numbered process.

**What this skill produces:**
- A PNG image at 1200x630 to 1200x1500px (height scales with step count)
- Numbered steps with titles and one-line descriptions
- Connected by a timeline thread or grouped into phases
- Light or dark theme matching the content tone

**When to use this skill:**
- Blog posts explain a multi-step process
- Documentation needs a visual procedure flow
- A series of steps needs to be presented as a single image
- A deployment pipeline, CI/CD flow, or lifecycle diagram is needed

## Detailed Workflow

### Step 1: Identify the Steps

Extract process steps from the source content. Each step needs:
- A short title (2-5 words)
- A one-line description (under 15 words)
- An optional phase or group label

If the source content has headings or numbered items, use those directly.
If the content is prose, distill it into discrete stages.

### Step 2: Select Dimensions

Choose canvas height based on step count:

| Steps | Width | Height | Layout |
|-------|-------|--------|--------|
| 3-4 | 1200 | 630 | Grid (2x2) or vertical |
| 5-6 | 1200 | 900 | Vertical timeline |
| 7-9 | 1200 | 1200 | Vertical with phases |
| 10+ | 1200 | 1500 | Vertical with phases, compact type |

General formula: `height = 630 + (steps_above_4 * 135)`, capped at 1500.

### Step 3: Choose Layout Pattern

**Vertical timeline** (default): Steps flow top-to-bottom with a left-aligned
connecting line and numbered markers. Best for sequential processes.

**Horizontal phases**: Steps grouped into 3-5 horizontal columns. Each column
is a phase with sub-steps. Best for parallel or categorized stages.

**Grid**: Equal-sized cards in 2 or 3 columns. Best for 4-8 steps with short
descriptions where sequence matters less than completeness.

See `references/infographic-patterns.md` for complete CSS patterns.

### Step 4: Write the HTML+CSS

Create a self-contained HTML file. Start from this boilerplate and adapt:

```html

  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    width: 1200px;
    height: 900px;
    overflow: hidden;
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    background: #ffffff;
    color: #1a1a2e;
  }
  .container { padding: 48px 80px; }
  .title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
  .subtitle { font-size: 13px; color: #666; margin-bottom: 32px; }
  .timeline {
    position: relative;
    margin-left: 18px;
    padding-left: 32px;
    border-left: 2px solid #d1d5db;
  }
  .step {
    position: relative;
    margin-bottom: 32px;
  }
  .step-marker {
    position: absolute;
    left: -49px;
    top: 4px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #2d8659;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
  }
  .step-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
  .step-desc { font-size: 12px; color: #555; line-height: 1.5; }

  
    Process Title
    Brief description of the flow
    
      
        1
        Step Title
        One-line description of what happens.
      
    
  

```

Key constraints:
- Set exact pixel dimensions on `body` (`width` + `height` + `overflow: hidden`)
- Use Google Fonts loaded via `@import`
- No external images, no JavaScript
- All styles inlined in `` tag

### Step 5: Write to Temp File

Save the HTML to `tmp/` in the current project directory. Use a descriptive
filename: `tmp/deployment-pipeline.html`, `tmp/auth-flow.html`, etc.

### Step 6: Capture the Screenshot

Run the screenshot script with the correct dimensions:

```bash
bash scripts/screenshot.sh tmp/infographic.html output/path/infographic.png 1200 900
```

Pass the height as the 4th argument when using a taller canvas:
```bash
bash scripts/screenshot.sh tmp/infographic.html static/images/flow.png 1200 1200
```

### Step 7: Verify the Output

Read the generated PNG file to check:
- All steps are visible and not clipped
- Text is readable at the rendered size
- Step numbers are correctly ordered
- No overflow or scrollbar artifacts
- Spacing between steps is consistent

### Step 8: Clean Up

Remove the temp HTML file after confirming the PNG is correct.

## Theme Variations

### Light Theme (Default)

White background, dark text, green step markers:
- Background: `#ffffff`
- Primary text: `#1a1a2e`
- Secondary text: `#555555`
- Step markers: `#2d8659` (green)
- Timeline line: `#d1d5db`

### Dark Theme

Dark slate background, light text, cyan accents:
- Background: `#0f172a`
- Primary text: `#f1f5f9`
- Secondary text: `#94a3b8`
- Step markers: `#06b6d4` (cyan)
- Timeline line: `#334155`

Match the theme to the content tone. Technical infrastructure and devops
topics suit dark themes. General tutorials and user-facing processes suit
light themes.

## Phase Grouping

For multi-stage processes, wrap steps under labeled phase headers:

```html

  Phase 1: Setup
  ...
  ...

```

Phase headers use green underline and uppercase text:
```css
.phase-group-label {
  font-size: 11px;
  font-weight: 700;
  color: #2d8659;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
  padding-bottom: 6px;
  border-bottom: 2px solid #2d8659;
  display: inline-block;
}
```

## Troubleshooting

| Problem | Likely Cause | Fix |
|---------|-------------|-----|
| Steps clipped at bottom | Canvas height too small | Increase `body` height or reduce step count |
| Text too small to read | Font size under 11px | Raise minimum font size to 12px |
| Step markers misaligned | `position: absolute` offset wrong | Adjust `left` on `.step-marker` (should be `-49px` with timeline padding) |
| Chrome not found | No browser in PATH | Install `google-chrome` or `chromium` |
| Blank white PNG | `@import` font failed, blocking render | Move `@import` to first line of `` block |
| Scrollbar visible | Content overflows canvas | Increase height or reduce padding |
| Timeline line missing | `border-left` color too light | Use `#d1d5db` or darker |

## Quick Reference

| Item | Value |
|------|-------|
| Canvas width | 1200px (fixed) |
| Canvas height | 630/900/1200/1500px (step-dependent) |
| Font | Inter, 400/700 |
| Step marker | 36px circle, `#2d8659` fill |
| Step title | 16px bold |
| Step desc | 12px regular, `#555` |
| Output format | PNG via Chrome headless |

## Additional Resources

### Reference Files

- **`references/infographic-patterns.md`** - Complete CSS patterns for vertical timeline, horizontal phases, grid layout, phase grouping, dark theme, and typography scale

### Scripts

- **`scripts/screenshot.sh`** - Chrome headless capture utility with custom dimensions support

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [widnyana](https://github.com/widnyana)
- **Source:** [widnyana/eyay-toolkits](https://github.com/widnyana/eyay-toolkits)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-widnyana-eyay-toolkits-process-infographic
- Seller: https://agentstack.voostack.com/s/widnyana
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.