skills.rest
samlaggz
samlaggzCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

Generate self-contained HTML architecture diagrams with inline SVG from textual descriptions.

Updated May 21, 2026
Search Tags:#architecture#html#visualization#cloud#svg#diagrams#infra
One-click install
npx skills add https://github.com/samlaggz/hermes-agent-sam --skill architecture-diagram-samlaggz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/samlaggz/hermes-agent-sam/tree/main/backup/skills/creative/architecture-diagram
Command: npx skills add https://github.com/samlaggz/hermes-agent-sam --skill architecture-diagram-samlaggz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables system architects to quickly convert textual descriptions of software architectures and cloud topologies into clean, offline HTML diagrams with inline SVG, removing manual drawing steps.

Core Features & Use Cases

  • Generate professional architecture diagrams from plain-language descriptions.
  • Output single-file HTML using inline SVG with a dark, grid-based aesthetic.
  • Use cases: cloud infra diagrams, microservice topology maps, deployment diagrams for reports and presentations.

Quick Start

Describe your system and run this skill to generate a standalone architecture diagram 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 architecture diagram from a plain text system description?▼

To generate an architecture diagram from text, provide a plain-language description of your software architecture or cloud topology to produce a standalone HTML file with inline SVG. This removes manual drawing steps by directly converting textual system designs into visual diagrams.

Can I create offline cloud infrastructure diagrams without external dependencies?▼

Yes, you can create offline cloud infrastructure diagrams entirely without external dependencies. The process outputs a single-file HTML document using inline SVG, ensuring your deployment diagrams and infrastructure mappings remain fully functional and viewable offline.

What is the best way to visualize microservice topology maps for presentations?▼

The best way to visualize microservice topology maps for presentations is to generate self-contained HTML diagrams. This approach applies a dark, grid-based aesthetic and inline SVG, yielding professional, portable diagrams suitable for reports and presentations.

Does the generated HTML architecture diagram require any specific frameworks or libraries to view?▼

No, the generated HTML architecture diagram requires no specific frameworks or libraries to view. It ensures a no-dependency, single-file HTML output with inline SVG, allowing diagrams to render natively in any standard web browser.

How do I map out a deployment diagram for a software architecture report?▼

To map out a deployment diagram for a software architecture report, input your textual system description to generate a self-contained HTML file. This produces a clean, offline visual mapping with a design-system-driven visual language suitable for documentation.

Related Skills

Explore More Software Engineering Skills→
JNZaderJNZader

mermaid-diagram

Generate Mermaid diagrams from plain-text descriptions.

Community
Intermediate
PedroGiudicePedroGiudice
5

technical-doc-creator

Generate HTML technical documentation with syntax-highlighted code and SVG architecture diagrams.

Community
Intermediate
ZardLi1115ZardLi1115
4

architecture-diagram

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

Community
Basic
LuminaVaultLuminaVault

architecture-diagram

Generate HTML-based architecture diagrams from system component descriptions.

Official
Intermediate