skills.rest
jaredcroxton
jaredcroxtonCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

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

Updated May 16, 2026
Search Tags:#html#system design#cloud infrastructure#svg#architecture diagrams#technical visualization
One-click install
npx skills add https://github.com/jaredcroxton/hermes-mirror --skill architecture-diagram-jaredcroxton
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/jaredcroxton/hermes-mirror/tree/main/agents/skills/creative/architecture-diagram
Command: npx skills add https://github.com/jaredcroxton/hermes-mirror --skill architecture-diagram-jaredcroxton

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

It eliminates the time-consuming effort of manually drawing clear system architecture diagrams by producing polished, dark-themed visuals directly from a written description.

Core Features & Use Cases

  • Standalone dark SVG-to-HTML diagrams: Creates professional, grid-backed, dark-themed diagrams as a single offline HTML file.
  • Infrastructure-friendly layout & styling: Supports frontend, backend, databases, cloud boundaries/regions, security components, and message bus styling with consistent semantics.
  • Offline, dependency-free output: Generates the diagram as self-contained HTML with inline SVG and minimal browser requirements, no external rendering libraries or API keys.
  • Governance/org-chart adaptation: Provides a fallback executive hierarchy pattern for reporting/governance visuals when the subject is not strictly technical.

Quick Start

Use the architecture-diagram skill to generate an offline HTML file for your system by describing your components, connections, and technologies, then save the result to a file like ./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 an architecture diagram as an offline HTML file?▼

You can generate a dark-themed architecture diagram by describing your software components, connections, and technologies. The output is a standalone, browser-openable HTML file containing inline SVG and requiring no external rendering libraries.

Can I create a cloud infrastructure diagram without external APIs or client-side JavaScript?▼

Yes, you can map cloud infrastructure without external APIs or client-side JavaScript. The skill produces self-contained HTML files with inline SVG, ensuring complete offline functionality and single-file browser compatibility.

What is the best way to visualize microservice and service-mesh topology offline?▼

The best way to visualize microservice topology offline is generating a standalone HTML file with inline SVG. It applies strict styling rules for component types and connection behaviors to map service meshes accurately.

Does this architecture diagram generator support database and API relationship visualization?▼

Yes, this architecture diagram generator supports database and API relationship visualization. It provides infrastructure-friendly layout styling for frontend, backend, databases, and message bus components within a predefined dark grid aesthetic.

Can I use this tool for governance or org chart reporting visuals?▼

Yes, you can use this tool for governance or org chart reporting visuals. It provides a fallback executive hierarchy pattern for reporting visuals when the subject matter is not strictly technical system architecture.

Are there limitations to the dark SVG-to-HTML diagram output format?▼

A limitation of the dark SVG-to-HTML diagram output is its strict adherence to a predefined grid aesthetic and specific component styling rules. It focuses on static offline visualization rather than interactive client-side rendering.

Related Skills

Explore More Design & Creative Skills→
DonZzzillaDonZzzilla

architecture-diagram

Generate customizable SVG architecture diagrams in HTML from system descriptions.

Community
Advanced
ChangZhou-xjChangZhou-xj

architecture-diagram

Generate standalone HTML files with inline SVG architecture diagrams.

Community
Intermediate
eddieluengeddielueng
1

architecture-diagram

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

Community
Basic
samlaggzsamlaggz

architecture-diagram

Generate self-contained HTML architecture diagrams with inline SVG from textual descriptions.

Community
Advanced