---
name: infrastructure-diagrams
description: "Build and maintain service dependency diagrams for IT Pro Partner infrastructure — SVG-based architecture maps showing servers, services, cron jobs, email accounts, and dependencies. Generated as self-contained HTML with dark theme."
version: 1.0.0
author: Sho'Nuff
platforms: [linux]
metadata:
  hermes:
    tags: [infrastructure, diagram, dependency, svg, html, architecture]
---

# Infrastructure Dependency Diagrams

Generate dark-themed SVG dependency diagrams as self-contained HTML files. Design system based on the `architecture-diagram` skill (Cocoon AI style) with modifications for infra-specific layouts.

## When to create or update

- After adding/removing a server, cron job, email account, or external dependency
- After the user explicitly asks about the dependency map
- Before making changes to understand service blast radius
- When user says "keep the diagram updated"

## Diagram structure (7 layers)

1. **External / Users** — Germaine, Telegram Bot
2. **Messaging / Provider** — Hermes Gateway, admin-ai (LiteLLM)
3. **Core Services** — Hermes Agent, Cron Scheduler
4. **Mail Services** — Each email account with its triage/watchdog schedule
5. **Storage & Backups** — Wasabi S3 buckets
6. **Standby & External** — Hetzner standby, pending migrations
7. **Config / Secrets** — config.yaml, .env, Skills/Memory, Vaultwarden
8. **User VPS** — Tony's CPX21 (Ashburn), standalone Hermes with local Llama fallback

## Color palette

- Hermes Core: cyan (#22d3ee), fill rgba(8,51,68,0.4)
- System Service: emerald (#34d399), fill rgba(6,78,59,0.4)
- Email Account: violet (#a78bfa), fill rgba(76,29,149,0.4)
- External Service: amber (#fbbf24), fill rgba(120,53,15,0.3)
- Security / Standby: rose (#fb7185), fill rgba(136,19,55,0.3-0.06)
- External/Generic: slate (#94a3b8), fill rgba(30,41,59,0.5)
- Cloudflare: amber (#fbbf24) -- already matches the External Service color

## File location

Save to `/root/portal-mockup/dependency-diagram.html`. Serve via Tailscale at the existing `/portal` path alongside other mockups.

## Info cards (3 below diagram)

1. **Hermes Core** — Models used, gateway status, cron job count
2. **External Dependencies** — admin-ai, Wasabi S3, MXroute, Tailscale
3. **Single Points of Failure** — What breaks if each external service goes down

## Updating the diagram

After infrastructure changes:
1. Re-open the existing HTML file
2. Update SVG element positions/connections
3. Update info card content
4. Update the subtitle date
5. Save with the same filename
6. The Tailscale Serve path stays valid automatically

## Full dependency reference

The authoritative current-state snapshot lives at `/root/.hermes/references/infrastructure-dependency-snapshot.md`. Update this file whenever infrastructure changes — it provides the source data for regenerating the SVG diagram without re-scanning every service from scratch.

## Keep the diagram updated

This user explicitly said "refer to the your diagram and keep it updated." Treat the diagram as a living document. After any infrastructure change (server added/removed, new cron job, new email account), update the SVG and the dependency snapshot file.