skills.rest
superfhp
superfhpCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

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

Updated May 13, 2026
Search Tags:#html#visualization#cloud infrastructure#svg#generate#dark theme#architecture diagram
One-click install
npx skills add https://github.com/superfhp/lumi-agent-body --skill architecture-diagram-superfhp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/superfhp/lumi-agent-body/tree/main/skills/creative/architecture-diagram
Command: npx skills add https://github.com/superfhp/lumi-agent-body --skill architecture-diagram-superfhp

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 generates polished, dark-themed architecture and cloud infrastructure diagrams as single self-contained HTML files with inline SVG, requiring no external tools, API keys, or dependencies. ## Core Features & Use Cases - Semantic Color System: Predefined fill and stroke palettes categorize components by type (frontend, backend, database, cloud, security, message bus, external) for instantly readable diagrams. - Complete Design System: Includes typography rules, grid backgrounds, arrow styles, security group boundaries, region boundaries, and legend placement logic, plus a full HTML template with working examples of every component. - Use Case: Describe your system (e.g., a React frontend, FastAPI backend, PostgreSQL database, and AWS S3/CloudFront behind a load balancer) and receive a single .html file you can open in any browser, share with teammates, or attach to documentation. ## Quick Start Ask the assistant to generate an architecture diagram of your system describing its components, connections, and technologies, then open the saved HTML file in a browser.

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 architecture diagram as HTML?▼

The Skill writes a single .html file containing inline SVG following a defined design system with semantic colors for frontend, backend, database, and cloud components. Save it to your working directory and open it with a browser command like open or xdg-open.

What types of diagrams work best with this HTML SVG approach?▼

It suits software architecture layers, cloud infrastructure with VPCs and regions, microservice topology, and database/API maps. It is not intended for scientific subjects, floor plans, hand-drawn whiteboard sketches, or animated explainers.

Does the generated diagram require internet access or dependencies?▼

The HTML file works offline with all CSS and SVG inline and no JavaScript. The only external reference is the JetBrains Mono font from Google Fonts, which degrades gracefully to a system monospace font offline.

When should I use excalidraw instead of an SVG architecture diagram?▼

Use a hand-drawn style tool like excalidraw when you want informal whiteboard sketches or collaborative brainstorming visuals. This Skill targets polished, dark tech-aesthetic diagrams for documentation and presentations of tech infrastructure.

Related Skills

Explore More Design & Creative Skills→
shiftreposhiftrepo

architecture-diagram

Generate dark-themed SVG architecture diagrams as standalone HTML files with inline SVG.

Official
Advanced
CuriousLearnerCuriousLearner
27

architecture-documenter

Document system architecture and technical decisions with diagrams and ADRs.

Community
Advanced
anishi1222anishi1222

azure-resource-visualizer

Analyze Azure resource groups and generate Mermaid topology diagrams.

Community
Advanced
qprjack86qprjack86

excalidraw

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

Community
Intermediate