skills.rest
AlexiosBluffMara
AlexiosBluffMaraCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

Generate standalone HTML architecture diagrams with inline SVG.

2|Updated Apr 25, 2026
Search Tags:#architecture#html#visualization#cloud#infrastructure#svg#diagrams
One-click install
npx skills add https://github.com/AlexiosBluffMara/mercury --skill architecture-diagram-alexiosbluffmara
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/AlexiosBluffMara/mercury/tree/main/skills/creative/architecture-diagram
Command: npx skills add https://github.com/AlexiosBluffMara/mercury --skill architecture-diagram-alexiosbluffmara

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and engineers often need quick, consistent visualizations of complex software and cloud architectures for presentations and documentation. This Skill generates self-contained, dark-themed architecture diagrams as standalone HTML files with inline SVG, avoiding external dependencies and toolchain setup.

Core Features & Use Cases

  • Generates standalone HTML diagrams with inline SVG and a grid-based dark aesthetic, suitable for software stacks, cloud topologies, microservice maps, and security layouts.
  • Uses semantic color mapping (Frontend, Backend, Database, Cloud, Security, Message Bus) and JetBrains Mono font to ensure clear, publication-ready visuals.
  • Outputs a single portable HTML file that works offline in any modern browser for quick sharing and inline customization.

Quick Start

Describe your system and run the diagram generator to produce a standalone HTML diagram you can open in any browser.

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 a cloud infrastructure?▼

To generate an SVG architecture diagram, describe your software or cloud system and run the generator to produce a standalone HTML file with inline SVG that opens in any browser.

Can I create a standalone HTML architecture diagram without external dependencies?▼

Yes, you can create a standalone HTML diagram without external dependencies. The output is a self-contained file using inline SVG and JetBrains Mono that works offline in any modern browser.

What is the best way to visualize microservice maps for documentation?▼

The best way to visualize microservice maps is generating a dark-themed HTML file with inline SVG. It uses semantic color mapping for frontend, backend, database, and message bus components to ensure clear visuals.

Does this architecture diagram generator support security layouts and multi-region cloud topologies?▼

Yes, this architecture diagram generator supports security layouts and multi-region cloud topologies. It handles frontend, backend, and database components across regions using semantic colors for each component type.

How do I customize the visual style of my generated software architecture diagram?▼

You can customize the visual style by editing the generated standalone HTML file directly. It uses a grid-based dark aesthetic with semantic color mapping and JetBrains Mono font for publication-ready visuals.

What are the limitations of using inline SVG for cloud infrastructure diagrams?▼

A limitation of using inline SVG for cloud infrastructure diagrams is that the output is a static standalone HTML file rather than an interactive dynamic application, though it remains fully portable and offline-capable.

Related Skills

Explore More Software Engineering Skills→
huidgehuidge
2

architecture-diagram

Generate dark-themed standalone SVG architecture diagrams as self-contained HTML files.

Community
Intermediate
AissenLiuAissenLiu

architecture-diagram

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

Community
Advanced
PytaichukBohdanPytaichukBohdan

architecture-diagram

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

Community
Advanced
xiaoquqixiaoquqi

architecture-diagram

Generate standalone HTML/SVG architecture diagrams from component descriptions.

Community
Intermediate