Sankofa/docs/architecture/system-overview.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800">
  <defs>
    <style>
      .component { fill: #4A90E2; stroke: #2E5C8A; stroke-width: 2; }
      .cloudflare { fill: #F38020; stroke: #C85F00; }
      .proxmox { fill: #E57000; stroke: #B85900; }
      .k8s { fill: #326CE5; stroke: #1E4A8A; }
      .portal { fill: #00D4AA; stroke: #00A888; }
      .text { font-family: Arial, sans-serif; font-size: 12px; fill: #333; }
      .title { font-size: 16px; font-weight: bold; }
      .arrow { stroke: #666; stroke-width: 2; fill: none; marker-end: url(#arrowhead); }
    </style>
    <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
      <polygon points="0 0, 10 3, 0 6" fill="#666" />
    </marker>
  </defs>
  
  <!-- Title -->
  <text x="600" y="30" text-anchor="middle" class="text title">Hybrid Cloud Control Plane - System Overview</text>
  
  <!-- Cloudflare Layer -->
  <rect x="50" y="60" width="1100" height="100" class="cloudflare" rx="5"/>
  <text x="600" y="85" text-anchor="middle" class="text title" fill="white">Cloudflare Zero Trust Layer</text>
  <text x="200" y="110" text-anchor="middle" class="text" fill="white">Access Policies</text>
  <text x="400" y="110" text-anchor="middle" class="text" fill="white">Tunnels</text>
  <text x="600" y="110" text-anchor="middle" class="text" fill="white">Gateway</text>
  <text x="800" y="110" text-anchor="middle" class="text" fill="white">WARP</text>
  <text x="1000" y="110" text-anchor="middle" class="text" fill="white">DNS</text>
  
  <!-- Portal Layer -->
  <rect x="50" y="200" width="300" height="120" class="portal" rx="5"/>
  <text x="200" y="230" text-anchor="middle" class="text title" fill="white">Custom Portal</text>
  <text x="200" y="250" text-anchor="middle" class="text" fill="white">Next.js + React</text>
  <text x="200" y="270" text-anchor="middle" class="text" fill="white">Keycloak Auth</text>
  <text x="200" y="290" text-anchor="middle" class="text" fill="white">RBAC UI</text>
  
  <!-- Control Plane -->
  <rect x="400" y="200" width="750" height="120" class="k8s" rx="5"/>
  <text x="775" y="230" text-anchor="middle" class="text title" fill="white">Kubernetes Control Plane (RKE2/k3s)</text>
  <rect x="420" y="240" width="140" height="60" class="component" rx="3"/>
  <text x="490" y="265" text-anchor="middle" class="text" fill="white">Rancher</text>
  <rect x="580" y="240" width="140" height="60" class="component" rx="3"/>
  <text x="650" y="265" text-anchor="middle" class="text" fill="white">Crossplane</text>
  <rect x="740" y="240" width="140" height="60" class="component" rx="3"/>
  <text x="810" y="265" text-anchor="middle" class="text" fill="white">ArgoCD</text>
  <rect x="900" y="240" width="140" height="60" class="component" rx="3"/>
  <text x="970" y="265" text-anchor="middle" class="text" fill="white">Vault</text>
  
  <!-- Observability -->
  <rect x="50" y="360" width="300" height="100" class="component" rx="5"/>
  <text x="200" y="385" text-anchor="middle" class="text title" fill="white">Observability Stack</text>
  <text x="200" y="410" text-anchor="middle" class="text" fill="white">Prometheus</text>
  <text x="200" y="430" text-anchor="middle" class="text" fill="white">Grafana</text>
  <text x="200" y="450" text-anchor="middle" class="text" fill="white">Loki</text>
  
  <!-- Identity -->
  <rect x="400" y="360" width="200" height="100" class="component" rx="5"/>
  <text x="500" y="385" text-anchor="middle" class="text title" fill="white">Identity</text>
  <text x="500" y="410" text-anchor="middle" class="text" fill="white">Keycloak</text>
  <text x="500" y="430" text-anchor="middle" class="text" fill="white">OIDC Provider</text>
  <text x="500" y="450" text-anchor="middle" class="text" fill="white">MFA + SSO</text>
  
  <!-- GitOps -->
  <rect x="650" y="360" width="200" height="100" class="component" rx="5"/>
  <text x="750" y="385" text-anchor="middle" class="text title" fill="white">GitOps</text>
  <text x="750" y="410" text-anchor="middle" class="text" fill="white">ArgoCD</text>
  <text x="750" y="430" text-anchor="middle" class="text" fill="white">Git Repository</text>
  <text x="750" y="450" text-anchor="middle" class="text" fill="white">Kustomize</text>
  
  <!-- Proxmox Sites -->
  <rect x="900" y="360" width="250" height="100" class="proxmox" rx="5"/>
  <text x="1025" y="385" text-anchor="middle" class="text title" fill="white">Proxmox Sites</text>
  <text x="1025" y="410" text-anchor="middle" class="text" fill="white">Site 1 (US-East)</text>
  <text x="1025" y="430" text-anchor="middle" class="text" fill="white">Site 2 (EU-West)</text>
  <text x="1025" y="450" text-anchor="middle" class="text" fill="white">Site N (Global)</text>
  
  <!-- Edge Infrastructure -->
  <rect x="50" y="500" width="1100" height="250" class="proxmox" rx="5"/>
  <text x="600" y="530" text-anchor="middle" class="text title" fill="white">Edge Infrastructure - Proxmox VE Clusters</text>
  
  <!-- Site 1 -->
  <rect x="100" y="560" width="300" height="160" class="component" rx="5"/>
  <text x="250" y="585" text-anchor="middle" class="text title" fill="white">Proxmox Site 1</text>
  <rect x="120" y="600" width="120" height="100" class="k8s" rx="3"/>
  <text x="180" y="630" text-anchor="middle" class="text" fill="white">Node 1</text>
  <text x="180" y="650" text-anchor="middle" class="text" fill="white">VMs</text>
  <text x="180" y="670" text-anchor="middle" class="text" fill="white">Ceph</text>
  <rect x="260" y="600" width="120" height="100" class="k8s" rx="3"/>
  <text x="320" y="630" text-anchor="middle" class="text" fill="white">Node 2</text>
  <text x="320" y="650" text-anchor="middle" class="text" fill="white">VMs</text>
  <text x="320" y="670" text-anchor="middle" class="text" fill="white">Ceph</text>
  
  <!-- Site 2 -->
  <rect x="450" y="560" width="300" height="160" class="component" rx="5"/>
  <text x="600" y="585" text-anchor="middle" class="text title" fill="white">Proxmox Site 2</text>
  <rect x="470" y="600" width="120" height="100" class="k8s" rx="3"/>
  <text x="530" y="630" text-anchor="middle" class="text" fill="white">Node 1</text>
  <text x="530" y="650" text-anchor="middle" class="text" fill="white">VMs</text>
  <text x="530" y="670" text-anchor="middle" class="text" fill="white">ZFS</text>
  <rect x="610" y="600" width="120" height="100" class="k8s" rx="3"/>
  <text x="670" y="630" text-anchor="middle" class="text" fill="white">Node 2</text>
  <text x="670" y="650" text-anchor="middle" class="text" fill="white">VMs</text>
  <text x="670" y="670" text-anchor="middle" class="text" fill="white">ZFS</text>
  
  <!-- Site 3 -->
  <rect x="800" y="560" width="300" height="160" class="component" rx="5"/>
  <text x="950" y="585" text-anchor="middle" class="text title" fill="white">Proxmox Site 3</text>
  <rect x="820" y="600" width="120" height="100" class="k8s" rx="3"/>
  <text x="880" y="630" text-anchor="middle" class="text" fill="white">Node 1</text>
  <text x="880" y="650" text-anchor="middle" class="text" fill="white">VMs</text>
  <text x="880" y="670" text-anchor="middle" class="text" fill="white">Storage</text>
  <rect x="960" y="600" width="120" height="100" class="k8s" rx="3"/>
  <text x="1020" y="630" text-anchor="middle" class="text" fill="white">Node 2</text>
  <text x="1020" y="650" text-anchor="middle" class="text" fill="white">VMs</text>
  <text x="1020" y="670" text-anchor="middle" class="text" fill="white">Storage</text>
  
  <!-- Arrows -->
  <line x1="200" y1="200" x2="200" y2="160" class="arrow"/>
  <line x1="400" y1="260" x2="350" y2="260" class="arrow"/>
  <line x1="775" y1="200" x2="775" y2="160" class="arrow"/>
  <line x1="200" y1="320" x2="200" y2="360" class="arrow"/>
  <line x1="500" y1="320" x2="500" y2="360" class="arrow"/>
  <line x1="750" y1="320" x2="750" y2="360" class="arrow"/>
  <line x1="1025" y1="360" x2="1025" y2="560" class="arrow"/>
  <line x1="250" y1="560" x2="250" y2="500" class="arrow"/>
  <line x1="600" y1="560" x2="600" y2="500" class="arrow"/>
  <line x1="950" y1="560" x2="950" y2="500" class="arrow"/>
  
  <!-- Cloudflare Tunnel Connections -->
  <line x1="400" y1="110" x2="250" y2="560" class="arrow" stroke-dasharray="5,5" stroke="#F38020"/>
  <line x1="400" y1="110" x2="600" y2="560" class="arrow" stroke-dasharray="5,5" stroke="#F38020"/>
  <line x1="400" y1="110" x2="950" y2="560" class="arrow" stroke-dasharray="5,5" stroke="#F38020"/>
</svg>