skills.rest
widnyana
widnyanaCOMMUNITY
Explore all skills by this author →
Website𝕏@widnyana_GitHub

process-infographic

Generate step-by-step process infographic PNGs from HTML+CSS via Chrome headless.

4|Updated Feb 13, 2026
Search Tags:#timeline#png generation#html css#ci/cd pipeline#workflow diagram#process infographic
One-click install
npx skills add https://github.com/widnyana/eyay-toolkits --skill process-infographic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: process-infographic
Source: https://github.com/widnyana/eyay-toolkits/tree/main/plugins/visual-gen/skills/process-infographic
Command: npx skills add https://github.com/widnyana/eyay-toolkits --skill process-infographic

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Creates clear, shareable process diagrams from step-by-step content so you do not have to manually design infographics.

Core Features & Use Cases

  • Generates PNG infographics from HTML+CSS: Produces static images via Chrome headless rendering, with no JavaScript and no server-side dependencies.
  • Supports multiple process layouts: Vertical timelines (default), horizontal phase groupings, and grid layouts for shorter sequences.
  • Adapts canvas size to step count: Chooses appropriate dimensions to keep steps readable and avoid clipping.
  • Handles themes: Light and dark color palettes aligned to devops/technical vs general documentation tones.

Quick Start

Ask: "Create a process infographic for my CI/CD pipeline with 7 steps, using a vertical timeline, and output it as a 1200px-wide PNG."

Frequently Asked Questions about process-infographic

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a process infographic PNG from step-by-step documentation?▼

You can generate a process infographic PNG by providing sequential steps which the Skill converts into self-contained HTML+CSS and renders via Chrome headless, outputting a static image without requiring JavaScript or server-side dependencies.

What is the best way to visualize a CI/CD pipeline as a timeline diagram?▼

Visualizing a CI/CD pipeline as a timeline diagram is best achieved by applying a vertical timeline layout with numbered step markers and optional phase grouping, rendered as a static PNG.

Can I create a workflow diagram without JavaScript or server-side dependencies?▼

Yes, you can create a workflow diagram without JavaScript or server-side dependencies because this Skill renders static PNGs purely from self-contained HTML+CSS via Chrome headless.

Does this process infographic generator support horizontal and grid layouts?▼

Yes, the process infographic generator supports vertical timelines by default, plus horizontal phase groupings and grid layouts for shorter sequences to prevent clipping.

How do I adapt canvas dimensions to avoid clipping when generating a PNG workflow diagram?▼

You avoid clipping in a PNG workflow diagram by letting the Skill adapt canvas dimensions to your step count, applying fixed dimensions with overflow hidden to keep all steps readable.

What are the limitations of using HTML and CSS to generate static workflow diagrams?▼

Limitations of using HTML and CSS for static workflow diagrams include fixed canvas dimensions with overflow hidden, meaning output is a static PNG with no interactivity and potential clipping if content exceeds bounds.

Related Skills

Explore More Design & Creative Skills→
MCERQUAMCERQUA
1

hyperframes

Convert HTML compositions into frame-accurate video files using headless Chrome and FFmpeg.

Community
Intermediate
alex-voloshin-devalex-voloshin-dev
2

architecture-analyze

Analyze software systems to generate architectural documentation and technical debt registers.

Community
Advanced
makerjackiemakerjackie
1

baoyu-markdown-to-html

Convert Markdown documents into styled HTML with YAML frontmatter metadata.

Community
Intermediate
RepairYourTechRepairYourTech
6

react-flow

Create interactive node-based graph visualizations with React Flow.

Community
Intermediate