skills.rest
rickyananda
rickyanandaCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

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

1|Updated May 18, 2026
Search Tags:#architecture#html#visualization#cloud#infrastructure#svg#diagrams
One-click install
npx skills add https://github.com/rickyananda/hermes-skills --skill architecture-diagram-rickyananda
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
rloisellrloisell
7

diagram-generation

Generate and export architectural diagrams in draw.io, PlantUML, and Mermaid formats.

Community
Advanced
JuanMS20JuanMS20

architecture-diagram

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

Community
Intermediate
Arupbiswas09Arupbiswas09

architecture-diagram

Generate dark-themed HTML and SVG architecture diagrams from text descriptions.

Community
Advanced
KrystianYCSilvaKrystianYCSilva

mermaid-expert

Generate and validate Mermaid.js diagrams from text for Markdown files.

Community
Intermediate