skills.rest
Weihong-Liu
Weihong-LiuCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

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

6|Updated Apr 26, 2026
Search Tags:#SVG#network topology#architecture diagram#system documentation#infrastructure visualization
One-click install
npx skills add https://github.com/Weihong-Liu/GenericAgent_project --skill architecture-diagram-weihong-liu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/Weihong-Liu/GenericAgent_project/tree/main/.codex/skills/architecture-diagram
Command: npx skills add https://github.com/Weihong-Liu/GenericAgent_project --skill architecture-diagram-weihong-liu

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the need for creating visually appealing and informative architecture diagrams, making complex system designs more accessible and understandable.

Core Features & Use Cases

  • SVG-Based Diagrams: Produces diagrams with embedded SVG graphics for high-quality, scalable images.
  • Customizable Templates: Offers a customizable design system with a color palette, typography, and visual elements.
  • Use Case: Ideal for documenting system architecture, cloud infrastructure, or network topology in a professional and consistent manner.

Quick Start

Generate an architecture diagram for a system by providing the system components and relationships.

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 for system documentation?▼

To generate an architecture diagram, provide a clear definition of system components and their relationships. The skill outputs an HTML file containing embedded SVG graphics to visually represent the infrastructure for documentation.

What is the best way to visualize cloud infrastructure and network topology?▼

Visualizing cloud infrastructure and network topology is best achieved with SVG-based diagrams. This method generates high-quality, scalable images within HTML files, making complex system designs accessible and understandable for technical documentation.

Do I need a specific design system to create dark-themed infrastructure visualization?▼

You do not need an external design system to create dark-themed infrastructure visualization. The skill provides a customizable design system featuring a predefined color palette, typography, and visual elements for consistent professional diagrams.

Can I customize the SVG graphics in the generated architecture diagrams?▼

You can customize the SVG graphics in the generated architecture diagrams through the skill's built-in design system. It offers a customizable color palette, typography, and visual elements to match your specific system documentation style.

What are the limitations of using SVG graphics for system documentation?▼

A limitation of using SVG graphics for system documentation is the requirement for a clear definition of system components and their relationships beforehand. Without clear inputs, the generated infrastructure visualization may lack structural accuracy.

Related Skills

Explore More Software Engineering Skills→
cndoit18cndoit18
11

excalidraw

Generate .excalidraw architecture diagrams from codebase analysis.

Community
Advanced
blueskies1818blueskies1818
1

architecture-diagram

Generates dark-themed SVG architecture diagrams as HTML files.

Community
Advanced
InverterNetworkInverterNetwork

architecture-diagram

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

Official
Intermediate
heximaoheximao

architecture-diagram

Generate dark-themed SVG architecture diagrams as HTML files.

Community
Intermediate