skills.rest
icyzh
icyzhCOMMUNITY
Explore all skills by this author →
Website𝕏@icyzhbeGitHub

architecture-diagram

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

1|Updated Jul 31, 2026
Search Tags:#architecture#html#visualization#infrastructure#svg#diagrams
One-click install
npx skills add https://github.com/icyzh/hermes-web --skill architecture-diagram-icyzh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/icyzh/hermes-web/tree/main/skills/creative/architecture-diagram
Command: npx skills add https://github.com/icyzh/hermes-web --skill architecture-diagram-icyzh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This skill solves the challenge of creating professional, consistent, and visually appealing technical architecture diagrams without relying on complex external design software or paid subscriptions.

Core Features & Use Cases

  • Automated SVG Generation: Creates clean, dark-themed infrastructure diagrams as standalone HTML files.
  • Standardized Design System: Uses a predefined color palette and grid system to ensure professional consistency across all diagrams.
  • Use Case: Quickly visualize a cloud infrastructure setup, including VPCs, subnets, and service-mesh topologies, for documentation or team presentations.

Quick Start

Use the architecture-diagram skill to generate a new diagram for my current microservices system and save it as system-arch.html.

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 SVG architecture diagram for cloud infrastructure?▼

You can generate a dark-themed SVG architecture diagram for cloud infrastructure by creating standalone HTML files with inline SVG graphics. This skill outputs self-contained files viewable in browsers without external rendering libraries or API keys.

Can I visualize software systems and service topologies without external rendering libraries?▼

Yes, you can visualize software systems and service topologies without external rendering libraries. This skill outputs standalone HTML files with inline SVG graphics that render directly in any standard web browser.

What is the best way to create professional technical architecture diagrams for documentation?▼

The best way to create professional technical architecture diagrams for documentation is using a standardized design system with a predefined color palette. This generates standalone HTML files ensuring visual consistency across all infrastructure diagrams.

Do I need API keys to generate infrastructure diagrams as HTML files?▼

No, you do not need API keys to generate infrastructure diagrams as HTML files. This skill produces self-contained files with inline SVG graphics, requiring no external API keys or paid subscriptions to create professional diagrams.

How do I visualize VPCs, subnets, and service-mesh topologies for team presentations?▼

To visualize VPCs, subnets, and service-mesh topologies for team presentations, generate standalone HTML files with inline SVG graphics. These self-contained files use a standardized dark-themed design system for immediate browser-based viewing.

Related Skills

Explore More Design & Creative Skills→
Weihong-LiuWeihong-Liu
6

architecture-diagram

Generate SVG architecture diagrams in HTML from system components and relationships.

Community
Advanced
zangjeicyzangjeicy

architecture-diagram

Generate standalone HTML files with inline SVG architecture diagrams.

Community
Intermediate
anxiety135790anxiety135790

architecture-diagram

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

Community
Intermediate
heysuhasheysuhas
2

architecture-diagram

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

Community
Intermediate