skills.rest
Tommy-yw
Tommy-ywCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

Generates SVG-based architecture diagrams as standalone HTML files.

539|39|Updated May 1, 2026
Search Tags:#HTML#software architecture#diagramming#SVG#architecture diagram
One-click install
npx skills add https://github.com/Tommy-yw/RunbookHermes --skill architecture-diagram-tommy-yw
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/Tommy-yw/RunbookHermes/tree/main/skills/creative/architecture-diagram
Command: npx skills add https://github.com/Tommy-yw/RunbookHermes --skill architecture-diagram-tommy-yw

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and assets (resource) components.

What problem does it solve?

This Skill simplifies the creation of technical architecture diagrams, providing a way to visually represent complex systems in a clean, standardized format.

Core Features & Use Cases

  • Generate Dark-Themed Diagrams: Create standalone HTML files with SVG graphics, suitable for software architecture, cloud VPC topologies, and microservice maps.
  • Semantic Component Colors: Utilize color coding for frontend, backend, databases, cloud services, security, and message buses.
  • Customizable Fonts and Backgrounds: Use JetBrains Mono font and a grid background for a consistent aesthetic.
  • General-Purpose Fallback: A general SVG diagram tool for technical infrastructure visuals when a specialized skill is not available.

Quick Start

Use the architecture-diagram skill to create a diagram of your system architecture by describing the components and connections.

Frequently Asked Questions about architecture-diagram

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

FAQPage Schema
How do I generate an SVG architecture diagram for a software system?▼

To generate an SVG architecture diagram, provide a text description of your software system components and connections. The tool outputs a standalone HTML file containing inline SVG graphics for easy viewing.

Can I create a cloud VPC topology diagram as an HTML file?▼

Yes, you can create a cloud VPC topology diagram by describing your infrastructure layout. It produces a standalone HTML file with inline SVG graphics that visually represent your cloud network.

How are different components like databases and frontends colored in the diagram?▼

Components are colored using semantic coloring, automatically assigning distinct colors to frontend, backend, databases, cloud services, security, and message buses for clear visual differentiation.

Does the generated HTML file require external dependencies to view?▼

No, the generated HTML file does not require external dependencies to view. It is a standalone file with inline SVG graphics, allowing it to be opened and shared directly in any web browser.

What is the best way to visualize a microservice map without specialized software?▼

The best way to visualize a microservice map without specialized software is describing the services to generate a standalone HTML file. It uses inline SVG graphics with a dark theme and grid background.

Related Skills

Explore More Software Engineering Skills→
castrojocastrojo

architecture-diagram-specification

Generate JSON specifications for component, data flow, and deployment diagrams.

Community
Advanced
icyzhicyzh
1

architecture-diagram

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

Community
Intermediate
jordanhubbardjordanhubbard
9

architecture-diagram

Generates SVG architecture diagrams embedded in HTML files.

Community
Intermediate
shekerkammashekerkamma

uml

Render UML diagrams from PlantUML text into diagram images.

Community
Advanced