architecture-diagram

Generate standalone HTML files with inline SVG architecture diagrams.

Updated Apr 30, 2026
One-click install
npx skills add https://github.com/photonics-dhl/Hermes --skill architecture-diagram-photonics-dhl
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/photonics-dhl/Hermes/tree/main/hermes-home/skills/creative/architecture-diagram
Command: npx skills add https://github.com/photonics-dhl/Hermes --skill architecture-diagram-photonics-dhl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate professional, dark-themed architecture diagrams as standalone HTML files with inline SVG, eliminating the need for external tools or dependencies.

Core Features & Use Cases

  • Self-contained HTML/SVG diagrams that can be opened in any browser offline.
  • Based on Cocoon AI's architecture-diagram-generator design system for consistent visuals.
  • Use it to document software architectures, cloud topologies, and infrastructure diagrams across teams.

Quick Start

Describe your system and run the generator to produce a standalone HTML file you can open directly in any browser.

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

To generate an offline architecture diagram for cloud infrastructure, you describe your system topology and the generator produces a standalone HTML file with inline SVG. This self-contained output requires no external dependencies and can be opened directly in any browser for offline viewing.

What is a self-contained HTML SVG diagram and when do I need one?

A self-contained HTML SVG diagram is a standalone web file with inline graphics and no external dependencies. You need this format to securely document software architectures or on-premise infrastructures across teams when offline viewing and consistent visual design are required.

Can I document inter-service communications without external visualization dependencies?

Yes, you can document inter-service communications without external visualization dependencies by generating a standalone HTML file with inline SVG. Based on a published design system, it produces consistent dark-themed diagrams suitable for offline viewing in any browser.

What is the best way to create offline software architecture diagrams for product teams?

The best way to create offline software architecture diagrams for product teams is to generate standalone HTML files with inline SVG. This approach eliminates the need for external tools, ensuring your cloud topologies and inter-service communications remain accessible offline.

Does this architecture diagram generator work without internet access?

Yes, the architecture diagram generator works without internet access by producing a standalone HTML file with inline SVG. Once generated, the self-contained output can be opened and viewed offline in any browser without needing external dependencies.