| name | process-infographic |
| description | 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.
|
| version | 0.1.0 |
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@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; }
</style>
</head>
<body>
<div class="container">
<div class="title">Process Title</div>
<div class="subtitle">Brief description of the flow</div>
<div class="timeline">
<div class="step">
<div class="step-marker">1</div>
<div class="step-title">Step Title</div>
<div class="step-desc">One-line description of what happens.</div>
</div>
</div>
</div>
</body>
</html>
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
<style> 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 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 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:
<div class="phase-group">
<div class="phase-group-label">Phase 1: Setup</div>
<div class="step">...</div>
<div class="step">...</div>
</div>
Phase headers use green underline and uppercase text:
.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 <style> 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
