# Architecture Diagrams

This directory contains comprehensive architecture diagrams for the Hybrid Cloud Control Plane system.

## Diagrams

### 1. System Overview (`system-overview.svg`)
High-level view of all system components and their relationships:
- Cloudflare Zero Trust Layer
- Custom Portal (Next.js)
- Kubernetes Control Plane
- Observability Stack
- Identity Management (Keycloak)
- GitOps (ArgoCD)
- Proxmox Edge Sites

### 2. Data Flow (`data-flow.svg`)
Detailed data flow diagrams showing:
- **Authentication Flow**: User → Cloudflare Access → Portal → Keycloak
- **VM Provisioning Flow**: User → Portal → Crossplane → ArgoCD → Proxmox Provider → Proxmox Site
- **Monitoring Flow**: Proxmox Node → pve-exporter → Prometheus → Grafana → Portal
- **Log Aggregation Flow**: Services → Promtail → Loki → Portal
- **GitOps Deployment Flow**: Developer → Git Repo → ArgoCD → Kubernetes → Crossplane → Infrastructure

### 3. Network Topology (`network-topology.svg`)
Network architecture showing:
- Internet connectivity
- Cloudflare Global Network (200+ edge locations)
- Control Plane site with all services
- Three Proxmox sites (US-East, EU-West, APAC)
- Cloudflare Tunnels connecting all sites
- Local network addressing (10.0.0.0/16, 10.1.0.0/16, etc.)
- Security features (Zero Trust, no public IPs, encrypted tunnels)

### 4. Deployment Diagram (`deployment-diagram.svg`)
Infrastructure layout showing:
- **Control Plane Cluster**: 3 master nodes, 3 worker nodes, shared storage
- **Proxmox Site 1**: 3 nodes with Ceph storage cluster (200TB)
- **Proxmox Site 2**: 3 nodes with ZFS storage pools (80TB)
- **Proxmox Site 3**: 2 nodes with local storage (40TB)
- **Network Infrastructure**: Load balancers, routers, DNS, NTP, monitoring, backup
- **Cloudflare Tunnel Agents**: Per-site tunnel configurations

## Viewing the Diagrams

These SVG files can be viewed in:
- Web browsers (Chrome, Firefox, Safari, Edge)
- Vector graphics editors (Inkscape, Adobe Illustrator)
- Documentation tools (GitHub, GitLab, Confluence)
- VS Code with SVG preview extensions

## Generating PNG Versions

To convert SVG to PNG for presentations:

```bash
# Using Inkscape
inkscape --export-type=png --export-width=2400 system-overview.svg

# Using ImageMagick
convert -density 300 system-overview.svg system-overview.png

# Using rsvg-convert
rsvg-convert -w 2400 system-overview.svg > system-overview.png
```

## Diagram Maintenance

When updating diagrams:
1. Maintain consistent color scheme
2. Update component labels when architecture changes
3. Keep network addresses and IPs accurate
4. Document new components in this README
5. Export PNG versions for presentations if needed

## Color Scheme

- **Blue (#326CE5)**: Kubernetes components
- **Orange (#F38020)**: Cloudflare services
- **Orange (#E57000)**: Proxmox infrastructure
- **Teal (#00D4AA)**: Portal and UI components
- **Red (#E74C3C)**: Authentication/Identity
- **Gray (#34495E)**: Servers and infrastructure
- **Light Gray (#ECF0F1)**: Network segments