architecture-diagram

Generates standalone HTML/SVG architecture and cloud topology diagrams from natural-language descriptions.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate dark-themed, standalone HTML architecture diagrams as inline-SVG visualizations from natural-language/system descriptions, enabling quick sharing without external tools and ensuring a consistent dark aesthetic.

Core Features & Use Cases

  • Generate standalone HTML files with inline SVG diagrams from system architectures and cloud topologies.
  • Apply semantic color mapping for frontend, backend, database, cloud, security, and messaging layers to produce clear infra visuals.
  • Use for software architecture, cloud/VPC topology, microservice maps, service meshes, and security-focused diagrams, all exportable for decks.

Quick Start

Describe your system architecture and run the tool to generate a standalone HTML diagram.

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 SVG architecture diagram from a text description?

You can generate an SVG architecture diagram by providing a natural-language description of your software architecture or cloud topology. The tool outputs a standalone HTML file with an inline SVG visualization, requiring no external rendering engines to view or share.

Can I create a cloud infrastructure diagram offline without external tools?

Yes, you can create cloud infrastructure diagrams completely offline. The tool generates self-contained HTML files with inline SVGs, meaning no external rendering engines or online services are needed to produce or view the visual output.

Does this tool support mapping microservice topology and security boundaries?

Yes, the tool supports mapping microservice topology and security boundaries. It applies semantic color mapping to distinguish frontend, backend, database, cloud, security, and messaging layers for clear infrastructure visualization.

What is the best way to create dark-themed diagrams for system architecture planning?

The best way to create dark-themed diagrams for system architecture planning is using a predefined design system with semantic component colors and a grid background. This ensures a consistent dark aesthetic for export-ready HTML output.

Do I need any specific dependencies or rendering engines to export HTML SVG diagrams?

No, you do not need any specific dependencies or rendering engines to export HTML SVG diagrams. The tool operates completely standalone, producing self-contained HTML visual artifacts that can be quickly shared or exported for decks.

Can I use these generated architecture diagrams in presentation decks?

Yes, you can use these generated architecture diagrams in presentation decks. The tool produces export-ready HTML output with a consistent dark aesthetic, enabling quick visual communication of complex systems for your presentations.