skills.rest
CHENHUI-X
CHENHUI-XCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

architecture-diagram

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

Updated Jul 3, 2026
Search Tags:#html#system design#visualization#cloud infrastructure#svg#dark theme#architecture diagram
One-click install
npx skills add https://github.com/CHENHUI-X/toolbox --skill architecture-diagram-chenhui-x
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/CHENHUI-X/toolbox/tree/main/official-skills/creative/architecture-diagram
Command: npx skills add https://github.com/CHENHUI-X/toolbox --skill architecture-diagram-chenhui-x

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating professional-looking technical architecture diagrams usually requires dedicated diagramming tools, licenses, or rendering libraries. This Skill produces polished, dark-themed architecture and cloud infrastructure diagrams as single self-contained HTML files with inline SVG, requiring no external tools, API keys, or dependencies. ## Core Features & Use Cases - Semantic Color System: Predefined fill and stroke palettes categorize components by type (frontend, backend, database, cloud, security, message bus, external) for instantly readable diagrams. - Complete Design System: Includes typography rules, grid backgrounds, arrow styles, security group boundaries, region boundaries, and legend placement logic, plus a full HTML template with working examples of every component. - Use Case: Describe your system (e.g., a React frontend, FastAPI backend, PostgreSQL database, and AWS S3/CloudFront layer) and receive a single .html file you can open in any browser, share with teammates, or embed in documentation. ## Quick Start Ask the assistant to generate an architecture diagram of your system as an HTML file, listing your components, their connections, and the technologies used.

Frequently Asked Questions about architecture-diagram

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

FAQPage Schema
How do I create an architecture diagram without diagramming tools?▼

Describe your system components, connections, and technologies, and the Skill generates a standalone HTML file with inline SVG. Open the file in any browser to view the diagram; no external tools, API keys, or rendering libraries are needed.

What types of diagrams can this SVG architecture skill generate?▼

It handles software system architecture, cloud infrastructure such as VPCs and regions, microservice and service-mesh topology, database and API maps, and deployment diagrams. It can also serve as a general SVG diagram fallback with a dark tech aesthetic.

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

The output is a single self-contained HTML file with all CSS and SVG inline and no JavaScript. The only external reference is the JetBrains Mono font from Google Fonts, so the diagram renders offline with a fallback monospace font.

When should I use a different diagram tool instead of this one?▼

Use a different approach for scientific subjects like physics or biology, physical objects such as vehicles or anatomy, floor plans, textbook-style visuals, hand-drawn whiteboard sketches, or animated explainers. This Skill targets tech infrastructure subjects with a dark grid-backed aesthetic.

How are component types visually distinguished in the diagrams?▼

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
shekerkammashekerkamma

architecture-to-everything

Generate architecture documentation packages from system descriptions or drawio files.

Community
Advanced
rsmdtrsmdt
381

security-assessment

Conduct security assessments on code, architecture, and infrastructure using STRIDE threat modeling.

Community
Advanced
qprjack86qprjack86

excalidraw

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

Community
Intermediate