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

Ready to run

npx skills add https://github.com/Chris-Chai-Minjae/hermes-agent-r1-bridge --skill architecture-diagram-chris-chai-minjae

💬 Prompt for ChatGPT / Claude Chat▼

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.