architecture-diagram
Create polished technical architecture diagrams rendered as standalone HTML with embedded SVG graphics and a dark aesthetic. The skill generates diagrams for system architecture, cloud infrastructure, microservices, and deployment topologies using semantic color coding and a grid-backed design system. Output is a single file that opens in any browser offline.
Architecture Diagram generates professional dark-themed technical diagrams as self-contained HTML files.
AI-generated summary based on this skill's SKILL.md
Install
NousResearch/hermes-agent/architecture-diagram · repository language: Python
git clone https://github.com/NousResearch/hermes-agent
cp -r hermes-agent/skills/creative/architecture-diagram ~/.claude/skills/architecture-diagramFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create architecture diagram dark theme output?
architecture-diagram generates professional dark-themed architecture diagrams as self-contained HTML files. Each diagram is rendered with embedded SVG graphics and a dark aesthetic, making it suitable for technical presentations and documentation. The output is a single file that opens in any browser without requiring external tools or internet connectivity.
Can architecture-diagram visualize cloud infrastructure and microservices?
Yes. architecture-diagram specializes in visualizing cloud infrastructure and microservice topologies without external tools. It supports AWS infrastructure diagrams, service mesh topology visualization, and deployment diagrams. All output is generated as standalone HTML with embedded SVG, enabling offline-compatible technical communication.
What does architecture-diagram use for component styling?
architecture-diagram creates system architecture documentation with semantic color-coded components. This color-coding system helps distinguish different layers and services in your diagrams—such as backend, frontend, database, and API components—making technical architecture visuals clearer and more professional for system design communication.
Is architecture-diagram compatible with offline use?
Yes. architecture-diagram generates offline-compatible SVG diagrams with grid backgrounds and legends, all packaged into a single HTML file. You can create infrastructure visualization, deployment diagrams, and technical architecture documentation without internet access or external dependencies. The output opens in any modern browser.
What file formats does architecture-diagram produce?
architecture-diagram outputs polished technical architecture diagrams as standalone HTML files with embedded SVG graphics. This single-file format ensures your diagrams are self-contained, portable, and ready for sharing. The grid-backed design system and dark aesthetic provide a professional appearance suitable for technical documentation and presentations.
SKILL.md
rendered from the published skill — quoted content, verbatim
Architecture Diagram Skill
Generate professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics. No external tools, no API keys, no rendering libraries — just write the HTML file and open it in a browser.
Scope
Best suited for: - Software system architecture (frontend / backend / database layers) - Cloud infrastructure (VPC, regions, subnets, managed services) - Microservice / service-mesh topology - Database + API map, deployment diagrams - Anything with a tech-infra subject that fits a dark, grid-backed aesthetic
Look elsewhere first for: - Physics, chemistry, math, biology, or other scientific subjects - Physical objects (vehicles, hardware, anatomy, cross-sections) - Floor plans, narrative journeys, educational
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
skills/creative/architecture-diagram/SKILL.md
skills/creative/architecture-diagram/templates/template.html