architecture-diagram

Name: architecture-diagram
Availability: InStock
Author: tiancaiamao

Create dark-themed architecture diagrams as self-contained HTML files with inline SVG.

5|Updated Feb 8, 2026

Search Tags:#documentation #html #cloud #infrastructure #svg #architecture diagram

Ready to run

npx skills add https://github.com/tiancaiamao/ai --skill architecture-diagram-tiancaiamao

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/tiancaiamao/ai/tree/main/skills/architecture-diagram
Command: npx skills add https://github.com/tiancaiamao/ai --skill architecture-diagram-tiancaiamao

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns rough system ideas into polished architecture diagrams without forcing you to manually style shapes, connectors, and layout details.

Core Features & Use Cases

Self-contained HTML output: Produces a single browser-ready file with embedded CSS and inline SVG for easy sharing.
Technical diagram styling: Uses a dark visual system with semantic colors, labeled components, boundaries, arrows, and legends.
Export workflow: Includes built-in copy, PNG download, and PDF download actions for presentation and documentation use cases.
Use Case: Ideal for documenting cloud infrastructure, service topologies, security boundaries, and platform architecture in a professional visual format.

Quick Start

Ask the skill to generate a complete architecture diagram for your system as a self-contained HTML file with inline SVG and export controls.

Frequently Asked Questions about architecture-diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create an architecture diagram as a self-contained HTML file?▼

To create an architecture diagram as an HTML file, you need a tool that composes inline SVG elements and embeds CSS styling directly into the document. This generates a single browser-ready file containing your system topology, security boundaries, and semantic colors without external dependencies.

What is the best way to document cloud infrastructure visually?▼

The best way to document cloud infrastructure visually is by generating a dark-themed HTML diagram with labeled components, boundaries, arrows, and legends. This approach ensures your network topology and platform architecture are presented in a polished, professional format that is easy to share.

Can I export SVG architecture diagrams to PNG and PDF?▼

Yes, you can export SVG architecture diagrams to PNG and PDF using built-in browser-based export controls. The HTML output includes native copy, PNG download, and PDF download actions directly within the file, allowing immediate presentation and documentation use without external software.

Does this approach work for system topology and security boundary documentation?▼

Yes, this approach works for system topology and security boundary documentation by applying a dark visual system with semantic colors. It effectively maps service topologies, cloud infrastructure, and platform architecture into polished visual formats with labeled components and boundaries.

How do I generate a dark-themed architecture diagram without manually styling shapes and connectors?▼

You can generate a dark-themed architecture diagram without manual styling by using an automated tool that applies a predefined visual system. It handles the layout details, connector routing, and embedded CSS styling, turning rough system ideas into polished diagrams instantly.