6f28146ac3
- Complete project structure with Next.js frontend - GraphQL API backend with Apollo Server - Portal application with NextAuth - Crossplane Proxmox provider - GitOps configurations - CI/CD pipelines - Testing infrastructure (Vitest, Jest, Go tests) - Error handling and monitoring - Security hardening - UI component library - Documentation
86 lines
3.0 KiB
Markdown
86 lines
3.0 KiB
Markdown
# 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
|
|
|