architecture-diagram

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

Updated Jun 13, 2026

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

Ready to run

npx skills add https://github.com/srivtx/supercharger-opencode --skill architecture-diagram-srivtx

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/srivtx/supercharger-opencode/tree/main/diagrams/architecture-diagram
Command: npx skills add https://github.com/srivtx/supercharger-opencode --skill architecture-diagram-srivtx

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill solves the problem of creating detailed and professional architecture diagrams for software systems, cloud infrastructures, and other tech-infra subjects.

Core Features & Use Cases

Dark-themed SVG Diagrams: Generates diagrams with a dark aesthetic suitable for technical documentation.
Flexible Diagram Types: Supports a variety of diagram types including system architecture, cloud infrastructure, and microservices topology.
No External Tools Required: Generates diagrams as HTML files with inline SVG graphics, requiring no external rendering libraries or API keys.
Use Case: Ideal for documenting a complex software system's architecture or visualizing a cloud infrastructure.

Quick Start

Use the architecture-diagram skill to generate a diagram for your system's architecture by providing the necessary details in a structured format.

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 as an HTML file?▼

You can generate a dark-themed SVG architecture diagram by providing structured input that defines your system components and connections. The Skill outputs an HTML file with inline SVG graphics, requiring no external rendering libraries or API keys.

Can I visualize cloud infrastructure and microservices topology without external tools?▼

You can visualize cloud infrastructure and microservices topology without external tools by providing structured component and connection input. The Skill outputs HTML files containing inline SVG graphics without requiring external rendering libraries.

What format do I need to provide input in to create system architecture diagrams?▼

You must provide structured input defining your system components and their connections to create system architecture diagrams. This structured data allows the Skill to render the corresponding inline SVG graphics within an HTML file.

Does this approach work for documenting software systems without API keys?▼

Yes, this approach works for documenting software systems without API keys. It generates dark-themed diagrams as HTML files with inline SVG graphics, strictly requiring no external rendering libraries or API keys to function.

What are the limitations of using inline SVG for infrastructure diagrams?▼

A limitation of using inline SVG for infrastructure diagrams is that it requires structured input to define components and connections manually. Additionally, the output is specifically dark-themed HTML files, which may not integrate into light-themed documentation.