skills.rest
Chris-Chai-Minjae
Chris-Chai-MinjaeCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

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

Updated Apr 23, 2026
Search Tags:#architecture#html#visualization#cloud#infrastructure#svg#diagram
One-click install
npx skills add https://github.com/Chris-Chai-Minjae/hermes-agent-r1-bridge --skill architecture-diagram-chris-chai-minjae
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/Chris-Chai-Minjae/hermes-agent-r1-bridge/tree/main/skills/creative/architecture-diagram
Command: npx skills add https://github.com/Chris-Chai-Minjae/hermes-agent-r1-bridge --skill architecture-diagram-chris-chai-minjae

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generating architecture diagrams is often time-consuming when done manually or with brittle tooling. This skill provides a simple, repeatable way to produce consistent, dark-themed SVG diagrams as standalone HTML files.

Core Features & Use Cases

  • Standalone HTML output with inline SVG and JetBrains Mono font.
  • Semantic color system for frontend, backend, database, cloud, security, and message buses.
  • Suitable for software architecture, cloud topology, microservice maps, service meshes, and security boundary diagrams.

Quick Start

Describe your system and generate a ready-to-view dark-themed architecture diagram HTML 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 a dark-themed architecture diagram as an HTML file?▼

To generate a dark-themed architecture diagram, provide a text description of your system. This Skill outputs a standalone HTML file with inline SVG, using a predefined semantic color system for cloud topology and microservice maps.

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

Yes, you can create cloud infrastructure topology diagrams without external libraries. The Skill produces self-contained HTML files with inline SVG and JetBrains Mono font, requiring no external dependencies or API keys.

What is the best way to visualize microservice maps and security boundaries?▼

Visualizing microservice maps and security boundaries is best handled by generating semantic SVG diagrams. This approach applies a predefined color system to differentiate frontend, backend, database, cloud, and message bus components in a single HTML file.

Does this architecture diagram generator support service mesh visualization?▼

Yes, service mesh visualization is supported. By processing your system description, the generator creates professional SVG topology maps embedded in HTML, applying distinct semantic colors for security boundaries and message buses.

How to convert a software architecture description into an SVG visualization?▼

To convert a software architecture description into an SVG visualization, input your system's structure. The tool generates a dark-themed standalone HTML file containing the inline SVG diagram, ready for immediate viewing.

Do I need API keys to produce infrastructure diagrams from system descriptions?▼

No, you do not need API keys to produce infrastructure diagrams. The generation process uses a predefined design system to output self-contained HTML files with inline SVG directly from your system description.

Related Skills

Explore More Software Engineering Skills→
Rawgrowth-ConsultingRawgrowth-Consulting

architecture-diagram

Generate standalone HTML SVG architecture diagrams from system components.

Official
Intermediate
EigenwiseEigenwise
20

architecture-diagram

Generate self-contained architecture diagrams as standalone HTML files with inline SVG and CSS.

Community
Intermediate
heximaoheximao

architecture-diagram

Generate dark-themed SVG architecture diagrams as HTML files.

Community
Intermediate
shekerkammashekerkamma

uml

Render UML diagrams from PlantUML text into diagram images.

Community
Advanced