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

Ready to run

npx skills add https://github.com/jaredcroxton/hermes-mirror --skill architecture-diagram-jaredcroxton

💬 Prompt for ChatGPT / Claude Chat▼

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.