architecture-diagram

Name: architecture-diagram
Availability: InStock
Author: liumeixin

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

4|Updated May 14, 2026

Search Tags:#html #software architecture #infrastructure #svg #diagram

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill generates dark-themed SVG diagrams of software systems and cloud infrastructure, providing a professional and visually appealing representation.

Core Features & Use Cases

Dark Theme: Creates diagrams with a dark aesthetic, ideal for presentations and documentation.
SVG Format: Outputs diagrams as standalone HTML files with inline SVG graphics, compatible with any modern web browser.
Semantic Colors: Utilizes specific colors for different components (e.g., frontend, backend, database, cloud), making it easy to distinguish different parts of the system.
Use Case: Ideal for documenting software architecture, cloud/VPC topology, microservice maps, and other technical infrastructure.

Quick Start

Generate an architecture diagram for your project by providing a description of your system components and connections.

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 software architecture diagram as an SVG?▼

To generate a dark-themed software architecture diagram as an SVG, provide a description of your system components and connections. The tool outputs standalone HTML files with inline SVG graphics using semantic colors and JetBrains Mono font.

Can I create cloud infrastructure and VPC topology diagrams automatically?▼

Yes, you can create cloud infrastructure and VPC topology diagrams automatically by describing your network layout. It generates visual maps with specific semantic colors for cloud components to distinguish different parts of the infrastructure.

What is the best way to document microservice maps for presentations?▼

The best way to document microservice maps for presentations is generating dark-themed SVG diagrams. This approach provides a professional aesthetic suitable for slides and outputs standalone HTML files viewable in modern web browsers.

Does the SVG diagram generator support custom colors for frontend and backend components?▼

Yes, the SVG diagram generator supports custom colors for frontend and backend components through semantic coloring. It utilizes specific colors for different system parts like databases and cloud services, making components easy to distinguish.

How do I output SVG graphics for software systems without external dependencies?▼

You can output SVG graphics for software systems without external dependencies by generating standalone HTML files. The diagrams use inline SVG graphics, meaning they are fully compatible with any modern web browser without requiring additional libraries.

What file format do I get when generating cloud infrastructure diagrams?▼

When generating cloud infrastructure diagrams, you get standalone HTML files containing inline SVG graphics. These files are self-contained and can be opened directly in any modern web browser for immediate viewing and sharing.