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

Center the 4 component boxes in the SVG and embed TallyFlow icon as favicon

Browse Source
This commit is contained in:
TNB
2026-07-07 10:04:03 -04:00
parent 012395fa4f
commit abd2de59f9
1 changed files with 36 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TallyFlow/TallyFlow-Architecture-Diagram.html
+36 -42
View File
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TallyFlow Architecture Diagram</title>
<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAfQCAYAAACaOMR5AAAQAElEQVR4Aezd6Y9l6X0X8HNurd0zvUwv43EcnJAFCAIilBcgASEo" type="image/png">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
@@ -119,57 +120,50 @@
<!-- Core API label -->
<text x="550" y="245" fill="#34d399" font-size="9" text-anchor="middle" font-weight="600">Core API Layer — single integration point for all components</text>
<!-- ========== ASSETS (Mobile) ========== -->
<rect x="50" y="390" width="170" height="100" rx="10" fill="rgba(8, 51, 68, 0.5)" stroke="#22d3ee" stroke-width="2"/>
<text x="135" y="415" fill="white" font-size="13" font-weight="700" text-anchor="middle">Assets</text>
<text x="135" y="433" fill="#94a3b8" font-size="10" text-anchor="middle">(Mobile)</text>
<text x="135" y="451" fill="#22d3ee" font-size="9" text-anchor="middle">Flutter</text>
<text x="135" y="469" fill="#94a3b8" font-size="8" text-anchor="middle">Seek &amp; Find • Inventory</text>
<text x="135" y="482" fill="#94a3b8" font-size="8" text-anchor="middle">Enrollment</text>
<!-- Centered row of 4 boxes -->
<!-- Assets -->
<rect x="150" y="390" width="170" height="100" rx="10" fill="rgba(8, 51, 68, 0.5)" stroke="#22d3ee" stroke-width="2"/>
<text x="235" y="415" fill="white" font-size="13" font-weight="700" text-anchor="middle">Assets</text>
<text x="235" y="433" fill="#94a3b8" font-size="10" text-anchor="middle">(Mobile)</text>
<text x="235" y="451" fill="#22d3ee" font-size="9" text-anchor="middle">Flutter</text>
<text x="235" y="469" fill="#94a3b8" font-size="8" text-anchor="middle">Seek &amp; Find • Inventory</text>
<text x="235" y="482" fill="#94a3b8" font-size="8" text-anchor="middle">Enrollment</text>
<!-- ========== PRINT ========== -->
<rect x="260" y="390" width="180" height="100" rx="10" fill="rgba(120, 53, 15, 0.45)" stroke="#fbbf24" stroke-width="2"/>
<text x="350" y="415" fill="white" font-size="13" font-weight="700" text-anchor="middle">Print</text>
<text x="350" y="433" fill="#94a3b8" font-size="10" text-anchor="middle">Flutter + Rust</text>
<text x="350" y="451" fill="#fbbf24" font-size="9" text-anchor="middle">Zebra ZPL • RFID</text>
<text x="350" y="469" fill="#94a3b8" font-size="8" text-anchor="middle">Print UI + API • Registers assets</text>
<!-- Print -->
<rect x="360" y="390" width="180" height="100" rx="10" fill="rgba(120, 53, 15, 0.45)" stroke="#fbbf24" stroke-width="2"/>
<text x="450" y="415" fill="white" font-size="13" font-weight="700" text-anchor="middle">Print</text>
<text x="450" y="433" fill="#94a3b8" font-size="10" text-anchor="middle">Flutter + Rust</text>
<text x="450" y="451" fill="#fbbf24" font-size="9" text-anchor="middle">Zebra ZPL • RFID</text>
<text x="450" y="469" fill="#94a3b8" font-size="8" text-anchor="middle">Print UI + API • Registers assets</text>
<!-- ========== CAPTURE (native) ========== -->
<rect x="490" y="390" width="170" height="100" rx="10" fill="rgba(136, 19, 55, 0.45)" stroke="#fb7185" stroke-width="2"/>
<text x="575" y="418" fill="white" font-size="13" font-weight="700" text-anchor="middle">Capture</text>
<text x="575" y="436" fill="#94a3b8" font-size="10" text-anchor="middle">(PhotoTag)</text>
<text x="575" y="454" fill="#fb7185" font-size="9" text-anchor="middle">Native App</text>
<text x="575" y="470" fill="#94a3b8" font-size="8" text-anchor="middle">Photo + Barcode QC</text>
<!-- Capture -->
<rect x="590" y="390" width="170" height="100" rx="10" fill="rgba(136, 19, 55, 0.45)" stroke="#fb7185" stroke-width="2"/>
<text x="675" y="418" fill="white" font-size="13" font-weight="700" text-anchor="middle">Capture</text>
<text x="675" y="436" fill="#94a3b8" font-size="10" text-anchor="middle">(PhotoTag)</text>
<text x="675" y="454" fill="#fb7185" font-size="9" text-anchor="middle">Native App</text>
<text x="675" y="470" fill="#94a3b8" font-size="8" text-anchor="middle">Photo + Barcode QC</text>
<!-- ========== IoT ========== -->
<rect x="720" y="390" width="180" height="100" rx="10" fill="rgba(251, 146, 60, 0.4)" stroke="#fb923c" stroke-width="2"/>
<text x="810" y="418" fill="white" font-size="13" font-weight="700" text-anchor="middle">IoT</text>
<text x="810" y="436" fill="#94a3b8" font-size="10" text-anchor="middle">Rust</text>
<text x="810" y="454" fill="#fb923c" font-size="9" text-anchor="middle">Fixed Readers • Sensors</text>
<text x="810" y="470" fill="#94a3b8" font-size="8" text-anchor="middle">MQTT / HTTP • ERP integration</text>
<!-- IoT -->
<rect x="820" y="390" width="180" height="100" rx="10" fill="rgba(251, 146, 60, 0.4)" stroke="#fb923c" stroke-width="2"/>
<text x="910" y="418" fill="white" font-size="13" font-weight="700" text-anchor="middle">IoT</text>
<text x="910" y="436" fill="#94a3b8" font-size="10" text-anchor="middle">Rust</text>
<text x="910" y="454" fill="#fb923c" font-size="9" text-anchor="middle">Fixed Readers • Sensors</text>
<text x="910" y="470" fill="#94a3b8" font-size="8" text-anchor="middle">MQTT / HTTP • ERP integration</text>
<!-- ========== CONNECTIONS ========== -->
<!-- CONNECTIONS -->
<line x1="322" y1="430" x2="380" y2="355" stroke="#22d3ee" stroke-width="2" marker-end="url(#arrowhead)"/>
<text x="335" y="385" fill="#22d3ee" font-size="9" font-weight="600">API Sync</text>
<!-- Assets → Core (solid) -->
<line x1="222" y1="430" x2="280" y2="355" stroke="#22d3ee" stroke-width="2" marker-end="url(#arrowhead)"/>
<text x="235" y="385" fill="#22d3ee" font-size="9" font-weight="600">API Sync</text>
<line x1="450" y1="388" x2="530" y2="355" stroke="#fbbf24" stroke-width="2" marker-end="url(#arrowhead)"/>
<text x="465" y="372" fill="#fbbf24" font-size="9">Print Jobs + Asset Reg</text>
<!-- Print → Core (solid) -->
<line x1="350" y1="388" x2="430" y2="355" stroke="#fbbf24" stroke-width="2" marker-end="url(#arrowhead)"/>
<text x="365" y="372" fill="#fbbf24" font-size="9">Print Jobs + Asset Reg</text>
<line x1="675" y1="388" x2="675" y2="355" stroke="#fb7185" stroke-width="2" marker-end="url(#arrowhead)"/>
<text x="690" y="372" fill="#fb7185" font-size="9">Photos + Metadata</text>
<!-- Capture → Core (solid) -->
<line x1="575" y1="388" x2="575" y2="355" stroke="#fb7185" stroke-width="2" marker-end="url(#arrowhead)"/>
<text x="590" y="372" fill="#fb7185" font-size="9">Photos + Metadata</text>
<line x1="910" y1="388" x2="710" y2="355" stroke="#fb923c" stroke-width="2" stroke-dasharray="5,4" marker-end="url(#arrowhead-dashed)"/>
<text x="790" y="365" fill="#fb923c" font-size="9">Events (optional)</text>
<!-- IoT → Core (dashed, optional) -->
<line x1="810" y1="388" x2="610" y2="355" stroke="#fb923c" stroke-width="2" stroke-dasharray="5,4" marker-end="url(#arrowhead-dashed)"/>
<text x="690" y="365" fill="#fb923c" font-size="9">Events (optional)</text>
<!-- Core Web UI uses Core Backend API -->
<line x1="392" y1="122" x2="408" y2="122" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowhead)"/>
<!-- Core Backend owns MongoDB -->
<line x1="602" y1="122" x2="618" y2="122" stroke="#a78bfa" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Centered Legend -->