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:

  @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 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:

  Phase 1: Setup
  ...
  ...

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 ` 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
• Source: widnyana/eyay-toolkits
• License: MIT

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