architecture-diagram

Installation
SKILL.md

Architecture Diagram

End-to-end architecture diagram generation. Gathers system information, produces an HTML file, renders it to PNG via Chrome headless, and delivers the final image. The entire export is automated -- the user never needs to open a browser or run a script manually.

Two visual styles: dark theme (default, SVG-based) and light theme (div-based, print-friendly).

Workflow

Step 1: Gather information

Before writing markup, identify from the request (ask clarifying questions if anything is ambiguous):

  • Components: servers, services, databases, queues, external systems
  • Data flow: direction of requests (top-down, left-to-right, mixed)
  • Groupings: which components belong together (VPC, cluster, tier)
  • Boundary types: cloud regions, security groups, Kubernetes namespaces
  • Theme: dark (default) or light (for print/slides/white-background docs)
  • Output path: where to save the final PNG (default: tmp/ in the project directory)
Installs
1
GitHub Stars
3
First Seen
Jun 20, 2026
architecture-diagram — widnyana/eyay-toolkits