skills.rest
AVOI-CEO
AVOI-CEOCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

Generate standalone HTML architecture diagrams with inline SVG.

Updated Aug 27, 2026
Search Tags:#architecture#html#visualization#infrastructure#svg#diagrams
One-click install
npx skills add https://github.com/AVOI-CEO/avoi-agent --skill architecture-diagram-avoi-ceo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/AVOI-CEO/avoi-agent/tree/main/skills/creative/architecture-diagram
Command: npx skills add https://github.com/AVOI-CEO/avoi-agent --skill architecture-diagram-avoi-ceo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generating consistent, publication-ready architecture diagrams typically requires tooling, time, and design polish; this skill delivers self-contained, dark-themed SVG diagrams as standalone HTML files with inline SVG.

Core Features & Use Cases

  • Standalone HTML outputs with inline SVG (no external dependencies) for easy sharing and offline viewing.
  • Semantic color mapping for frontend, backend, database, cloud, security, and message bus to produce clear infrastructure visuals.
  • Font and aesthetics: JetBrains Mono typography, grid background, and a dark aesthetic suitable for technical decks.
  • Use cases include software architecture maps, cloud/VPC topology, microservice/service-mesh diagrams, and database/API layer visuals.

Quick Start

Describe your system components and I will generate a standalone architecture diagram HTML file with inline SVG.

Frequently Asked Questions about architecture-diagram

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

FAQPage Schema
How do I generate a standalone architecture diagram in HTML without external dependencies?▼

You can generate a standalone architecture diagram by describing your system components to get a self-contained HTML file with inline SVG. This approach requires no external dependencies, allowing for easy sharing and offline viewing of your software architecture.

What is the best way to visualize cloud topology and microservice maps offline?▼

Visualizing cloud topology and microservice maps offline is best achieved by generating a self-contained HTML file with inline SVG. It uses semantic color mapping to distinguish cloud, backend, and message bus components, producing clear infrastructure visuals for technical presentations.

Can I use inline SVG to map database and API layers in a dark themed diagram?▼

Yes, you can use inline SVG to map database and API layers in a dark themed diagram. The generated HTML file features a dark aesthetic with JetBrains Mono typography and semantic color mapping to distinctly visualize database, API, and security components.

Does generating an SVG architecture diagram require any specific design tools or software?▼

Generating an SVG architecture diagram requires no specific design tools or software. It outputs a browser-friendly, standalone HTML file with inline SVG, so you only need to describe your system components and use a standard web browser to view the publication-ready result.

Why use a standalone HTML file instead of other diagram formats for software architecture?▼

Using a standalone HTML file for software architecture is ideal because it encapsulates inline SVG with zero external dependencies. This makes the diagram instantly browser-friendly, easily shareable offline, and free from the need for dedicated diagramming software or plugins.

Related Skills

Explore More Software Engineering Skills→
wukangcheng2944wukangcheng2944

architecture-diagram

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

Community
Advanced
PedroGiudicePedroGiudice
5

technical-doc-creator

Generate HTML technical documentation with syntax-highlighted code and SVG architecture diagrams.

Community
Intermediate
usepowershellusepowershell
9

worktree-pr-merge

Merge PRs sequentially across Git worktrees with rebase timing and dotnet restore.

Community
Advanced
rnbenrnben

architecture-diagram

Generate dark-themed architecture diagrams as standalone HTML files with inline SVG.

Community
Intermediate