architecture-diagram

Generate standalone HTML/SVG architecture diagrams from component descriptions.

Updated May 1, 2026
One-click install
npx skills add https://github.com/xiaoquqi/hermes-agent-skills --skill architecture-diagram-xiaoquqi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/xiaoquqi/hermes-agent-skills/tree/main/creative/architecture-diagram
Command: npx skills add https://github.com/xiaoquqi/hermes-agent-skills --skill architecture-diagram-xiaoquqi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate professional dark-themed system architecture diagrams as standalone HTML/SVG files. Self-contained output with no external dependencies. Based on Cocoon AI's architecture-diagram-generator (MIT).

Core Features & Use Cases

  • Self-contained HTML/SVG outputs with inline SVG graphics and no external dependencies.
  • Offline, shareable diagrams suitable for infrastructure documentation and cloud architectures.
  • Template-driven design system that produces consistent visuals and easy customization.

Quick Start

Describe your system architecture (components and connections) and save the diagram as a standalone 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 architecture diagrams as standalone HTML files?

To generate architecture diagrams as standalone HTML files, you simply describe your system architecture, including components and connections, and the tool outputs a self-contained HTML file with inline SVG graphics and no external dependencies.

Can I create cloud infrastructure diagrams that work offline?

Yes, you can create cloud infrastructure diagrams that work offline by transforming your component descriptions into self-contained HTML/SVG files, ensuring the visual documentation remains accessible without any internet connection or external resources.

What is the best way to visualize system architecture without external dependencies?

The best way to visualize system architecture without external dependencies is using a template-driven design system to render inline SVGs directly into a browser-ready HTML file, producing polished visuals that require no external libraries to display.

How do I document system components and connections using SVG?

You document system components and connections using SVG by providing a text description of your infrastructure, which the system transforms into a single HTML file containing inline SVG graphics that visually map out the architecture.

Does this architecture diagram tool require any specific platform or environment setup?

No specific platform or environment setup is required to use this architecture diagram tool, as it generates standalone HTML files with inline SVG graphics that can be opened directly in any standard web browser.

Are there limitations when creating dark-themed infrastructure diagrams as HTML files?

A limitation when creating dark-themed infrastructure diagrams as HTML files is that the output is strictly a single standalone HTML file per diagram, relying entirely on inline SVG rendering without dynamic external data integration.