skills.rest
luckybbjason1
luckybbjason1COMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

Generates dark-themed SVG architecture and cloud infrastructure diagrams as standalone HTML files.

Updated Sep 9, 2026
Search Tags:#html#microservices#visualization#cloud infrastructure#svg#dark theme#architecture diagram
One-click install
npx skills add https://github.com/luckybbjason1/trading --skill architecture-diagram-luckybbjason1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/luckybbjason1/trading/tree/main/.hermes/skills/creative/architecture-diagram
Command: npx skills add https://github.com/luckybbjason1/trading --skill architecture-diagram-luckybbjason1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating polished technical architecture diagrams usually requires diagramming tools, licenses, or rendering libraries. This Skill produces professional dark-themed system and cloud infrastructure diagrams as a single self-contained HTML file with inline SVG, requiring no external tools, API keys, or JavaScript. ## Core Features & Use Cases - Semantic Color System: Predefined fill and stroke palettes categorize components as frontend, backend, database, cloud, security, message bus, or external services. - Complete Design System: Includes typography rules, grid backgrounds, arrow styles, security group boundaries, region containers, and legend placement logic. - Reusable HTML Template: A full template with working examples of every component type, arrow style, and boundary pattern serves as the structural reference. - Use Case: Describe a microservices deployment with a load balancer, API servers, PostgreSQL, and S3 storage, and receive a ready-to-open HTML diagram with correct AWS region boundaries and security group annotations. ## Quick Start Generate an architecture diagram of my web application with a React frontend, FastAPI backend, and PostgreSQL database, and save it as an 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 create a cloud architecture diagram without diagramming tools?▼

Describe your system components and connections, and this Skill generates a self-contained HTML file with inline SVG graphics. Open the file in any browser to view the diagram, with no external tools, API keys, or rendering libraries required.

What types of diagrams can this SVG architecture generator create?▼

It handles software system architecture, cloud infrastructure with VPCs and regions, microservice and service-mesh topology, database and API maps, and deployment diagrams. It is not suited for scientific subjects, floor plans, or hand-drawn whiteboard sketches.

Does the generated HTML diagram require internet access or JavaScript?▼

The diagram works offline with no JavaScript; all CSS and SVG are inline. The only external reference is the JetBrains Mono font from Google Fonts, and animations like pulsing dots use pure CSS.

When should I use excalidraw instead of this architecture diagram skill?▼

Use excalidraw when you want a hand-drawn whiteboard sketch aesthetic rather than a polished technical diagram. This Skill produces dark, grid-backed diagrams with a formal tech-infrastructure look, and animated explainers should use an animation skill instead.

How are different component types styled in the SVG diagram?▼

Each component type uses a semantic color mapping: cyan for frontend, emerald for backend, violet for databases, amber for cloud services, rose for security, orange for message buses, and slate for external systems. Security groups and regions use dashed boundary rectangles.

Related Skills

Explore More Design & Creative Skills→
AnandaAnugrahHandyantoAnandaAnugrahHandyanto

architecture-diagram

Generate standalone HTML architecture diagrams with inline SVG.

Community
Advanced
nexu-ionexu-io
93.2k

ve-terminal-mono

Generate developer-native HTML slide decks using a monospace aesthetic and CSS-based slide engine.

Official
Intermediate
KristopherlbKristopherlb

docs-with-mermaid

Create technical documentation with Mermaid diagrams for software systems.

Community
Advanced
qprjack86qprjack86

excalidraw

Create hand-drawn whiteboard diagrams and wireframes as editable Excalidraw JSON.

Community
Intermediate