architecture-diagram

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

Updated Jun 25, 2026

Search Tags:#architecture #html #visualization #cloud #infrastructure #svg #diagrams

Ready to run

npx skills add https://github.com/Rheasilvia/hermes-desktop --skill architecture-diagram-rheasilvia

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/Rheasilvia/hermes-desktop/tree/main/skills/creative/architecture-diagram
Command: npx skills add https://github.com/Rheasilvia/hermes-desktop --skill architecture-diagram-rheasilvia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This skill eliminates the need for complex design software or external rendering tools by generating professional, dark-themed technical architecture diagrams directly as standalone HTML files.

Core Features & Use Cases

Automated Visualization: Creates structured SVG-based diagrams for cloud infrastructure, microservices, and database topologies.
Design System Consistency: Enforces a unified aesthetic with semantic color mapping for frontend, backend, database, and security components.
Use Case: Quickly document a new microservice deployment by generating a visual map that includes region boundaries, security groups, and service connections without leaving your IDE.

Quick Start

Generate a new architecture diagram for the current system by describing the components and their connections to the skill.

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

To generate an architecture diagram as an HTML file, you describe your cloud infrastructure or microservice components and connections to the skill, which then outputs a standalone HTML document with inline SVG graphics.

What is the best way to visualize cloud infrastructure without external rendering libraries?▼

Visualizing cloud infrastructure without external rendering libraries is achieved by using a semantic design system that creates self-contained HTML files with inline SVG graphics, requiring no external API keys or dependencies.

Can I map microservice topologies and database schemas using SVG?▼

You can map microservice topologies and database schemas using SVG because the skill generates structured inline SVG graphics within a dark-themed HTML file based on your component descriptions.

Do I need any API keys or external dependencies to create technical diagrams?▼

You do not need API keys or external dependencies to create technical diagrams, as the skill produces high-fidelity visual documentation entirely through self-contained HTML and inline SVG generation.

Does this approach support semantic color mapping for frontend and backend components?▼

This approach supports semantic color mapping for frontend, backend, database, and security components, enforcing a unified dark-themed aesthetic across the generated technical architecture diagrams.