skills.rest
maopujie10-sys
maopujie10-sysCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

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

1|Updated Jun 24, 2026
Search Tags:#html#system design#visualization#cloud infrastructure#svg#dark theme#architecture diagram
One-click install
npx skills add https://github.com/maopujie10-sys/Bailongma --skill architecture-diagram-maopujie10-sys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/maopujie10-sys/Bailongma/tree/main/skills/hermes-skills/creative/architecture-diagram
Command: npx skills add https://github.com/maopujie10-sys/Bailongma --skill architecture-diagram-maopujie10-sys

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating polished technical architecture diagrams usually requires dedicated diagramming tools, accounts, or rendering libraries. This Skill produces professional dark-themed architecture, cloud, 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, including frontend, backend, database, cloud, security, message bus, and external services. - Structured Layout Rules: Enforces spacing, z-order, arrow styling, boundary rendering, and legend placement so diagrams remain readable and consistent. - Self-Contained Output: Generates one HTML file with inline CSS and SVG, no JavaScript, that renders offline in any modern browser. - Use Case: Describe a microservices system with a VPC, subnets, databases, and a message queue, and receive a ready-to-open HTML diagram with region boundaries, security groups, and a legend. ## Quick Start Ask the agent to generate an architecture diagram of your system as an HTML file, describing the components, connections, and technologies involved.

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. Save it with write_file and open it in any browser, with no external tools or dependencies required.

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

It handles software system architecture, cloud infrastructure such as VPCs and subnets, 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 libraries?▼

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 the only external reference being an optional Google Fonts load for JetBrains Mono.

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 dark tech look. This skill targets structured infrastructure and system diagrams with semantic color coding, boundaries, and legends.

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

Each component type maps to a semantic rgba fill and hex stroke: cyan for frontend, emerald for backend, violet for database, amber for cloud, rose for security, orange for message buses, and slate for external services.

Related Skills

Explore More Design & Creative Skills→
hheydaroffhheydaroff

architecture-diagram

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

Community
Intermediate
CuriousLearnerCuriousLearner
27

architecture-documenter

Document system architecture and technical decisions with diagrams and ADRs.

Community
Advanced
truongnattruongnat

stride-analysis-patterns

Identify security threats using the STRIDE methodology with templates and analysis code.

Community
Intermediate
qprjack86qprjack86

excalidraw

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

Community
Intermediate