skills.rest
lucasfth
lucasfthCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

architecture-diagram

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

1|Updated Apr 30, 2025
Search Tags:#html#offline#cloud#infrastructure#svg#diagram#architecture-diagram
One-click install
npx skills add https://github.com/lucasfth/config --skill architecture-diagram-lucasfth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/lucasfth/config/tree/main/.hermes/skills/creative/architecture-diagram
Command: npx skills add https://github.com/lucasfth/config --skill architecture-diagram-lucasfth

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill generates dark-themed architecture diagrams as standalone HTML files with inline SVG, enabling offline viewing and sharing without external tools.

Core Features & Use Cases

  • Offline diagram generation: Produce self-contained HTML/SVG diagrams of software systems and cloud infrastructure.
  • Semantic visual language: Color mapping for frontend/backend/database/cloud/security/messaging with a clean design.
  • Use Case: Create architecture diagrams for deployment diagrams, service maps, or security diagrams for technical decks.

Quick Start

Describe your system architecture and run the generator to produce a standalone HTML diagram.

Frequently Asked Questions about architecture-diagram

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

FAQPage Schema
How do I create offline architecture diagrams for cloud infrastructure?▼

You can create offline architecture diagrams by generating standalone HTML files with inline SVG. This method renders software systems and cloud infrastructure without needing external libraries or active internet connections.

What is the best way to generate a dark-themed service map for a technical deck?▼

Generating a dark-themed service map is best achieved using semantic color mapping for frontend, backend, database, and security components. This produces clean HTML diagrams suitable for technical presentations.

Does this HTML SVG diagram generator require any external dependencies?▼

This HTML SVG diagram generator requires zero external dependencies. It utilizes a no-dependency rendering flow to produce self-contained files, ensuring diagrams remain fully viewable offline.

Can I use inline SVG to map microservice topologies in a standalone HTML file?▼

Yes, you can map microservice topologies using inline SVG within a standalone HTML file. The generator supports microservice maps and network topologies, featuring a configurable grid background.

How do I visually differentiate security and messaging components in an SVG architecture diagram?▼

You differentiate security and messaging components using semantic color mapping. The visual language assigns specific colors to frontend, backend, database, cloud, security, and messaging layers for clear distinction.

Related Skills

Explore More Software Engineering Skills→
HuskyDannyHuskyDanny

architecture-diagram

Generate standalone HTML/SVG system architecture diagrams from text descriptions.

Community
Basic
lenadlmlenadlm

architecture-diagram

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

Community
Intermediate
Strategic-AutomationStrategic-Automation
6

architecture-diagram

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

Official
Intermediate
VictorHueniVictorHueni

arch-plantuml

Initialize a PlantUML diagram workspace with a Docker render pipeline for SVG output.

Community
Intermediate