| name | architecture-visualizer |
| description | Architecture visualization tool with pre-defined high-quality templates. Use when a user needs to visualize cloud infrastructure, CI/CD pipelines, or system designs in a clean, professional format (e.g., Apple-style or EKS-CI/CD style). |
Architecture Visualizer
This skill provides a collection of professional HTML/CSS templates for infrastructure and process visualization.
Available Templates
1. EKS CI/CD Style (assets/templates/eks-cicd-template.html)
A structured, phased flow ideal for pipelines and multi-step infrastructure deployments.
- Key Features: Phase labels, vertical connectors, colored detail chips.
- Best For: CI/CD workflows, AWS/EKS deployments, phased roadmaps.
2. GCP Tree Style (assets/templates/gcp-lb-tree-template.html)
A tree-structured layout ideal for GCP infrastructure with nested resource hierarchies.
- Key Features: Monospace tree connectors, color-coded highlight chips (GCP blue/green/yellow/red), two sections (LB + Network).
- Best For: GCP Load Balancer + MIG, VPC network topology, resource hierarchy visualization.
3. Apple Minimalist Style (Workflow)
A clean, premium design with soft shadows and Glassmorphism.
- Key Features: SF-style typography, minimal borders, A->B->C flow.
- Best For: High-level system overviews, pitch decks, user-facing documentation.
How to Use
- Select Template: Choose the template that best fits the user's data.
- Populate Content: Replace placeholders in the HTML with the user's specific infrastructure/process details.
- Customize Colors: Use the CSS variables defined in the
:root to match specific cloud providers (e.g., Azure Blue, AWS Orange, GCP Green).
- Generate Image:
Design Principles
- Clarity: Use connectors to show data flow.
- Consistency: Keep icon sizes and spacing uniform.
- Hierarchy: Use bold headers and muted labels to guide the eye.
