# Process Infographic
> This skill should be used when the user asks to "create an infographic", "generate a process flow", "make a step-by-step diagram", "design a timeline", "create a workflow diagram", "visualize a pipeline", "make a numbered sequence", "show the steps as an image", "create a lifecycle diagram", "make a flow diagram", or mentions numbered steps, process stages, deployment pipelines, CI/CD flows, or sequential procedures. Do NOT trigger for cover images or system architecture diagrams.
- Skill: `widnyana/process-infographic` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add widnyana/process-infographic`
- Raw SKILL.md: https://api.skillmd.com/api/skills/widnyana/process-infographic/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: DevOps & Infra
- Author: widnyana (https://skillmd.com/u/widnyana)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/widnyana/process-infographic
---
# 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
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 `