skills.rest
perasyudha
perasyudhaCOMMUNITY
Explore all skills by this author →
Website𝕏@Nyxora_AIGitHub

architecture-diagram

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

5|2|Updated May 26, 2026
Search Tags:#html#system design#visualization#cloud infrastructure#svg#dark theme#architecture diagram
One-click install
npx skills add https://github.com/perasyudha/Nyxora --skill architecture-diagram-perasyudha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/perasyudha/Nyxora/tree/main/packages/core/playbooks/creative/architecture-diagram
Command: npx skills add https://github.com/perasyudha/Nyxora --skill architecture-diagram-perasyudha

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 generates polished, dark-themed architecture and 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 component examples. - Use Case: Describe your system (e.g., a React frontend, FastAPI backend, PostgreSQL database, and AWS S3 storage behind CloudFront) and receive a single .html file you can open in any browser, share with your team, or embed in documentation. ## Quick Start Generate an architecture diagram of my web application with a React frontend, Node.js API server, 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 an architecture diagram without diagramming tools?▼

Describe your system components and connections, and the Skill generates a self-contained HTML file with inline SVG. Save it with a .html extension and open it in any browser; no external tools, libraries, or API keys are needed.

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

It handles software system architecture, cloud infrastructure with regions and security groups, microservice topology, database and API maps, and deployment diagrams. It is not suited for scientific subjects, floor plans, or hand-drawn whiteboard 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. The only external reference is the JetBrains Mono font from Google Fonts; everything else renders offline in any modern browser.

When should I use a different diagram skill instead?▼

Use a different skill for physics, chemistry, or biology subjects, physical object illustrations, floor plans, educational visuals, hand-drawn whiteboard sketches (use excalidraw), or animated explainers. This Skill focuses on tech infrastructure with a dark aesthetic.

How are component types color-coded in the diagrams?▼

Components use a semantic palette: cyan for frontend, emerald for backend, violet for database, amber for cloud services, rose for security, orange for message buses, and slate for external systems. Security flows use dashed rose lines and regions use dashed amber boundaries.

Related Skills

Explore More Design & Creative Skills→
guccangguccang
3

architecture-diagram

Generate standalone HTML architecture diagrams with inline SVG graphics.

Community
Intermediate
sunilaicoesunilaicoe

AICOE Architecture Diagram

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

Community
Advanced
qprjack86qprjack86

excalidraw

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

Community
Intermediate
iani-kuliiani-kuli

diagrams

Generate technical diagrams from text-based markup languages like Mermaid, D2, or PlantUML.

Community
Intermediate