40 lines
3.1 KiB
XML
40 lines
3.1 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540" role="img" aria-labelledby="title desc">
|
|
<title id="title">Chatroom Project Architecture</title>
|
|
<desc id="desc">A minimal architecture diagram showing browser clients, FastAPI WebSocket endpoint, room manager, and room broadcasts.</desc>
|
|
<rect width="960" height="540" fill="#f7f9fc"/>
|
|
<text x="72" y="74" fill="#101828" font-family="Inter, Arial, sans-serif" font-size="34" font-weight="700">Project Architecture</text>
|
|
<text x="72" y="108" fill="#667085" font-family="Inter, Arial, sans-serif" font-size="17">Each browser keeps one WebSocket connection. The server broadcasts only inside the selected room.</text>
|
|
<g font-family="Inter, Arial, sans-serif">
|
|
<rect x="82" y="168" width="188" height="76" rx="14" fill="#ffffff" stroke="#d0d5dd"/>
|
|
<text x="126" y="200" fill="#101828" font-size="18" font-weight="700">Client A</text>
|
|
<text x="112" y="224" fill="#667085" font-size="14">Browser tab</text>
|
|
<rect x="82" y="296" width="188" height="76" rx="14" fill="#ffffff" stroke="#d0d5dd"/>
|
|
<text x="126" y="328" fill="#101828" font-size="18" font-weight="700">Client B</text>
|
|
<text x="112" y="352" fill="#667085" font-size="14">Browser tab</text>
|
|
<rect x="376" y="188" width="216" height="164" rx="20" fill="#2563eb"/>
|
|
<text x="428" y="238" fill="#ffffff" font-size="22" font-weight="700">FastAPI</text>
|
|
<text x="412" y="270" fill="#dbeafe" font-size="15">WebSocket endpoint</text>
|
|
<text x="402" y="294" fill="#dbeafe" font-size="15">/ws/{room}/{user}</text>
|
|
<rect x="690" y="164" width="194" height="92" rx="16" fill="#ffffff" stroke="#d0d5dd"/>
|
|
<text x="725" y="202" fill="#101828" font-size="18" font-weight="700">Room: general</text>
|
|
<text x="730" y="226" fill="#667085" font-size="14">A, B, C...</text>
|
|
<rect x="690" y="300" width="194" height="92" rx="16" fill="#ffffff" stroke="#d0d5dd"/>
|
|
<text x="734" y="338" fill="#101828" font-size="18" font-weight="700">Room: class</text>
|
|
<text x="742" y="362" fill="#667085" font-size="14">D, E...</text>
|
|
<path d="M270 206 C318 206 330 230 376 230" fill="none" stroke="#2563eb" stroke-width="4" marker-end="url(#arrow)"/>
|
|
<path d="M270 334 C318 334 330 310 376 310" fill="none" stroke="#2563eb" stroke-width="4" marker-end="url(#arrow)"/>
|
|
<path d="M592 240 C642 220 650 210 690 210" fill="none" stroke="#12b76a" stroke-width="4" marker-end="url(#arrow-green)"/>
|
|
<path d="M592 302 C642 324 650 346 690 346" fill="none" stroke="#12b76a" stroke-width="4" marker-end="url(#arrow-green)"/>
|
|
<text x="306" y="178" fill="#344054" font-size="14" font-weight="700">send / receive frames</text>
|
|
<text x="636" y="142" fill="#344054" font-size="14" font-weight="700">ConnectionManager</text>
|
|
</g>
|
|
<defs>
|
|
<marker id="arrow" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto">
|
|
<path d="M2,2 L10,6 L2,10 Z" fill="#2563eb"/>
|
|
</marker>
|
|
<marker id="arrow-green" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto">
|
|
<path d="M2,2 L10,6 L2,10 Z" fill="#12b76a"/>
|
|
</marker>
|
|
</defs>
|
|
</svg>
|