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

Make diagram customer-friendly: remove internal source note, center title, improve landscape PDF layout

Browse Source
This commit is contained in:
TNB
2026-07-07 09:46:28 -04:00
parent 8cf2c5f195
commit 15afcfcbe5
2 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TallyFlow/TallyFlow-Architecture-Diagram.html
+27 -27
View File
@@ -15,21 +15,21 @@
color: white;
}
.container { max-width: 1200px; margin: 0 auto; }
.header { margin-bottom: 2rem; }
.header-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.header { margin-bottom: 2rem; text-align: center; }
.header-row { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.5rem; }
.pulse-dot {
width: 12px; height: 12px; background: #22d3ee;
border-radius: 50%; animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; }
.subtitle { color: #94a3b8; font-size: 0.875rem; margin-left: 1.75rem; }
.subtitle { color: #94a3b8; font-size: 0.875rem; }
.diagram-container {
background: rgba(15, 23, 42, 0.5);
border-radius: 1rem; border: 1px solid #1e293b;
padding: 1.5rem; overflow-x: auto;
}
svg { width: 100%; min-width: 980px; display: block; }
svg { width: 100%; min-width: 1000px; display: block; }
.cards {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem; margin-top: 2rem;
@@ -59,11 +59,11 @@
<div class="pulse-dot"></div>
<h1>TallyFlow Architecture</h1>
</div>
<p class="subtitle">5 Core Components • Source-verified from ~/src</p>
<p class="subtitle">Manufacturing Asset Tracking &amp; RFID Workflow Platform</p>
</div>
<div class="diagram-container">
<svg viewBox="0 0 1000 640">
<svg viewBox="0 0 1100 640" width="1100" height="640">
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />
@@ -80,34 +80,34 @@
<rect width="100%" height="100%" fill="url(#grid)" />
<!-- ========== CORE (Central, owns DB) ========== -->
<rect x="180" y="50" width="640" height="310" rx="14" fill="rgba(6, 78, 59, 0.1)" stroke="#34d399" stroke-width="2.5"/>
<text x="200" y="75" fill="#34d399" font-size="13" font-weight="700">TallyFlow Core (Central Hub)</text>
<rect x="200" y="50" width="700" height="310" rx="14" fill="rgba(6, 78, 59, 0.1)" stroke="#34d399" stroke-width="2.5"/>
<text x="220" y="75" fill="#34d399" font-size="13" font-weight="700">TallyFlow Core (Central Hub)</text>
<!-- Core Web UI (Vue.js) - LEFT -->
<rect x="200" y="95" width="170" height="65" rx="8" fill="rgba(8, 51, 68, 0.55)" stroke="#22d3ee" stroke-width="2"/>
<text x="285" y="118" fill="white" font-size="12" font-weight="700" text-anchor="middle">Core Web UI</text>
<text x="285" y="134" fill="#94a3b8" font-size="9" text-anchor="middle">Vue.js 2</text>
<text x="285" y="148" fill="#22d3ee" font-size="8" text-anchor="middle">Uses Core API</text>
<rect x="220" y="95" width="170" height="65" rx="8" fill="rgba(8, 51, 68, 0.55)" stroke="#22d3ee" stroke-width="2"/>
<text x="305" y="118" fill="white" font-size="12" font-weight="700" text-anchor="middle">Core Web UI</text>
<text x="305" y="134" fill="#94a3b8" font-size="9" text-anchor="middle">Vue.js 2</text>
<text x="305" y="148" fill="#22d3ee" font-size="8" text-anchor="middle">Uses Core API</text>
<!-- Core Backend (Go) - CENTER -->
<rect x="390" y="95" width="190" height="65" rx="8" fill="rgba(6, 78, 59, 0.55)" stroke="#34d399" stroke-width="2"/>
<text x="485" y="118" fill="white" font-size="12" font-weight="700" text-anchor="middle">Core Backend</text>
<text x="485" y="134" fill="#94a3b8" font-size="9" text-anchor="middle">Go (REST API)</text>
<text x="485" y="148" fill="#34d399" font-size="8" text-anchor="middle">REST + WebSocket</text>
<rect x="410" y="95" width="190" height="65" rx="8" fill="rgba(6, 78, 59, 0.55)" stroke="#34d399" stroke-width="2"/>
<text x="505" y="118" fill="white" font-size="12" font-weight="700" text-anchor="middle">Core Backend</text>
<text x="505" y="134" fill="#94a3b8" font-size="9" text-anchor="middle">Go (REST API)</text>
<text x="505" y="148" fill="#34d399" font-size="8" text-anchor="middle">REST + WebSocket</text>
<!-- MongoDB (nested inside Core) - RIGHT -->
<rect x="600" y="95" width="200" height="65" rx="6" fill="rgba(76, 29, 149, 0.6)" stroke="#a78bfa" stroke-width="1.5"/>
<text x="700" y="118" fill="white" font-size="12" font-weight="700" text-anchor="middle">MongoDB</text>
<text x="700" y="134" fill="#c4b5fd" font-size="9" text-anchor="middle">Assets • Tags • Photos • Zones</text>
<text x="700" y="148" fill="#c4b5fd" font-size="8" text-anchor="middle">(owned by Core Backend)</text>
<rect x="620" y="95" width="260" height="65" rx="6" fill="rgba(76, 29, 149, 0.6)" stroke="#a78bfa" stroke-width="1.5"/>
<text x="750" y="118" fill="white" font-size="12" font-weight="700" text-anchor="middle">MongoDB</text>
<text x="750" y="134" fill="#c4b5fd" font-size="9" text-anchor="middle">Assets • Tags • Photos • Zones</text>
<text x="750" y="148" fill="#c4b5fd" font-size="8" text-anchor="middle">(owned by Core Backend)</text>
<!-- Auth Service (new) - no arrows -->
<rect x="200" y="175" width="200" height="55" rx="6" fill="rgba(136, 19, 55, 0.45)" stroke="#fb7185" stroke-width="1.5"/>
<text x="300" y="198" fill="white" font-size="12" font-weight="700" text-anchor="middle">Auth Service</text>
<text x="300" y="214" fill="#fb7185" font-size="9" text-anchor="middle">Login + SSO support</text>
<rect x="220" y="175" width="200" height="55" rx="6" fill="rgba(136, 19, 55, 0.45)" stroke="#fb7185" stroke-width="1.5"/>
<text x="320" y="198" fill="white" font-size="12" font-weight="700" text-anchor="middle">Auth Service</text>
<text x="320" y="214" fill="#fb7185" font-size="9" text-anchor="middle">Login + SSO support</text>
<!-- Core API label -->
<text x="500" y="250" fill="#34d399" font-size="9" text-anchor="middle" font-weight="600">Core API Layer — single integration point for all components</text>
<text x="550" y="250" fill="#34d399" font-size="9" text-anchor="middle" font-weight="600">Core API Layer — single integration point for all components</text>
<!-- ========== ASSETS (Mobile) - wrapped text ========== -->
<rect x="50" y="400" width="170" height="100" rx="10" fill="rgba(8, 51, 68, 0.5)" stroke="#22d3ee" stroke-width="2"/>
@@ -157,10 +157,10 @@
<text x="690" y="375" fill="#fb923c" font-size="9">Events (optional)</text>
<!-- Core Web UI uses Core Backend API (short arrow) -->
<line x1="372" y1="127" x2="388" y2="127" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowhead)"/>
<line x1="392" y1="127" x2="408" y2="127" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowhead)"/>
<!-- Core Backend owns MongoDB -->
<line x1="582" y1="127" x2="598" y2="127" stroke="#a78bfa" stroke-width="2" marker-end="url(#arrowhead)"/>
<line x1="602" y1="127" x2="618" y2="127" stroke="#a78bfa" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Legend -->
<text x="50" y="550" fill="white" font-size="10" font-weight="700">Legend</text>
@@ -250,7 +250,7 @@
</div>
<p class="footer">
TallyFlow • 5 components only • MongoDB nested inside Core • Print can register assets • Verified from source • 2026
TallyFlow • Manufacturing Asset Tracking &amp; RFID Workflow Platform
</p>
</div>
</body>