Architecture diagram

Skill ed1son99/skills/skills/creative/architecture-diagram

Collection of Hermes Agent skills — 255 reusable AI agent workflows across 39 categories

Install

npx -y skills add ed1son99/skills --skill architecture-diagram

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Dark-themed SVG architecture/cloud/infra diagrams as HTML.

SKILL.md

5.5 KB, as published. Nobody here has run it

Architecture Diagram Skill

Generate professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics. No external tools, no API keys, no rendering libraries — just write the HTML file and open it in a browser.

Scope

Best suited for:

Software system architecture (frontend / backend / database layers)
Cloud infrastructure (VPC, regions, subnets, managed services)
Microservice / service-mesh topology
Database + API map, deployment diagrams
Anything with a tech-infra subject that fits a dark, grid-backed aesthetic

Look elsewhere first for:

Physics, chemistry, math, biology, or other scientific subjects
Physical objects (vehicles, hardware, anatomy, cross-sections)
Floor plans, narrative journeys, educational / textbook-style visuals
Hand-drawn whiteboard sketches (consider excalidraw)
Animated explainers (consider an animation skill)

If a more specialized skill is available for the subject, prefer that. If none fits, this skill can also serve as a general SVG diagram fallback — the output will just carry the dark tech aesthetic described below.

Based on Cocoon AI's architecture-diagram-generator (MIT).

Workflow

User describes their system architecture (components, connections, technologies)
Generate the HTML file following the design system below
Save with write_file to a .html file (e.g. ~/architecture-diagram.html)
User opens in any browser — works offline, no dependencies

Output Location

Save diagrams to a user-specified path, or default to the current working directory:

./[project-name]-architecture.html

Preview

After saving, suggest the user open it:

# macOS
open ./my-architecture.html
# Linux
xdg-open ./my-architecture.html

Design System & Visual Language

Color Palette (Semantic Mapping)

Use specific rgba fills and hex strokes to categorize components:

Component Type	Fill (rgba)	Stroke (Hex)
Frontend	`rgba(8, 51, 68, 0.4)`	`#22d3ee` (cyan-400)
Backend	`rgba(6, 78, 59, 0.4)`	`#34d399` (emerald-400)
Database	`rgba(76, 29, 149, 0.4)`	`#a78bfa` (violet-400)
AWS/Cloud	`rgba(120, 53, 15, 0.3)`	`#fbbf24` (amber-400)
Security	`rgba(136, 19, 55, 0.4)`	`#fb7185` (rose-400)
Message Bus	`rgba(251, 146, 60, 0.3)`	`#fb923c` (orange-400)
External	`rgba(30, 41, 59, 0.5)`	`#94a3b8` (slate-400)

Typography & Background

Font: JetBrains Mono (Monospace), loaded from Google Fonts
Sizes: 12px (Names), 9px (Sublabels), 8px (Annotations), 7px (Tiny labels)
Background: Slate-950 (#020617) with a subtle 40px grid pattern

<!-- Background Grid Pattern -->
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</pattern>

Technical Implementation Details

Component Rendering

Components are rounded rectangles (rx="6") with 1.5px strokes. To prevent arrows from showing through semi-transparent fills, use a double-rect masking technique:

Draw an opaque background rect (#0f172a)
Draw the semi-transparent styled rect on top

Connection Rules

Z-Order: Draw arrows early in the SVG (after the grid) so they render behind component boxes
Arrowheads: Defined via SVG markers
Security Flows: Use dashed lines in rose color (#fb7185)
Boundaries:
- Security Groups: Dashed (4,4), rose color
- Regions: Large dashed (8,4), amber color, rx="12"

Spacing & Layout Logic

Standard Height: 60px (Services); 80-120px (Large components)
Vertical Gap: Minimum 40px between components
Message Buses: Must be placed in the gap between services, not overlapping them
Legend Placement: CRITICAL. Must be placed outside all boundary boxes. Calculate the lowest Y-coordinate of all boundaries and place the legend at least 20px below it.

Document Structure

The generated HTML file follows a four-part layout:

Header: Title with a pulsing dot indicator and subtitle
Main SVG: The diagram contained within a rounded border card
Summary Cards: A grid of three cards below the diagram for high-level details
Footer: Minimal metadata

Info Card Pattern

<div class="card">
  <div class="card-header">
    <div class="card-dot cyan"></div>
    <h3>Title</h3>
  </div>
  <ul>
    <li>• Item one</li>
    <li>• Item two</li>
  </ul>
</div>

Output Requirements

Single File: One self-contained .html file
No External Dependencies: All CSS and SVG must be inline (except Google Fonts)
No JavaScript: Use pure CSS for any animations (like pulsing dots)
Compatibility: Must render correctly in any modern web browser

Template Reference

Load the full HTML template for the exact structure, CSS, and SVG component examples:

skill_view(name="architecture-diagram", file_path="templates/template.html")

The template contains working examples of every component type (frontend, backend, database, cloud, security), arrow styles (standard, dashed, curved), security groups, region boundaries, and the legend — use it as your structural reference when generating diagrams.