50 lines
3.8 KiB
XML
50 lines
3.8 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 architecture</title>
|
|
<desc id="desc">A compact architecture diagram for the chatroom project.</desc>
|
|
<defs>
|
|
<style>
|
|
@font-face {
|
|
font-family: "Vazirmatn";
|
|
src: url("../../../app/static/Vazirmatn[wght].woff2") format("woff2");
|
|
font-weight: 100 900;
|
|
}
|
|
text { font-family: "Vazirmatn", Arial, sans-serif; }
|
|
</style>
|
|
<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="#10b981"/></marker>
|
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#0f172a" flood-opacity=".12"/>
|
|
</filter>
|
|
</defs>
|
|
<rect width="960" height="540" fill="#262a3a"/>
|
|
<path d="M714 38 L932 104 L802 224 L642 132 Z" fill="#6d8cff" opacity=".14"/>
|
|
<path d="M36 414 L236 304 L342 478 L96 548 Z" fill="#f4b740" opacity=".14"/>
|
|
<text x="72" y="76" fill="#f8fafc" font-size="34" font-weight="800">Chatroom Architecture</text>
|
|
<text x="72" y="112" fill="#a8adbd" font-size="17">Browser Clients - FastAPI - Room Manager</text>
|
|
<g filter="url(#shadow)">
|
|
<rect x="82" y="178" width="190" height="82" rx="20" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
|
<rect x="82" y="302" width="190" height="82" rx="20" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
|
<rect x="368" y="178" width="224" height="206" rx="26" fill="#2563eb"/>
|
|
<rect x="690" y="162" width="196" height="94" rx="22" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
|
<rect x="690" y="308" width="196" height="94" rx="22" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
|
|
</g>
|
|
<text x="177" y="214" text-anchor="middle" fill="#f8fafc" font-size="19" font-weight="800">Client A</text>
|
|
<text x="177" y="240" text-anchor="middle" fill="#a8adbd" font-size="15">Browser tab</text>
|
|
<text x="177" y="338" text-anchor="middle" fill="#f8fafc" font-size="19" font-weight="800">Client B</text>
|
|
<text x="177" y="364" text-anchor="middle" fill="#a8adbd" font-size="15">Browser tab</text>
|
|
<text x="480" y="242" text-anchor="middle" fill="#fff" font-size="25" font-weight="800">FastAPI</text>
|
|
<text x="480" y="276" text-anchor="middle" fill="#dbeafe" font-size="16">WebSocket Endpoint</text>
|
|
<text x="480" y="306" text-anchor="middle" fill="#dbeafe" font-size="16">ConnectionManager</text>
|
|
<text x="480" y="338" text-anchor="middle" fill="#fff" font-size="15" font-weight="800">/ws/{room}/{user}</text>
|
|
<text x="788" y="202" text-anchor="middle" fill="#f8fafc" font-size="19" font-weight="800">Room: general</text>
|
|
<text x="788" y="230" text-anchor="middle" fill="#a8adbd" font-size="15">A - B - C</text>
|
|
<text x="788" y="348" text-anchor="middle" fill="#f8fafc" font-size="19" font-weight="800">Room: class</text>
|
|
<text x="788" y="376" text-anchor="middle" fill="#a8adbd" font-size="15">D - E</text>
|
|
<path d="M272 220 C320 220 330 230 368 230" fill="none" stroke="#2563eb" stroke-width="4" marker-end="url(#arrow)"/>
|
|
<path d="M272 344 C320 344 330 330 368 330" fill="none" stroke="#2563eb" stroke-width="4" marker-end="url(#arrow)"/>
|
|
<path d="M592 242 C642 220 650 208 690 208" fill="none" stroke="#10b981" stroke-width="4" marker-end="url(#arrow-green)"/>
|
|
<path d="M592 318 C642 340 650 356 690 356" fill="none" stroke="#10b981" stroke-width="4" marker-end="url(#arrow-green)"/>
|
|
<text x="320" y="178" fill="#f7c75f" font-size="14" font-weight="800">WebSocket Frames</text>
|
|
<text x="632" y="156" fill="#43d9a3" font-size="14" font-weight="800">Broadcast by room</text>
|
|
</svg>
|