architecture-diagram

Name: architecture-diagram
Availability: InStock
Author: rickyananda

Generate standalone dark-themed HTML architecture diagrams from system descriptions.

1|Updated May 18, 2026

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

Ready to run

npx skills add https://github.com/rickyananda/hermes-skills --skill architecture-diagram-rickyananda

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creates polished dark-themed technical architecture diagrams as standalone HTML files, so users can turn system descriptions into clear visual documentation without external tools or rendering dependencies.

Core Features & Use Cases

Standalone HTML Output: Generates a single offline-ready HTML file with inline SVG and CSS.
Architecture-Focused Visual Style: Uses a consistent dark grid aesthetic, color-coded component types, boundaries, and labeled arrows.
Best For: Software systems, cloud infrastructure, microservices, security flows, and deployment diagrams.
Use Case: A platform team can describe frontend, API, database, and cloud services and get a shareable diagram that opens in any browser.

Quick Start

Ask the skill to create a dark-themed HTML architecture diagram for your system description and save it to a specified file path.

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 HTML architecture diagram from a system description?▼

To generate an HTML architecture diagram, provide your system description and component relationships to the skill, which outputs a standalone dark-themed single-file HTML with inline SVG and CSS.

Do I need external tools or rendering dependencies to view the generated architecture diagrams?▼

No, you do not need external tools or rendering dependencies. The skill produces a standalone offline-compatible HTML file with inline SVG that opens directly in any standard browser.

What is the best way to document microservice topologies as shareable visual files?▼

The best way to document microservice topologies is generating a single-file HTML diagram with a dark grid aesthetic, boundary containers, and labeled arrows that can be shared and opened offline.

Can I use this to create cloud infrastructure visualization with security boundaries?▼

Yes, you can create cloud infrastructure visualizations with security boundaries. The skill applies a dark grid visual system and boundary containers to map security flows and deployment maps.

What visual style does the generated HTML diagram use for software architecture documentation?▼

The generated HTML diagram uses a dark grid aesthetic with color-coded component types, boundary containers, and labeled arrows to represent software architecture and deployment maps.