skills.rest
Plaidmustache
PlaidmustacheCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

Generate standalone HTML architecture diagrams with inline SVG from component lists.

Updated May 4, 2026
Search Tags:#architecture#html#offline#infrastructure#svg#design-system#diagram
One-click install
npx skills add https://github.com/Plaidmustache/hermes-nulab --skill architecture-diagram-plaidmustache
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/Plaidmustache/hermes-nulab/tree/main/skills/creative/architecture-diagram
Command: npx skills add https://github.com/Plaidmustache/hermes-nulab --skill architecture-diagram-plaidmustache

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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

Core Features & Use Cases

  • Generate offline, self-contained diagrams that render in any modern browser.
  • Visualize software stacks, cloud topologies, and deployment maps with a consistent dark theme and grid-based design.
  • Use cases include documenting microservice architectures, cloud architectures, and infrastructure relationships for teams and docs.

Quick Start

Describe your system's components and relationships to generate a ready-to-share architecture diagram HTML.

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 as an offline HTML file?▼

To generate an architecture diagram as an offline HTML file, provide your system's components and relationships. The tool outputs a standalone HTML file with inline SVG that renders in any browser without external dependencies.

Can I create a dark-themed SVG diagram without external dependencies?▼

Yes, you can create a dark-themed SVG diagram without external dependencies. The generated HTML file is fully self-contained, using inline SVG to ensure it works offline in any modern browser.

How do I document a microservices architecture for my team docs?▼

To document a microservices architecture, describe your software stacks and component relationships. This generates a professional, dark-themed infrastructure map suitable for team documentation.

What is the best way to map a cloud infrastructure topology offline?▼

The best way to map a cloud infrastructure topology offline is by inputting your cloud environment components. It produces a grid-based, self-contained HTML deployment diagram with a consistent dark visual design system.

Does this diagram generator support drawing complex infrastructure relationships?▼

Yes, this diagram generator supports drawing complex infrastructure relationships. You define the software stacks and cloud topologies, and it visualizes the deployment maps using inline SVG within a single HTML file.

Related Skills

Explore More Software Engineering Skills→
DonZzzillaDonZzzilla

architecture-diagram

Generate customizable SVG architecture diagrams in HTML from system descriptions.

Community
Advanced
PedroGiudicePedroGiudice
5

technical-doc-creator

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

Community
Intermediate
gqf2008gqf2008

architecture-diagram

Generate dark-themed standalone HTML SVG diagrams of software systems and cloud infrastructure.

Community
Advanced
ayofemiadeayofemiade

spline-interactive

Integrate Spline 3D scenes into React and Next.js applications with event handling.

Community
Intermediate