architecture-diagram

Generates SVG architecture diagrams embedded in HTML files.

9|3|Updated May 18, 2026

Search Tags:#architecture #HTML #infrastructure #SVG #diagram generation

Ready to run

npx skills add https://github.com/jordanhubbard/mac --skill architecture-diagram-jordanhubbard

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/jordanhubbard/mac/tree/main/src/mac/_hermes/skills/creative/architecture-diagram
Command: npx skills add https://github.com/jordanhubbard/mac --skill architecture-diagram-jordanhubbard

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill allows you to easily create and view SVG-based infrastructure diagrams, perfect for technical documentation.

Core Features & Use Cases

SVG Diagram Generation: Create professional, dark-themed SVG diagrams directly in an HTML file.
No External Tools: Generates diagrams with inline SVG graphics, ready to view in any browser.
Use Case: Quickly illustrate your cloud architecture, network diagrams, or other tech infrastructures in a visually appealing and shareable format.

Quick Start

Use the architecture-diagram skill to create a diagram for your project by running the following command: generate_diagram --project-name my_project --output ./my-project-diagram.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 SVG architecture diagram for an HTML file?▼

To generate an SVG architecture diagram for an HTML file, use the generate_diagram command with your project name and output path to create a standalone HTML file containing inline SVG graphics.

What is the best way to create network topology diagrams without external tools?▼

The best way to create network topology diagrams without external tools is generating inline SVG graphics within an HTML container, which allows immediate browser rendering and easy sharing without external dependencies.

Can I use inline SVG for cloud infrastructure documentation in HTML?▼

Yes, you can use inline SVG for cloud infrastructure documentation in HTML by generating dark-themed SVG graphics directly within an HTML file, producing a visually appealing format ready for any browser.

Does SVG diagram generation require any special browser plugins or rendering engines?▼

SVG diagram generation does not require special browser plugins or rendering engines because it produces HTML files with inline SVG graphics that are ready to view immediately in any standard web browser.

How do I create a dark-themed software architecture diagram for technical documentation?▼

You create a dark-themed software architecture diagram for technical documentation by running a command to generate a single HTML file with inline SVG, providing a professional and shareable visual output.