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; color: white;
} }
.container { max-width: 1200px; margin: 0 auto; } .container { max-width: 1200px; margin: 0 auto; }
.header { margin-bottom: 2rem; } .header { margin-bottom: 2rem; text-align: center; }
.header-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; } .header-row { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.5rem; }
.pulse-dot { .pulse-dot {
width: 12px; height: 12px; background: #22d3ee; width: 12px; height: 12px; background: #22d3ee;
border-radius: 50%; animation: pulse 2s infinite; border-radius: 50%; animation: pulse 2s infinite;
} }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; } 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 { .diagram-container {
background: rgba(15, 23, 42, 0.5); background: rgba(15, 23, 42, 0.5);
border-radius: 1rem; border: 1px solid #1e293b; border-radius: 1rem; border: 1px solid #1e293b;
padding: 1.5rem; overflow-x: auto; padding: 1.5rem; overflow-x: auto;
} }
svg { width: 100%; min-width: 980px; display: block; } svg { width: 100%; min-width: 1000px; display: block; }
.cards { .cards {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem; margin-top: 2rem; gap: 1rem; margin-top: 2rem;
@@ -59,11 +59,11 @@
<div class="pulse-dot"></div> <div class="pulse-dot"></div>
<h1>TallyFlow Architecture</h1> <h1>TallyFlow Architecture</h1>
</div> </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>
<div class="diagram-container"> <div class="diagram-container">
<svg viewBox="0 0 1000 640"> <svg viewBox="0 0 1100 640" width="1100" height="640">
<defs> <defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"> <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" /> <polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />
@@ -80,34 +80,34 @@
<rect width="100%" height="100%" fill="url(#grid)" /> <rect width="100%" height="100%" fill="url(#grid)" />
<!-- ========== CORE (Central, owns DB) ========== --> <!-- ========== 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"/> <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="200" y="75" fill="#34d399" font-size="13" font-weight="700">TallyFlow Core (Central Hub)</text> <text x="220" y="75" fill="#34d399" font-size="13" font-weight="700">TallyFlow Core (Central Hub)</text>
<!-- Core Web UI (Vue.js) - LEFT --> <!-- 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"/> <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="285" y="118" fill="white" font-size="12" font-weight="700" text-anchor="middle">Core Web UI</text> <text x="305" 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="305" 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> <text x="305" y="148" fill="#22d3ee" font-size="8" text-anchor="middle">Uses Core API</text>
<!-- Core Backend (Go) - CENTER --> <!-- 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"/> <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="485" y="118" fill="white" font-size="12" font-weight="700" text-anchor="middle">Core Backend</text> <text x="505" 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="505" 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> <text x="505" y="148" fill="#34d399" font-size="8" text-anchor="middle">REST + WebSocket</text>
<!-- MongoDB (nested inside Core) - RIGHT --> <!-- 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"/> <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="700" y="118" fill="white" font-size="12" font-weight="700" text-anchor="middle">MongoDB</text> <text x="750" 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="750" 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> <text x="750" y="148" fill="#c4b5fd" font-size="8" text-anchor="middle">(owned by Core Backend)</text>
<!-- Auth Service (new) - no arrows --> <!-- 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"/> <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="300" y="198" fill="white" font-size="12" font-weight="700" text-anchor="middle">Auth Service</text> <text x="320" 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> <text x="320" y="214" fill="#fb7185" font-size="9" text-anchor="middle">Login + SSO support</text>
<!-- Core API label --> <!-- 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 ========== --> <!-- ========== 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"/> <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> <text x="690" y="375" fill="#fb923c" font-size="9">Events (optional)</text>
<!-- Core Web UI uses Core Backend API (short arrow) --> <!-- 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 --> <!-- 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 --> <!-- Legend -->
<text x="50" y="550" fill="white" font-size="10" font-weight="700">Legend</text> <text x="50" y="550" fill="white" font-size="10" font-weight="700">Legend</text>
@@ -250,7 +250,7 @@
</div> </div>
<p class="footer"> <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> </p>
</div> </div>
</body> </body>
TallyFlow/TallyFlow-Architecture.md
+1 -1
View File
@@ -46,4 +46,4 @@ TallyFlow is built around exactly **five primary components**, with **Core** as
- **Print** additionally supports asset registration back into Core - **Print** additionally supports asset registration back into Core
- Core Web UI communicates with Core Backend via the same API used by other components - Core Web UI communicates with Core Backend via the same API used by other components
This structure was verified by reviewing the actual source repositories in `~/src/`. All external modules interact exclusively through Core’s REST API layer. All external modules interact exclusively through Core’s REST API layer.