skills.rest
lengoctuong2005
lengoctuong2005COMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

Converts architecture descriptions into dark-themed HTML with embedded SVG.

5|1|Updated Mar 24, 2026
Search Tags:#architecture#HTML#diagram generation#SVG graphics#tech diagram
One-click install
npx skills add https://github.com/lengoctuong2005/Branding-Focused-Skills --skill architecture-diagram-lengoctuong2005
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/lengoctuong2005/Branding-Focused-Skills/tree/main/antigravity/skills/hermes-collection/creative/architecture-diagram
Command: npx skills add https://github.com/lengoctuong2005/Branding-Focused-Skills --skill architecture-diagram-lengoctuong2005

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires jetbrains-mono, and includes scripts (resource) components.

What problem does it solve?

This skill solves the problem of creating professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics, without the need for external tools or libraries.

Core Features & Use Cases

  • Technical Diagrams: Creates diagrams for software systems, cloud infrastructures, microservices, and more.
  • Dark Theme: Utilizes a dark color palette for a tech aesthetic, suitable for modern interfaces.
  • SVG Graphics: Outputs diagrams as HTML files with inline SVG graphics, ensuring no external dependencies.

Quick Start

Generate an architecture diagram for your project 'my-system' and save it with write_file as 'my-system-architecture.html'.

Frequently Asked Questions about architecture-diagram

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

FAQPage Schema
How do I generate a dark-themed SVG diagram for software architecture?▼

To generate a dark-themed SVG diagram for software architecture, you provide a system description and the skill converts it into a standalone HTML file with inline SVG graphics. This process requires no external libraries.

Can I create microservice architecture diagrams as HTML files without external dependencies?▼

Yes, you can create microservice architecture diagrams as standalone HTML files without external dependencies. The skill outputs inline SVG graphics directly embedded in the HTML, ensuring portability.

Do I need the JetBrains Mono font to create system architecture diagrams?▼

Yes, you need the JetBrains Mono font installed to properly render the system architecture diagrams. The skill utilizes this specific font to generate the dark-themed technical diagrams.

What's the best way to depict cloud infrastructure in an SVG file?▼

The best way to depict cloud infrastructure in an SVG file is converting your infrastructure description into a dark-themed HTML document. This approach yields static diagrams suitable for modern tech aesthetics.

Are there limitations when generating static SVG diagrams for live data processing?▼

Yes, a limitation is that the generated SVG diagrams are static and do not support live data processing. The output HTML files are designed for visual depiction of software infrastructures, not real-time monitoring.

Related Skills

Explore More Software Engineering Skills→
Rawgrowth-ConsultingRawgrowth-Consulting

architecture-diagram

Generate standalone HTML SVG architecture diagrams from system components.

Official
Intermediate
pixijspixijs
302

pixijs-scene-graphics

Draw and render vector graphics with PixiJS v8 Graphics API.

Official
Advanced
IoncradeIoncrade

contextmap

Builds and queries knowledge graphs from source code using Python libraries.

Community
Advanced
PedroGiudicePedroGiudice
5

technical-doc-creator

Generate HTML technical documentation with syntax-highlighted code and SVG architecture diagrams.

Community
Intermediate