tblumer/obsidian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Center the Legend inside the SVG and ensure component cards row is centered

Browse Source
This commit is contained in:
TNB
2026-07-07 10:01:22 -04:00
parent 7878406529
commit 012395fa4f
1 changed files with 14 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TallyFlow/TallyFlow-Architecture-Diagram.html
+14 -15
View File
@@ -32,7 +32,6 @@
} }
svg { width: 100%; min-width: 1050px; display: block; } svg { width: 100%; min-width: 1050px; display: block; }
/* Centered row of component cards */
.components-row { .components-row {
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -173,26 +172,26 @@
<!-- Core Backend owns MongoDB --> <!-- Core Backend owns MongoDB -->
<line x1="602" y1="122" x2="618" y2="122" stroke="#a78bfa" stroke-width="2" marker-end="url(#arrowhead)"/> <line x1="602" y1="122" x2="618" y2="122" stroke="#a78bfa" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Legend --> <!-- Centered Legend -->
<text x="50" y="535" fill="white" font-size="10" font-weight="700">Legend</text> <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"/> <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="75" y="556" fill="#94a3b8" font-size="8">Core (Go + Vue.js + MongoDB)</text> <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"/> <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="275" y="556" fill="#94a3b8" font-size="8">Assets (Flutter)</text> <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"/> <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="400" y="556" fill="#94a3b8" font-size="8">Print (Flutter/Rust + UI)</text> <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"/> <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="545" y="556" fill="#94a3b8" font-size="8">Capture (Native)</text> <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"/> <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="675" y="556" fill="#94a3b8" font-size="8">IoT (Rust)</text> <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)"/> <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="815" y="556" fill="#94a3b8" font-size="8">Optional flow</text> <text x="325" y="574" fill="#94a3b8" font-size="8">Optional flow</text>
</svg> </svg>
</div> </div>