architecture-diagram

Name: architecture-diagram
Availability: InStock
Author: rnben

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

1|Updated Apr 18, 2026

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

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate dark-themed architectural diagrams as standalone HTML files with inline SVG graphics. No external tools, no API keys, no rendering libraries — just write the HTML file and open it in a browser.

Core Features & Use Cases

Standalone HTML diagrams with inline SVG and grid background.
JetBrains Mono font, semantic color mapping, offline rendering, no dependencies.
Use cases include software architecture, cloud topology, microservice maps, and security diagramming for tech decks.

Quick Start

Describe your system architecture and run the skill to generate a standalone HTML diagram 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 an architecture diagram as an offline HTML file?▼

You can generate an architecture diagram as an offline HTML file by describing your software architecture to the skill, which outputs a standalone HTML file with inline SVG graphics that opens directly in any browser.

Can I create a cloud topology diagram without using external rendering libraries?▼

Yes, you can create a cloud topology diagram without external rendering libraries because the skill generates standalone HTML files with inline SVG graphics and a grid background, requiring absolutely no dependencies or API keys.

What is the best way to build a dark-themed microservice map for presentations?▼

The best way to build a dark-themed microservice map for presentations is to use this skill, which applies a consistent design system with semantic color mapping and JetBrains Mono font tailored for tech decks.

Does generating an SVG infrastructure diagram require any API keys or internet access?▼

Generating an SVG infrastructure diagram requires no API keys or internet access because the skill performs offline rendering, producing standalone HTML files with inline SVG graphics directly from your system description.

How do I visualize software architecture for security diagramming in a browser?▼

To visualize software architecture for security diagramming in a browser, provide your system description to the skill, which generates a standalone HTML file with inline SVG that can be viewed offline without external tools.

What are the limitations of using standalone HTML files for architectural diagrams?▼

A limitation of using standalone HTML files for architectural diagrams is that the SVG graphics are static and generated from text descriptions, meaning they lack interactive elements or real-time data syncing found in live monitoring tools.