skills.rest
samuelmukoti
samuelmukotiCOMMUNITY
Explore all skills by this author →
𝕏@samuelmukotiGitHub

architecture-diagram

Generate standalone HTML architecture diagrams with inline SVG.

Updated Apr 21, 2026
Search Tags:#architecture#offline#visualization#cloud#infrastructure#svg#diagram
One-click install
npx skills add https://github.com/samuelmukoti/myai-agent --skill architecture-diagram-samuelmukoti
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/samuelmukoti/myai-agent/tree/main/skills/creative/architecture-diagram
Command: npx skills add https://github.com/samuelmukoti/myai-agent --skill architecture-diagram-samuelmukoti

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Architects and engineers often need clear, shareable diagrams of complex software systems and cloud topologies. This Skill generates dark-themed, standalone HTML files with inline SVG diagrams that render offline in any browser, removing the need for external diagramming tools.

Core Features & Use Cases

  • Generates self-contained HTML diagrams with inline SVG, color-coding semantic components (frontend, backend, database, cloud, security, message bus).
  • Works offline, renders in any modern browser, and can be embedded in decks or docs without dependencies.
  • Use Cases: software architecture reviews, cloud infrastructure mappings, deployment diagrams, and security boundary visuals.

Quick Start

Describe your system and save the diagram as an HTML file, then open it in a browser to view the result.

Frequently Asked Questions about architecture-diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate offline software architecture diagrams for documentation?▼

To generate offline software architecture diagrams, describe your system topology to produce self-contained HTML files with inline SVG. These standalone diagrams render in any browser without external dependencies, making them ideal for infrastructure documentation.

Can I create cloud infrastructure diagrams that work without an internet connection?▼

Yes, you can create cloud infrastructure diagrams that work offline. The output is a standalone HTML file containing inline SVG, ensuring cloud topology mappings render securely in any modern browser without needing external libraries or connectivity.

What is the best way to map security boundaries and semantic components in infrastructure visuals?▼

Mapping security boundaries in infrastructure visuals is best done using a dark-tech design system with semantic colors. This approach color-codes frontend, backend, database, cloud, and security components directly within inline SVG for clear architectural distinction.

Does generating standalone SVG diagrams require any external dependencies or fonts?▼

Generating standalone SVG diagrams requires no external dependencies. The diagrams utilize a self-contained dark-tech design system featuring the JetBrains Mono font and inline SVG, ensuring they render correctly offline without loading external resources.

How do I embed architecture diagrams into decks or docs without external tools?▼

To embed architecture diagrams into decks or docs without external tools, generate self-contained HTML files with inline SVG. These standalone files can be shared and viewed offline in any browser, eliminating the need for separate diagramming software.

Related Skills

Explore More Software Engineering Skills→
PiaoxuemoliPiaoxuemoli

architecture-diagram

Generate dark-themed HTML architecture diagrams with inline SVG.

Community
Intermediate
JuanMS20JuanMS20

architecture-diagram

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

Community
Intermediate
Weihong-LiuWeihong-Liu
6

architecture-diagram

Generate SVG architecture diagrams in HTML from system components and relationships.

Community
Advanced
markwang2658markwang2658
31

architecture-diagram

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

Community
Intermediate