skills.rest
rnben
rnbenCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

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
One-click install
npx skills add https://github.com/rnben/hermes-skills --skill architecture-diagram-rnben
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
PiaoxuemoliPiaoxuemoli

architecture-diagram

Generate dark-themed HTML architecture diagrams with inline SVG.

Community
Intermediate
hungthinh04hungthinh04

architecture-diagram

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

Community
Intermediate
rickyanandarickyananda
1

architecture-diagram

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

Community
Intermediate
npownpow
4

diagram

Render complex relationships and workflows as interactive Cytoscape.js browser diagrams.

Community
Intermediate