skills.rest
dawsonblock
dawsonblockCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

Generate dark-themed architecture diagrams as standalone HTML files from system descriptions.

Updated Apr 26, 2026
Search Tags:#architecture#html#security#visualization#cloud#svg#diagrams
One-click install
npx skills add https://github.com/dawsonblock/HERMY --skill architecture-diagram-dawsonblock
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/dawsonblock/HERMY/tree/main/hermes-agent-2026.4.23/skills/creative/architecture-diagram
Command: npx skills add https://github.com/dawsonblock/HERMY --skill architecture-diagram-dawsonblock

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate professional architecture diagrams as standalone HTML files from system descriptions.

Core Features & Use Cases

  • Generate dark-themed SVG diagrams with inline HTML output.
  • Support semantic color coding for frontend/backend/database/cloud/security and a JetBrains Mono font.
  • Use case: rapidly visualize software architectures, cloud topologies, or service meshes for architecture reviews.

Quick Start

Describe your system architecture and run the diagram generator to produce a dark-themed 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 generate an architecture diagram from a text description?▼

You can generate an architecture diagram by providing a text description of your software system, which produces a standalone HTML file containing a dark-themed SVG visual of the topology.

Can I create a cloud topology diagram that works offline?▼

Yes, you can create an offline cloud topology diagram because the tool outputs standalone HTML files with inline SVG and embedded fonts, requiring no external dependencies to render.

Does the generated SVG diagram support security boundary visualization?▼

Yes, the generated SVG diagram supports security boundary visualization through semantic color coding designed to distinguish frontend, backend, database, cloud, and security components.

What is the best way to visualize a microservice architecture for reviews?▼

The best way to visualize microservice architecture for reviews is generating a standalone HTML diagram, providing a shareable document with a header, visual summary, and footer.

Do I need external libraries to render my generated software architecture diagram?▼

No, you do not need external libraries to render your software architecture diagram because the output is a standalone HTML file using inline SVG and the JetBrains Mono font.

How does semantic color coding work in software architecture diagrams?▼

Semantic color coding in software architecture diagrams works by applying distinct colors to frontend, backend, database, cloud, and security elements, ensuring visual clarity for system components.

Related Skills

Explore More Software Engineering Skills→
PiaoxuemoliPiaoxuemoli

architecture-diagram

Generate dark-themed HTML architecture diagrams with inline SVG.

Community
Intermediate
samuelmukotisamuelmukoti

architecture-diagram

Generate standalone HTML architecture diagrams with inline SVG.

Community
Advanced
nist0nist0

threat-modeling

Automate STRIDE threat modeling to enumerate assets, map trust boundaries, and suggest mitigations.

Community
Advanced
liumeixinliumeixin
4

architecture-diagram

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

Community
Intermediate