skills.rest
Chensihakniroth
ChensihaknirothCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

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

Updated Jun 7, 2026
Search Tags:#html#microservices#visualization#SVG#cloud infrastructure#architecture diagram#technical diagram
One-click install
npx skills add https://github.com/Chensihakniroth/ANAKOT-AGENT --skill architecture-diagram-chensihakniroth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/Chensihakniroth/ANAKOT-AGENT/tree/main/skills/creative/architecture-diagram
Command: npx skills add https://github.com/Chensihakniroth/ANAKOT-AGENT --skill architecture-diagram-chensihakniroth

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating professional technical architecture diagrams usually requires specialized tools, paid services, or rendering libraries. This Skill generates polished, dark-themed architecture and infrastructure diagrams as self-contained HTML files with inline SVG, requiring no external tools, API keys, or dependencies. ## Core Features & Use Cases - Semantic Color System: Categorizes components visually with a defined palette for frontend, backend, database, cloud, security, message bus, and external services. - Complete Design System: Provides layout rules, connection styles, security group boundaries, region containers, legends, and summary cards for consistent output. - Use Case: Describe your microservices deployment (load balancer, API servers, PostgreSQL, S3, CloudFront) and receive a single HTML file you can open in any browser or share with your team for documentation. ## Quick Start Ask the agent to generate an architecture diagram of your system describing its components, connections, and technologies, then open the saved HTML file in a browser.

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 design 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, with no external tools or accounts required.

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

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

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. It renders offline in any modern browser, with Google Fonts as the only optional external resource.

When should I use excalidraw instead of this diagram approach?▼

Use excalidraw when you need hand-drawn whiteboard-style sketches rather than polished technical visuals. This Skill produces a dark, grid-backed tech aesthetic best suited for infrastructure and system documentation.

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

Components use a semantic color palette: cyan for frontend, emerald for backend, violet for databases, amber for cloud services, and rose for security. Dashed boundaries represent security groups and regions, with a legend explaining each type.

Related Skills

Explore More Design & Creative Skills→
hheydaroffhheydaroff

architecture-diagram

Create system architecture diagrams as standalone HTML files with SVG graphics.

Community
Intermediate
sunilaicoesunilaicoe

AICOE Architecture Diagram

Generate HTML architecture diagrams and Markdown technical documentation from system specifications.

Community
Advanced
awslabsawslabs
15

aws-diagram

Generate AWS architecture diagrams in Mermaid and ASCII formats.

Official
Intermediate
qprjack86qprjack86

excalidraw

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

Community
Intermediate