From 012395fa4f3fc5b6ad0f4fed9bec1c5fc2b4044a Mon Sep 17 00:00:00 2001
From: TNB <tnb@clawdad.local>
Date: Tue, 7 Jul 2026 10:01:22 -0400
Subject: [PATCH] Center the Legend inside the SVG and ensure component cards
 row is centered

---
 TallyFlow/TallyFlow-Architecture-Diagram.html | 29 +++++++++----------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/TallyFlow/TallyFlow-Architecture-Diagram.html b/TallyFlow/TallyFlow-Architecture-Diagram.html
index 2ffff34..642c05a 100644
--- a/TallyFlow/TallyFlow-Architecture-Diagram.html
+++ b/TallyFlow/TallyFlow-Architecture-Diagram.html
@@ -32,7 +32,6 @@
     }
     svg { width: 100%; min-width: 1050px; display: block; }
 
-    /* Centered row of component cards */
     .components-row {
       display: flex;
       justify-content: center;
@@ -173,26 +172,26 @@
         <!-- Core Backend owns MongoDB -->
         <line x1="602" y1="122" x2="618" y2="122" stroke="#a78bfa" stroke-width="2" marker-end="url(#arrowhead)"/>
 
-        <!-- Legend -->
-        <text x="50" y="535" fill="white" font-size="10" font-weight="700">Legend</text>
+        <!-- Centered Legend -->
+        <text x="550" y="535" fill="white" font-size="10" font-weight="700" text-anchor="middle">Legend</text>
         
-        <rect x="50" y="547" width="18" height="11" rx="2" fill="rgba(6, 78, 59, 0.55)" stroke="#34d399" stroke-width="1"/>
-        <text x="75" y="556" fill="#94a3b8" font-size="8">Core (Go + Vue.js + MongoDB)</text>
+        <rect x="300" y="547" width="18" height="11" rx="2" fill="rgba(6, 78, 59, 0.55)" stroke="#34d399" stroke-width="1"/>
+        <text x="325" y="556" fill="#94a3b8" font-size="8">Core (Go + Vue.js + MongoDB)</text>
         
-        <rect x="250" y="547" width="18" height="11" rx="2" fill="rgba(8, 51, 68, 0.5)" stroke="#22d3ee" stroke-width="1"/>
-        <text x="275" y="556" fill="#94a3b8" font-size="8">Assets (Flutter)</text>
+        <rect x="480" y="547" width="18" height="11" rx="2" fill="rgba(8, 51, 68, 0.5)" stroke="#22d3ee" stroke-width="1"/>
+        <text x="505" y="556" fill="#94a3b8" font-size="8">Assets (Flutter)</text>
         
-        <rect x="375" y="547" width="18" height="11" rx="2" fill="rgba(120, 53, 15, 0.45)" stroke="#fbbf24" stroke-width="1"/>
-        <text x="400" y="556" fill="#94a3b8" font-size="8">Print (Flutter/Rust + UI)</text>
+        <rect x="590" y="547" width="18" height="11" rx="2" fill="rgba(120, 53, 15, 0.45)" stroke="#fbbf24" stroke-width="1"/>
+        <text x="615" y="556" fill="#94a3b8" font-size="8">Print (Flutter/Rust + UI)</text>
         
-        <rect x="520" y="547" width="18" height="11" rx="2" fill="rgba(136, 19, 55, 0.45)" stroke="#fb7185" stroke-width="1"/>
-        <text x="545" y="556" fill="#94a3b8" font-size="8">Capture (Native)</text>
+        <rect x="720" y="547" width="18" height="11" rx="2" fill="rgba(136, 19, 55, 0.45)" stroke="#fb7185" stroke-width="1"/>
+        <text x="745" y="556" fill="#94a3b8" font-size="8">Capture (Native)</text>
         
-        <rect x="650" y="547" width="18" height="11" rx="2" fill="rgba(251, 146, 60, 0.4)" stroke="#fb923c" stroke-width="1"/>
-        <text x="675" y="556" fill="#94a3b8" font-size="8">IoT (Rust)</text>
+        <rect x="850" y="547" width="18" height="11" rx="2" fill="rgba(251, 146, 60, 0.4)" stroke="#fb923c" stroke-width="1"/>
+        <text x="875" y="556" fill="#94a3b8" font-size="8">IoT (Rust)</text>
         
-        <line x1="790" y1="552" x2="808" y2="552" stroke="#fb923c" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#arrowhead-dashed)"/>
-        <text x="815" y="556" fill="#94a3b8" font-size="8">Optional flow</text>
+        <line x1="300" y1="570" x2="318" y2="570" stroke="#fb923c" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#arrowhead-dashed)"/>
+        <text x="325" y="574" fill="#94a3b8" font-size="8">Optional flow</text>
       </svg>
     </div>