skills.rest
shiftrepo
shiftrepoOFFICIAL
Explore all skills by this author →
GitHub

architecture-diagram

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate dark-themed SVG diagrams of software systems and cloud infrastructure as standalone HTML files with inline SVG graphics. Semantic component colors (cyan=frontend, emerald=backend, violet=database, amber=cloud/AWS, rose=security, orange=message bus), JetBrains Mono font, grid background. Best suited for software architecture, cloud/VPC topology, microservice maps, service-mesh diagrams, database + API layer diagrams, security groups, message buses — anything that fits a tech-infra deck with a dark aesthetic. If a more specialized diagramming skill exists for the subject (scientific, educational, hand-drawn, animated, etc.), prefer that — otherwise this skill can also serve as a general-purpose SVG diagram fallback. Based on Cocoon AI's architecture-diagram-generator (MIT).

Core Features & Use Cases

  • Generate dark-themed SVG diagrams with semantic color mappings for frontend, backend, database, cloud, security, and messaging.
  • Produce diagrams for software architecture, cloud infrastructure, microservice maps, service-mesh topologies, and data-flow layouts, all as standalone HTML files.
  • Output diagrams that are ready for presentation and offline viewing, with a consistent design system and font.

Quick Start

Describe your system's components and connections and run the skill to generate a standalone HTML diagram with inline SVG.

Frequently Asked Questions about architecture-diagram

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

FAQPage Schema
How do I generate a dark-themed SVG architecture diagram from system components?▼

You can generate an offline SVG architecture diagram by describing your system components and relationships; the skill produces a self-contained HTML file with inline SVG graphics and no external dependencies.

What semantic colors are used for cloud infrastructure and microservice maps?▼

Semantic color mapping applies cyan for frontend, emerald for backend, violet for database, amber for cloud, rose for security, and orange for message buses, ensuring clear visual distinction across microservice maps and infrastructure diagrams.

Can I create a VPC topology diagram that works offline without external dependencies?▼

Yes, you can create offline VPC topology diagrams; the output is a standalone HTML file with inline SVG and zero external dependencies, fully viewable in modern browsers without an internet connection.

Does this diagram generator support service-mesh boundaries and message bus layouts?▼

This diagram generator supports service-mesh boundaries, message bus layouts, database and API layers, and security groups, mapping each component type to a specific semantic color within the dark-themed SVG output.

What is the best way to diagram software architecture for a tech presentation deck?▼

The best way to diagram software architecture for a tech presentation is using this dark-themed SVG generator, which produces presentation-ready standalone HTML files with a consistent design system and JetBrains Mono font.

When should I use a specialized diagramming tool instead of a general SVG generator?▼

You should use a specialized diagramming tool for scientific, educational, hand-drawn, or animated diagrams; this skill serves as a general-purpose SVG fallback best suited for software architecture and cloud infrastructure visualization.

Related Skills

Explore More Software Engineering Skills→
matthew-johnsonmatthew-johnson

architecture-diagram

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

Community
Advanced
samlaggzsamlaggz

architecture-diagram

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

Community
Advanced
liumeixinliumeixin
4

architecture-diagram

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

Community
Intermediate
webdevtodayjasonwebdevtodayjason

architecture-diagram

Generate dark-themed SVG architecture diagrams as HTML files using Python.

Community
Intermediate