architecture-diagram

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

Updated Jul 6, 2026
One-click install
npx skills add https://github.com/ghufronbagaskara/agent-im --skill architecture-diagram-ghufronbagaskara
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/ghufronbagaskara/agent-im/tree/main/hermes-home/skills/creative/architecture-diagram
Command: npx skills add https://github.com/ghufronbagaskara/agent-im --skill architecture-diagram-ghufronbagaskara

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This skill solves the friction of creating technical architecture diagrams by generating self-contained, high-quality SVG-based HTML files that require no external rendering tools or API keys.

Core Features & Use Cases

  • Automated Visualization: Generates consistent, dark-themed technical diagrams for cloud infrastructure, microservices, and database topologies.
  • Self-Contained Output: Produces standalone HTML files with inline SVG graphics that work offline in any modern browser.
  • Use Case: Quickly document a new microservice deployment by describing the components and connections to the AI, which then renders a clean, grid-backed architecture map.

Quick Start

Use the architecture-diagram skill to generate a new system diagram for my backend API and database setup.

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 for cloud infrastructure without using external rendering libraries?

Generate architecture diagrams by producing self-contained HTML files with inline SVG graphics, requiring no external rendering libraries or API keys. This approach visualizes cloud infrastructure, microservices, and database topologies as portable, browser-compatible files.

What is the best way to visualize software service topologies and security boundaries offline?

Visualize software service topologies and security boundaries offline by generating standalone HTML files with inline SVG graphics. These files operate in any modern browser without needing active internet connections or external dependencies.

Can I create SVG infrastructure diagrams directly in my browser without installing software?

Yes, you can create SVG infrastructure diagrams directly in your browser without installing software. The generated standalone HTML files are completely self-contained, ensuring browser compatibility and portability across different operating systems without external dependencies.

Do I need API keys to generate dark-themed technical diagrams for system components?

No, you do not need API keys to generate dark-themed technical diagrams for system components. The diagram generation process relies entirely on inline SVG graphics within HTML files, ensuring no external API authentication or rendering dependencies.

How do I document a new microservice deployment using a grid-backed architecture map?

Document a new microservice deployment by describing the system components and connections to generate a clean, grid-backed architecture map. This process yields a dark-themed SVG file that visually maps the technical infrastructure topology.