skills.rest
Rawgrowth-Consulting
Rawgrowth-ConsultingOFFICIAL
Explore all skills by this author →
GitHub

architecture-diagram

Generate standalone HTML SVG architecture diagrams from system components.

Updated Apr 23, 2026
Search Tags:#architecture#html#visualization#infrastructure#svg#diagram#dark-theme
One-click install
npx skills add https://github.com/Rawgrowth-Consulting/rawclaw-agent --skill architecture-diagram-rawgrowth-consulting
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/Rawgrowth-Consulting/rawclaw-agent/tree/main/skills/creative/architecture-diagram
Command: npx skills add https://github.com/Rawgrowth-Consulting/rawclaw-agent --skill architecture-diagram-rawgrowth-consulting

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams visualize software architectures and cloud topologies as standalone HTML diagrams, eliminating the need for external diagram tools and ensuring offline accessibility.

Core Features & Use Cases

  • Generate self-contained HTML files with inline SVG diagrams that render offline in any browser.
  • Apply semantic colors for frontend, backend, database, cloud, security, and message bus, plus the JetBrains Mono font for a cohesive aesthetic.
  • Use case: create architecture diagrams for software systems, cloud deployments, microservice maps, and security boundary visuals during design reviews.

Quick Start

Describe your target system and run the skill to generate the architecture 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 offline HTML architecture diagram for a software system?▼

To generate an offline HTML architecture diagram, describe your target system components and the skill outputs a standalone HTML file with inline SVG. This self-contained file renders in any browser without external dependencies or internet access.

Can I create a dark theme SVG diagram for cloud topology and microservice maps?▼

Yes, you can create a dark theme SVG diagram for cloud topology and microservice maps. The skill applies semantic color mapping for frontend, backend, database, cloud, security, and message bus components using the JetBrains Mono font for a cohesive aesthetic.

What is the best way to visualize software architecture without external diagram tools?▼

The best way to visualize software architecture without external tools is generating a standalone HTML file with inline SVG. This approach ensures offline accessibility, eliminates tool dependencies, and provides semantic color mapping for various infrastructure layers.

Does the generated SVG architecture diagram require an internet connection to render?▼

No, the generated SVG architecture diagram does not require an internet connection to render. The skill produces a standalone HTML file with inline SVG and embedded JetBrains Mono font, ensuring offline rendering in any browser.

How do I map security boundaries and component types in an infrastructure visualization?▼

You map security boundaries and component types by describing your system components to the skill. It automatically applies semantic color mapping to differentiate frontend, backend, database, cloud, security, and message bus layers within the generated SVG architecture diagram.

Related Skills

Explore More Software Engineering Skills→
DonZzzillaDonZzzilla

architecture-diagram

Generate customizable SVG architecture diagrams in HTML from system descriptions.

Community
Advanced
JuanMS20JuanMS20

architecture-diagram

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

Community
Intermediate
DarkArty07DarkArty07
3

architecture-diagram

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

Community
Intermediate
SignmanalSignmanal
1

architecture-diagram

Generate standalone HTML architecture diagrams with inline SVG graphics.

Community
Intermediate