Verified:GitHub

architecture-diagram

Generate dark-themed HTML architecture diagrams with inline SVG.

Updated Jun 15, 2026

Search Tags:#architecture diagrams #diagram generation #technical visualization #HTML diagrams #infrastructure visualization

Ready to run

npx skills add https://github.com/Piaoxuemoli/qoobeeHermes --skill architecture-diagram-piaoxuemoli

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill allows users to easily create professional, dark-themed technical architecture diagrams directly in HTML using SVG graphics.

Core Features & Use Cases

Technical Diagrams: Generate HTML files with SVG diagrams for system architectures, cloud infrastructures, and more.
Dark Theme: Provides a modern, dark aesthetic that is suitable for technical visuals.
Use Case: Use this Skill to create detailed system architecture diagrams for your project, making them easy to share and review with team members.

Quick Start

Generate a tech diagram for your system and save it to an 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 an HTML architecture diagram for a microservices topology?▼

Yes, you can generate technical architecture diagrams for cloud infrastructures by specifying your system components and their relationships, which produces an HTML file with inline SVG graphics.

Can I create dark-themed technical visualization for cloud infrastructure?▼

Yes, you can create dark-themed technical visualizations for cloud infrastructures by providing your system components and relationships, resulting in an HTML file with inline SVG graphics.

What is the best way to visualize system architecture as an HTML file?▼

To use this tool, you need to specify your system components and their relationships to generate a dark-themed HTML file containing inline SVG graphics.

Do I need to provide system components to generate SVG diagrams?▼

Yes, you need to specify your system components and their relationships to generate the HTML file containing the SVG technical architecture diagram.

Does HTML diagram generation work for software system architecture?▼

The output is a dark-themed HTML file containing inline SVG graphics that visualizes your software system architecture, which can be easily shared and reviewed with team members.

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

The limitations of using inline SVG graphics for infrastructure visualization include the requirement to manually specify all system components and relationships, as the tool does not automatically discover them.