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
3.0 KiB
3.0 KiB
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:
# 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:
- Maintain consistent color scheme
- Update component labels when architecture changes
- Keep network addresses and IPs accurate
- Document new components in this README
- 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