skills.rest
huidge
huidgeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

architecture-diagram

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manually creating software and cloud architecture diagrams is time-consuming and error-prone; this skill automates production-grade visuals as standalone HTML with inline SVG for offline viewing.

Core Features & Use Cases

  • Standalone HTML diagrams: single self-contained file with inline SVG and no external dependencies.
  • Semantic color system: cyan for frontend, emerald for backend, violet for database, amber for cloud, rose for security, orange for messaging.
  • Offline-ready and high-contrast dark aesthetic suitable for tech decks and presentations.
  • Use cases include documenting software stacks, cloud topologies, microservice maps, and security boundary visuals.

Quick Start

Describe system architecture and generate the diagram file to view 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 generate an SVG architecture diagram from a text description?▼

You can generate an SVG architecture diagram by providing a textual system description, which produces a standalone HTML file with inline SVG for offline viewing. This automates diagram creation without manual drawing tools.

What is the best way to create offline-ready cloud topology diagrams?▼

The best way to create offline-ready cloud topology diagrams is generating a self-contained HTML file with inline SVG. This requires no external dependencies and uses a high-contrast dark aesthetic suitable for tech presentations.

Can I use this to map microservices with a semantic color system?▼

Yes, you can map microservices using a semantic color system that assigns cyan for frontend, emerald for backend, violet for database, amber for cloud, rose for security, and orange for messaging components.

Does the generated architecture diagram require external libraries or dependencies?▼

No, the generated architecture diagram does not require external libraries. It produces a single self-contained HTML file with inline SVG, a JetBrains Mono font, and a 40px grid background for completely offline viewing.

How do I document software stacks visually without manual drawing?▼

You document software stacks visually by describing the system architecture in text. This generates a production-grade standalone HTML diagram with inline SVG, eliminating manual drawing and reducing errors.

When should I use an automated SVG generator for infrastructure design?▼

You should use an automated SVG generator for infrastructure design when you need reusable visuals for software, cloud, or security boundary scenarios. It is ideal for producing high-contrast, offline-ready diagrams for presentations.

Related Skills

Explore More Software Engineering Skills→
PedroGiudicePedroGiudice
5

technical-doc-creator

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

Community
Intermediate
BermudaLocalsBermudaLocals
1

architecture-diagram

Generate standalone HTML diagrams of software architecture as inline SVG visuals.

Community
Advanced
as4584as4584
2

terraform-module-library

Provide reusable Terraform modules for provisioning AWS, Azure, and GCP infrastructure.

Community
Advanced
shekerkammashekerkamma

uml

Render UML diagrams from PlantUML text into diagram images.

Community
Advanced