skills.rest
TylerSimons1127
TylerSimons1127COMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

Generates dark-themed SVG architecture and cloud infrastructure diagrams as standalone HTML files.

Updated Aug 21, 2026
Search Tags:#html#visualization#SVG#cloud infrastructure#generate#architecture diagram#technical diagram
One-click install
npx skills add https://github.com/TylerSimons1127/vibe --skill architecture-diagram-tylersimons1127
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/TylerSimons1127/vibe/tree/main/skills/creative/architecture-diagram
Command: npx skills add https://github.com/TylerSimons1127/vibe --skill architecture-diagram-tylersimons1127

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating professional-looking technical architecture diagrams usually requires dedicated diagramming tools, accounts, or rendering libraries. This Skill produces polished, dark-themed system and cloud infrastructure diagrams as a single self-contained HTML file with inline SVG, requiring no external tools, API keys, or JavaScript. ## Core Features & Use Cases - Semantic Color System: Components are color-coded by type (frontend, backend, database, cloud, security, message bus, external) using a defined rgba/hex palette for instant visual categorization. - Complete Design System: Includes typography rules, grid backgrounds, arrow styles, security group and region boundaries, legend placement logic, and a reusable HTML template with working examples of every component type. - Use Case: Describe your microservices deployment (React frontend, FastAPI backend, PostgreSQL, AWS CloudFront and S3) and receive a single .html file you can open in any browser, share with teammates, or embed in documentation. ## Quick Start Ask the agent to generate an architecture diagram of your system, describing the components, connections, and technologies you want visualized.

Frequently Asked Questions about architecture-diagram

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

FAQPage Schema
How do I create a cloud architecture diagram without diagramming tools?▼

Describe your system components, connections, and technologies, and the Skill generates a standalone HTML file with inline SVG. Open the file in any browser to view the diagram; no accounts, libraries, or rendering tools are needed.

How to generate an SVG infrastructure diagram as HTML?▼

The Skill writes a single .html file containing inline SVG with a semantic color palette for frontend, backend, database, cloud, and security components. A template file provides working examples of every component type, arrow style, and boundary pattern.

Does the generated architecture diagram work offline?▼

Yes, the output is a single self-contained HTML file with all CSS and SVG inline and no JavaScript. The only external reference is the JetBrains Mono font from Google Fonts, and the diagram still renders without it.

When should I use a different diagram skill instead?▼

This Skill targets tech infrastructure subjects with a dark, grid-backed aesthetic. For hand-drawn whiteboard sketches use excalidraw, and for scientific subjects, floor plans, or animated explainers, a more specialized skill is recommended.

Can I customize the colors and layout of the diagram?▼

Yes, the design system documents the exact rgba fills and hex strokes per component type, plus spacing, typography, and legend placement rules. You can adjust any value directly in the generated HTML or request changes when describing the diagram.

Related Skills

Explore More Design & Creative Skills→
codatacodata
8

architect

Create Mermaid.js system architecture diagrams from descriptive texts.

Official
Advanced
CuriousLearnerCuriousLearner
27

architecture-documenter

Document system architecture and technical decisions with diagrams and ADRs.

Community
Advanced
qprjack86qprjack86

excalidraw

Create hand-drawn whiteboard diagrams and wireframes as editable Excalidraw JSON.

Community
Intermediate
mapboxmapbox
72

mapbox-style-patterns

Provide Mapbox style patterns and layer configurations for Web, iOS, and Android projects.

Official
Basic