12.1 KB
architecture-diagram.html
{{define "architecture-diagram"}}
<!-- Desktop horizontal layout -->
<svg class="hidden md:block w-full h-80" viewBox="0 0 800 300" fill="none">
<!-- Left side: Data sources (all violet) -->
<g>
<rect x="20" y="40" width="100" height="50" rx="8" fill="#8b5cf6" fill-opacity="0.15" stroke="#8b5cf6" stroke-width="2"/>
<text x="70" y="70" text-anchor="middle" fill="#8b5cf6" font-size="12" font-weight="500">CRM Tools</text>
</g>
<g>
<rect x="20" y="120" width="100" height="50" rx="8" fill="#8b5cf6" fill-opacity="0.15" stroke="#8b5cf6" stroke-width="2"/>
<text x="70" y="150" text-anchor="middle" fill="#8b5cf6" font-size="12" font-weight="500">ERP Tools</text>
</g>
<g>
<rect x="20" y="200" width="100" height="50" rx="8" fill="#8b5cf6" fill-opacity="0.15" stroke="#8b5cf6" stroke-width="2"/>
<text x="70" y="230" text-anchor="middle" fill="#8b5cf6" font-size="12" font-weight="500">Automations</text>
</g>
<!-- Flowing lines from sources to API -->
<path d="M120 65 Q180 65 220 110" stroke="#8b5cf6" stroke-width="2" stroke-dasharray="8 4" class="arch-flow" fill="none"/>
<path d="M120 145 L220 145" stroke="#8b5cf6" stroke-width="2" stroke-dasharray="8 4" class="arch-flow" fill="none"/>
<path d="M120 225 Q180 225 220 180" stroke="#8b5cf6" stroke-width="2" stroke-dasharray="8 4" class="arch-flow" fill="none"/>
<!-- API Gateway -->
<rect x="220" y="100" width="80" height="90" rx="12" fill="#06b6d4" fill-opacity="0.1" stroke="#06b6d4" stroke-width="2"/>
<text x="260" y="140" text-anchor="middle" fill="#06b6d4" font-size="11" font-weight="600">REST</text>
<text x="260" y="157" text-anchor="middle" fill="#06b6d4" font-size="11" font-weight="600">API</text>
<!-- Bidirectional flow between API and Database -->
<path d="M300 130 C330 130 340 130 350 130" stroke="#06b6d4" stroke-width="2" stroke-dasharray="8 4" class="arch-flow" fill="none"/>
<path d="M350 160 C340 160 330 160 300 160" stroke="#06b6d4" stroke-width="2" stroke-dasharray="8 4" class="arch-flow" fill="none"/>
<!-- Central Database (single shape) -->
<path d="M350 110 C350 99 380 90 415 90 C450 90 480 99 480 110 L480 180 Q480 200 415 200 Q350 200 350 180 Z" fill="#06b6d4" fill-opacity="0.15" stroke="#06b6d4" stroke-width="2"/>
<ellipse cx="415" cy="110" rx="65" ry="20" fill="none" stroke="#06b6d4" stroke-width="2"/>
<ellipse cx="415" cy="180" rx="65" ry="20" fill="none" stroke="#06b6d4" stroke-width="2" stroke-opacity="0.5"/>
<text x="415" y="150" text-anchor="middle" fill="#06b6d4" font-size="12" font-weight="600">Collections</text>
<!-- Flow from Collections to Renderer -->
<path d="M480 145 L510 145" stroke="#06b6d4" stroke-width="2" stroke-dasharray="8 4" class="arch-flow" fill="none"/>
<!-- AI Agent box (above Renderer) -->
<rect x="510" y="30" width="70" height="50" rx="8" fill="#06b6d4" fill-opacity="0.1" stroke="#06b6d4" stroke-width="2"/>
<text x="545" y="60" text-anchor="middle" fill="#06b6d4" font-size="11" font-weight="600">AI Agent</text>
<!-- Flow from AI Agent to Collections -->
<path d="M510 55 Q460 55 450 90" stroke="#06b6d4" stroke-width="2" stroke-dasharray="8 4" class="arch-flow" fill="none"/>
<!-- Flow from AI Agent to Renderer -->
<path d="M545 80 L545 110" stroke="#06b6d4" stroke-width="2" stroke-dasharray="8 4" class="arch-flow" fill="none"/>
<!-- Renderer box -->
<rect x="510" y="110" width="70" height="70" rx="8" fill="#06b6d4" fill-opacity="0.1" stroke="#06b6d4" stroke-width="2"/>
<text x="545" y="150" text-anchor="middle" fill="#06b6d4" font-size="11" font-weight="600">Renderer</text>
<!-- Static Files box (below Renderer) -->
<rect x="510" y="210" width="70" height="50" rx="8" fill="#06b6d4" fill-opacity="0.1" stroke="#06b6d4" stroke-width="2"/>
<text x="545" y="240" text-anchor="middle" fill="#06b6d4" font-size="11" font-weight="600">Static Files</text>
<!-- Flow to Views -->
<path d="M580 130 C610 130 620 100 650 90" stroke="#10b981" stroke-width="2" stroke-dasharray="8 4" class="arch-flow" fill="none"/>
<path d="M580 160 C610 160 620 190 650 175" stroke="#10b981" stroke-width="2" stroke-dasharray="8 4" class="arch-flow" fill="none"/>
<!-- Flow from Static Files to Published Pages -->
<path d="M580 235 C620 235 630 200 650 200" stroke="#10b981" stroke-width="2" stroke-dasharray="8 4" class="arch-flow" fill="none"/>
<!-- Right side: Output views -->
<g>
<rect x="650" y="60" width="120" height="60" rx="8" fill="#10b981" fill-opacity="0.15" stroke="#10b981" stroke-width="2"/>
<text x="710" y="85" text-anchor="middle" fill="#10b981" font-size="11" font-weight="500">Admin Dashboard</text>
<text x="710" y="105" text-anchor="middle" fill="#666" font-size="9">Manage Content</text>
</g>
<!-- Flow from Admin Dashboard to AI Agent -->
<path d="M650 70 Q600 50 580 55" stroke="#10b981" stroke-width="2" stroke-dasharray="8 4" class="arch-flow" fill="none"/>
<g>
<rect x="650" y="160" width="120" height="60" rx="8" fill="#10b981" fill-opacity="0.15" stroke="#10b981" stroke-width="2"/>
<text x="710" y="185" text-anchor="middle" fill="#10b981" font-size="11" font-weight="500">Published Pages</text>
<text x="710" y="205" text-anchor="middle" fill="#666" font-size="9">Live to Users</text>
</g>
<!-- Users -->
<g transform="translate(795, 90)">
<circle cx="0" cy="0" r="12" fill="none" stroke="#10b981" stroke-width="2"/>
<circle cx="0" cy="-3" r="4" fill="#10b981"/>
<path d="M-8 8 Q0 4 8 8" stroke="#10b981" stroke-width="2" fill="none"/>
</g>
<g transform="translate(795, 190)">
<circle cx="0" cy="0" r="12" fill="none" stroke="#10b981" stroke-width="2"/>
<circle cx="0" cy="-3" r="4" fill="#10b981"/>
<path d="M-8 8 Q0 4 8 8" stroke="#10b981" stroke-width="2" fill="none"/>
</g>
</svg>
<!-- Mobile vertical layout -->
<svg class="md:hidden w-full" viewBox="0 0 300 650" fill="none">
<!-- Top: Data sources row -->
<g>
<rect x="20" y="20" width="80" height="45" rx="6" fill="#8b5cf6" fill-opacity="0.15" stroke="#8b5cf6" stroke-width="2"/>
<text x="60" y="47" text-anchor="middle" fill="#8b5cf6" font-size="10" font-weight="500">CRM</text>
</g>
<g>
<rect x="110" y="20" width="80" height="45" rx="6" fill="#8b5cf6" fill-opacity="0.15" stroke="#8b5cf6" stroke-width="2"/>
<text x="150" y="47" text-anchor="middle" fill="#8b5cf6" font-size="10" font-weight="500">ERP</text>
</g>
<g>
<rect x="200" y="20" width="80" height="45" rx="6" fill="#8b5cf6" fill-opacity="0.15" stroke="#8b5cf6" stroke-width="2"/>
<text x="240" y="47" text-anchor="middle" fill="#8b5cf6" font-size="10" font-weight="500">Automations</text>
</g>
<!-- Flow down from sources -->
<path d="M60 65 Q60 90 150 110" stroke="#8b5cf6" stroke-width="2" stroke-dasharray="8 4" class="arch-flow-mobile" fill="none"/>
<path d="M150 65 L150 110" stroke="#8b5cf6" stroke-width="2" stroke-dasharray="8 4" class="arch-flow-mobile" fill="none"/>
<path d="M240 65 Q240 90 150 110" stroke="#8b5cf6" stroke-width="2" stroke-dasharray="8 4" class="arch-flow-mobile" fill="none"/>
<!-- REST API -->
<rect x="100" y="120" width="100" height="60" rx="10" fill="#06b6d4" fill-opacity="0.1" stroke="#06b6d4" stroke-width="2"/>
<text x="150" y="155" text-anchor="middle" fill="#06b6d4" font-size="12" font-weight="600">REST API</text>
<!-- Bidirectional flow to Collections -->
<path d="M130 180 L130 205" stroke="#06b6d4" stroke-width="2" stroke-dasharray="8 4" class="arch-flow-mobile" fill="none"/>
<path d="M170 205 L170 180" stroke="#06b6d4" stroke-width="2" stroke-dasharray="8 4" class="arch-flow-mobile" fill="none"/>
<!-- Collections cylinder -->
<path d="M70 225 C70 215 100 207 150 207 C200 207 230 215 230 225 L230 285 Q230 305 150 305 Q70 305 70 285 Z" fill="#06b6d4" fill-opacity="0.15" stroke="#06b6d4" stroke-width="2"/>
<ellipse cx="150" cy="225" rx="80" ry="18" fill="none" stroke="#06b6d4" stroke-width="2"/>
<ellipse cx="150" cy="285" rx="80" ry="18" fill="none" stroke="#06b6d4" stroke-width="2" stroke-opacity="0.5"/>
<text x="150" y="260" text-anchor="middle" fill="#06b6d4" font-size="12" font-weight="600">Collections</text>
<!-- AI Agent (left of Renderer) -->
<rect x="20" y="350" width="80" height="45" rx="6" fill="#06b6d4" fill-opacity="0.1" stroke="#06b6d4" stroke-width="2"/>
<text x="60" y="377" text-anchor="middle" fill="#06b6d4" font-size="10" font-weight="600">AI Agent</text>
<!-- Flow from AI Agent to Collections (curved) -->
<path d="M50 350 Q50 325 70 305" stroke="#06b6d4" stroke-width="2" stroke-dasharray="8 4" class="arch-flow-mobile" fill="none"/>
<!-- Flow from AI Agent to Renderer -->
<path d="M100 372 L110 372" stroke="#06b6d4" stroke-width="2" stroke-dasharray="8 4" class="arch-flow-mobile" fill="none"/>
<!-- Flow to Renderer -->
<path d="M150 315 L150 340" stroke="#06b6d4" stroke-width="2" stroke-dasharray="8 4" class="arch-flow-mobile" fill="none"/>
<!-- Renderer -->
<rect x="110" y="350" width="80" height="45" rx="8" fill="#06b6d4" fill-opacity="0.1" stroke="#06b6d4" stroke-width="2"/>
<text x="150" y="377" text-anchor="middle" fill="#06b6d4" font-size="11" font-weight="600">Renderer</text>
<!-- Static Files (right of Renderer) -->
<rect x="200" y="350" width="80" height="45" rx="6" fill="#06b6d4" fill-opacity="0.1" stroke="#06b6d4" stroke-width="2"/>
<text x="240" y="377" text-anchor="middle" fill="#06b6d4" font-size="10" font-weight="600">Static Files</text>
<!-- Flow to outputs -->
<path d="M130 395 Q130 420 75 445" stroke="#10b981" stroke-width="2" stroke-dasharray="8 4" class="arch-flow-mobile" fill="none"/>
<path d="M170 395 Q170 420 200 445" stroke="#10b981" stroke-width="2" stroke-dasharray="8 4" class="arch-flow-mobile" fill="none"/>
<!-- Flow from Static Files to Published Pages -->
<path d="M240 395 Q240 420 240 445" stroke="#10b981" stroke-width="2" stroke-dasharray="8 4" class="arch-flow-mobile" fill="none"/>
<!-- Output views -->
<g>
<rect x="20" y="455" width="110" height="50" rx="6" fill="#10b981" fill-opacity="0.15" stroke="#10b981" stroke-width="2"/>
<text x="75" y="478" text-anchor="middle" fill="#10b981" font-size="10" font-weight="500">Admin Dashboard</text>
<text x="75" y="493" text-anchor="middle" fill="#666" font-size="8">Manage Content</text>
</g>
<g>
<rect x="170" y="455" width="110" height="50" rx="6" fill="#10b981" fill-opacity="0.15" stroke="#10b981" stroke-width="2"/>
<text x="225" y="478" text-anchor="middle" fill="#10b981" font-size="10" font-weight="500">Published Pages</text>
<text x="225" y="493" text-anchor="middle" fill="#666" font-size="8">Live to Users</text>
</g>
<!-- Flow from Admin Dashboard to AI Agent -->
<path d="M20 475 Q0 475 0 410 Q0 372 20 372" stroke="#10b981" stroke-width="2" stroke-dasharray="8 4" class="arch-flow-mobile" fill="none"/>
<!-- Users -->
<g transform="translate(75, 540)">
<circle cx="0" cy="0" r="10" fill="none" stroke="#10b981" stroke-width="2"/>
<circle cx="0" cy="-4" r="3" fill="#10b981"/>
<path d="M-6 6 Q0 3 6 6" stroke="#10b981" stroke-width="2" fill="none"/>
</g>
<g transform="translate(225, 540)">
<circle cx="0" cy="0" r="10" fill="none" stroke="#10b981" stroke-width="2"/>
<circle cx="0" cy="-4" r="3" fill="#10b981"/>
<path d="M-6 6 Q0 3 6 6" stroke="#10b981" stroke-width="2" fill="none"/>
</g>
</svg>
<div class="flex flex-wrap justify-center gap-6 mt-8 text-xs">
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-violet-500"></span>
<span class="text-[#888]">Integrations</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-cyan-500"></span>
<span class="text-[#888]">ReadySite</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-emerald-500"></span>
<span class="text-[#888]">Frontend</span>
</div>
</div>
{{end}}