tomevault-io 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
:rootto match specific cloud providers (e.g., Azure Blue, AWS Orange, GCP Green). - Generate Image:
- Save the populated HTML.
- Run headless Chrome to capture the screenshot:
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --disable-gpu --screenshot=output.png --window-size=1200,1600 file://$(pwd)/temp.html
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.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.