Revise MVK documentation: replace mermaid diagrams with images, add new sections for single node and three node viability, and enhance the usage slide with additional context.

pages/diagram-3node.md

@@ -8,33 +8,10 @@ The **V** in MVK is for *viable*, so why is MVK viable for 3 or more nodes ?
 
 <div class="grid grid-cols-1">
 
-```mermaid
-%%{init: {'theme': 'dark', 'themeVariables': { 'darkMode': true }}}%%
-flowchart LR
-    root((3-node))
-    PS[Persistent Storage]
-    LH[Longhorn]
-    ING[Ingress]
-    TRA[Traefik]
-    MET[cert-manager]
-    ETCD[etcd]
-    KA[keepalived]
-    
-    root --> PS --> LH
-    root --> ING --> TRA
-    ING --> MET
-    root --> ETCD --> KA
-    
-    classDef default fill:transparent,color:#fff,stroke:#888
-```
+<img src="/k8s-3.drawio.png">
 
 </div>
 
-<div v-click>
-
-close to production - storage and multi node 
-
-</div>
 
 <!--