skills.rest
ruiyangruiyi
ruiyangruiyiCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

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

Updated May 26, 2026
Search Tags:#html#microservices#visualization#infrastructure#svg#architecture diagrams#security flows
One-click install
npx skills add https://github.com/ruiyangruiyi/hermes-agent --skill architecture-diagram-ruiyangruiyi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/ruiyangruiyi/hermes-agent/tree/main/skills/creative/architecture-diagram
Command: npx skills add https://github.com/ruiyangruiyi/hermes-agent --skill architecture-diagram-ruiyangruiyi

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

It helps you turn a system description into clear, professional architecture diagrams without paying for tools, installing renderers, or iterating through manual drawing.

Core Features & Use Cases

  • Standalone dark-themed HTML + inline SVG: Produces a single self-contained .html file that you can open locally in any modern browser.
  • Technically expressive diagram types: Covers frontend, backend, database, cloud services/regions, and security flows using consistent color semantics and connection styles.
  • Reusable design system & layout rules: Enforces spacing, arrow styling (including dashed security/auth flows), and legend placement so diagrams stay readable as complexity grows.

Use case example: Describe a microservice setup with an auth provider, API tier, database layer, and a cloud region boundary, then generate an offline HTML diagram you can share or include in docs.

Quick Start

Generate an architecture diagram for my system and write it to an HTML file I can open in my browser.

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 architecture diagram as a standalone HTML file?▼

To generate an architecture diagram as a standalone HTML file, you provide a system description and the tool outputs a single self-contained .html file with inline SVG graphics. This file requires no external rendering dependencies and opens locally in any modern browser.

What is the best way to visualize microservice topology and security flows offline?▼

Visualizing microservice topology and security flows offline is best achieved by generating a single dark-themed HTML file with inline SVG. This approach uses consistent visual semantics, dashed lines for auth flows, and requires no internet connection or installed renderers.

Does this architecture diagram generator require any external dependencies or rendering tools?▼

This architecture diagram generator does not require any external dependencies or rendering tools. It produces a completely standalone offline HTML file with inline CSS and SVG graphics, ensuring you can view and share system communication diagrams without installing additional software.

Can I visualize cloud infrastructure regions and deployment maps using inline SVG?▼

Yes, you can visualize cloud infrastructure regions and deployment maps using inline SVG. The generated HTML diagrams support cloud service boundaries, database layers, and frontend/backend components while enforcing specific color palettes and legend placement constraints.

How do architecture diagrams handle visual semantics for complex system communication?▼

Architecture diagrams handle visual semantics for complex system communication by enforcing consistent layout rules, specific arrow styles, and a defined color palette. This ensures diagrams remain readable as topology complexity grows, clearly distinguishing standard infrastructure from dashed security flows.

What are the limitations of using dark-themed HTML files for infrastructure visualization?▼

Limitations of using dark-themed HTML files for infrastructure visualization include being restricted to a specific dark color palette and static inline SVG output. While highly portable, the diagrams rely on predefined layout rules and do not offer interactive rendering capabilities.

Related Skills

Explore More Design & Creative Skills→
PiaoxuemoliPiaoxuemoli

architecture-diagram

Generate dark-themed HTML architecture diagrams with inline SVG.

Community
Intermediate
samuelmukotisamuelmukoti

architecture-diagram

Generate standalone HTML architecture diagrams with inline SVG.

Community
Advanced
PedroGiudicePedroGiudice
5

technical-doc-creator

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

Community
Intermediate
freedomw1987freedomw1987
2

architecture-diagram

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

Community
Intermediate