skills.rest
anxiety135790
anxiety135790COMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill turns architecture ideas into clean, presentation-ready dark-themed SVG diagrams without requiring diagramming tools, rendering libraries, or internet-dependent workflows.

Core Features & Use Cases

  • Architecture Visualization: Represent frontend, backend, database, cloud, security, and external systems in a consistent visual language.
  • Infrastructure Diagrams: Map AWS regions, security groups, service boundaries, and service-to-service connections for technical planning or documentation.
  • Standalone HTML Output: Generate a single offline HTML file with inline SVG, styling, and example structure that can be opened directly in any browser.
  • Use Case: Describe a web app stack with users, load balancer, API servers, databases, and cloud boundaries, and get a professional diagram ready for sharing with engineers or stakeholders.

Quick Start

Describe your system architecture and ask for a standalone HTML architecture diagram in the dark SVG style.

Frequently Asked Questions about architecture-diagram

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

FAQPage Schema
How do I create an SVG architecture diagram as a standalone HTML file?▼

You can generate a standalone dark-themed HTML file with inline SVG, dark grid styling, labeled component types, and boundary regions that opens directly in any browser offline without external rendering libraries.

Can I visualize cloud infrastructure and microservice topology without internet access?▼

Yes, you can visualize cloud infrastructure and microservice topology using offline browser-compatible HTML files containing inline SVG diagrams with security flows and service boundaries.

What is the best way to document software architecture using SVG diagrams?▼

The best way to document software architecture using SVG diagrams is generating standalone HTML files with a consistent visual language for frontend, backend, database, cloud, security, and external systems.

Do I need external diagramming tools or rendering libraries to generate infrastructure diagrams?▼

No, you do not need external diagramming tools or rendering libraries to generate infrastructure diagrams because the output is a single offline HTML file with inline SVG and styling that renders natively in browsers.

Does the generated architecture diagram support AWS regions and security groups visualization?▼

Yes, the generated architecture diagram supports AWS regions and security groups visualization by mapping service boundaries, security groups, and service-to-service connections within the inline SVG infrastructure diagram.

What are the limitations of using inline SVG for deployment documentation?▼

Limitations of using inline SVG for deployment documentation include being restricted to dark-themed grid styling and requiring a browser to view the standalone HTML file, though it remains fully offline-compatible without external dependencies.

Related Skills

Explore More Design & Creative Skills→
liumeixinliumeixin
4

architecture-diagram

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

Community
Intermediate
PedroGiudicePedroGiudice
5

technical-doc-creator

Generate HTML technical documentation with syntax-highlighted code and SVG architecture diagrams.

Community
Intermediate
WSJ40WSJ40

hara-stage0

Extract HARA function mappings from 功能清单 tables into structured JSON.

Community
Intermediate
SriRamkunamsettySriRamkunamsetty

architecture-diagram

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

Community
Advanced