skills.rest
eddielueng
eddieluengCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

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

1|Updated Apr 14, 2026
Search Tags:#html#microservices#cloud infrastructure#svg#technical visualization#architecture diagram#security groups
One-click install
npx skills add https://github.com/eddielueng/hermes-agent-zh --skill architecture-diagram-eddielueng
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/eddielueng/hermes-agent-zh/tree/main/skills/creative/architecture-diagram
Command: npx skills add https://github.com/eddielueng/hermes-agent-zh --skill architecture-diagram-eddielueng

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Architecture diagrams turn complex system topology into a clear visual map, but creating consistent, professional SVG diagrams by hand is slow and error-prone.

Core Features & Use Cases

  • Generates dark-themed SVG architecture diagrams as standalone HTML files you can open anywhere, offline.
  • Uses semantic component coloring so readers instantly recognize frontend, backend, databases, cloud/AWS, security, and message bus elements.
  • Supports common tech-infra visuals, including microservice maps, VPC/region boundaries, service layers, and security-group flows for deck-ready documentation.

Quick Start

Create an architecture diagram by describing your components, connections, and technologies, and ask the agent to save the result as a standalone HTML file.

Frequently Asked Questions about architecture-diagram

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

FAQPage Schema
How do I generate a system architecture diagram for microservices and cloud infrastructure?▼

Generate system architecture diagrams by describing your microservices, cloud infrastructure components, and connections. The tool produces standalone, dark-themed HTML files with inline SVG graphics that clearly map your software topology without external rendering libraries.

Can I create VPC and security group boundary diagrams as standalone HTML files?▼

Yes, you can create VPC, region, and security group boundary diagrams packaged as standalone HTML files. These inline-styled SVG visualizations open offline anywhere and use a semantic color system to distinguish cloud boundaries and security flows.

What is the best way to document API and database layer relationships for technical visualization?▼

The best way to document API and database layer relationships is generating semantic, dark-themed SVG diagrams. This approach uses specific component coloring to instantly communicate database and API layer interactions within your system architecture.

Do I need external rendering libraries to view SVG architecture diagrams?▼

No, you do not need external rendering libraries to view these SVG architecture diagrams. The tool produces dependency-free, standalone HTML files with inline styles, ensuring your architecture diagrams render directly in any web browser.

How does semantic component coloring work in cloud infrastructure diagrams?▼

Semantic component coloring in cloud infrastructure diagrams assigns specific colors to frontend, backend, database, cloud, and message bus elements. This visual system ensures readers instantly recognize component roles and service layers within the architecture.

What are the limitations of generating dark-themed SVG architecture diagrams?▼

The limitation of generating dark-themed SVG architecture diagrams is the fixed dark visual style and basic layout rules. It is specifically designed for communicating topology and lacks advanced interactive rendering or external styling dependencies.

Related Skills

Explore More Design & Creative Skills→
xiaoquqixiaoquqi

architecture-diagram

Generate standalone HTML/SVG architecture diagrams from component descriptions.

Community
Intermediate
zangjeicyzangjeicy

architecture-diagram

Generate standalone HTML files with inline SVG architecture diagrams.

Community
Intermediate
anxiety135790anxiety135790

architecture-diagram

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

Community
Intermediate
heysuhasheysuhas
2

architecture-diagram

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

Community
Intermediate