| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720" |
| 2 | font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" |
| 3 | font-size="12"> |
| 4 | <!-- |
| 5 | Client-Server Flow Template |
| 6 | Usage: Left clients + Right servers, bidirectional arrows for key interactions |
| 7 | Scenarios: Request-response architecture, Frontend-backend flow, C/S protocol stack, API calls |
| 8 | Supports: 2-3 client modules (left) + 2-4 server modules (right) + 3-5 key interactions (middle) |
| 9 | Key convention: Each module card = Name + 1 line description; Each arrow = Action label (e.g. "Login" / "Return JWT"); DO NOT draw arrows without labels |
| 10 | --> |
| 11 | <defs> |
| 12 | <marker id="csArrowRight" markerWidth="10" markerHeight="10" refX="9" refY="5" |
| 13 | orient="auto" markerUnits="strokeWidth"> |
| 14 | <path d="M0,0 L10,5 L0,10 Z" fill="#3B82F6"/> |
| 15 | </marker> |
| 16 | <marker id="csArrowLeft" markerWidth="10" markerHeight="10" refX="9" refY="5" |
| 17 | orient="auto" markerUnits="strokeWidth"> |
| 18 | <path d="M0,0 L10,5 L0,10 Z" fill="#10B981"/> |
| 19 | </marker> |
| 20 | </defs> |
| 21 | <rect width="1280" height="720" fill="#FFFFFF"/> |
| 22 | <!-- Title --> |
| 23 | <g id="header" data-pptx-bounds="40 15 1200 125"> |
| 24 | <text x="60" y="58" |
| 25 | font-size="28" font-weight="700" fill="#0F172A">Client-Server Flow</text> |
| 26 | <text x="60" y="84" |
| 27 | font-size="14" fill="#64748B">Client-Server Flow · Left side initiates requests, right side responds hierarchically</text> |
| 28 | </g> |
| 29 | <g id="client-group" data-pptx-bounds="19 98 402 584"> |
| 30 | <!-- Left side: Client Group --> |
| 31 | <rect x="60" y="130" width="320" height="520" rx="16" fill="#EFF6FF" stroke="#BFDBFE" stroke-width="1.5"/> |
| 32 | <rect x="60" y="130" width="320" height="44" rx="16" fill="#3B82F6"/> |
| 33 | <rect x="60" y="158" width="320" height="16" fill="#3B82F6"/> |
| 34 | <text x="220" y="160" text-anchor="middle" |
| 35 | font-size="16" font-weight="700" fill="#FFFFFF">CLIENT</text> |
| 36 | <g id="client-1"> |
| 37 | <!-- Client Module 1: Web --> |
| 38 | <g> |
| 39 | <rect x="90" y="200" width="260" height="100" rx="10" fill="#FFFFFF" stroke="#D4DFF7" stroke-width="1"/> |
| 40 | </g> |
| 41 | <rect x="90" y="200" width="6" height="100" fill="#3B82F6"/> |
| 42 | <text x="112" y="226" |
| 43 | font-size="18" font-weight="700" fill="#0F172A">Web Browser</text> |
| 44 | <text x="112" y="252" |
| 45 | font-size="13" fill="#475569">React SPA UI & Interaction</text> |
| 46 | <text x="112" y="272" |
| 47 | font-size="13" fill="#475569">HTTPS + JWT Auth</text> |
| 48 | <text x="112" y="290" |
| 49 | font-size="13" fill="#64748B">Protocol: HTTPS / WebSocket</text> |
| 50 | </g> |
| 51 | <g id="client-2"> |
| 52 | <!-- Client Module 2: Mobile --> |
| 53 | <g> |
| 54 | <rect x="90" y="320" width="260" height="100" rx="10" fill="#FFFFFF" stroke="#D4DFF7" stroke-width="1"/> |
| 55 | </g> |
| 56 | <rect x="90" y="320" width="6" height="100" fill="#3B82F6"/> |
| 57 | <text x="112" y="346" |
| 58 | font-size="18" font-weight="700" fill="#0F172A">Mobile App</text> |
| 59 | <text x="112" y="372" |
| 60 | font-size="13" fill="#475569">iOS/Android Native Client</text> |
| 61 | <text x="112" y="392" |
| 62 | font-size="13" fill="#475569">Offline Cache Supported</text> |
| 63 | <text x="112" y="410" |
| 64 | font-size="13" fill="#64748B">Protocol: HTTP/2 / Push</text> |
| 65 | </g> |
| 66 | <g id="client-3"> |
| 67 | <!-- Client Module 3: Third-party --> |
| 68 | <g> |
| 69 | <rect x="90" y="440" width="260" height="100" rx="10" fill="#FFFFFF" stroke="#D4DFF7" stroke-width="1"/> |
| 70 | </g> |
| 71 | <rect x="90" y="440" width="6" height="100" fill="#3B82F6"/> |
| 72 | <text x="112" y="466" |
| 73 | font-size="18" font-weight="700" fill="#0F172A">3rd Party Client</text> |
| 74 | <text x="112" y="492" |
| 75 | font-size="13" fill="#475569">Open API Access</text> |
| 76 | <text x="112" y="512" |
| 77 | font-size="13" fill="#475569">OAuth2 / API Key Auth</text> |
| 78 | <text x="112" y="530" |
| 79 | font-size="13" fill="#64748B">Protocol: HTTPS / Webhook</text> |
| 80 | </g> |
| 81 | </g> |
| 82 | <g id="server-group" data-pptx-bounds="859 98 402 584"> |
| 83 | <!-- Right side: Server Group --> |
| 84 | <rect x="900" y="130" width="320" height="520" rx="16" fill="#ECFDF5" stroke="#A7F3D0" stroke-width="1.5"/> |
| 85 | <rect x="900" y="130" width="320" height="44" rx="16" fill="#10B981"/> |
| 86 | <rect x="900" y="158" width="320" height="16" fill="#10B981"/> |
| 87 | <text x="1060" y="160" text-anchor="middle" |
| 88 | font-size="16" font-weight="700" fill="#FFFFFF">SERVER</text> |
| 89 | <g id="server-1"> |
| 90 | <!-- Server Module 1: Gateway --> |
| 91 | <g> |
| 92 | <rect x="930" y="200" width="260" height="100" rx="10" fill="#FFFFFF" stroke="#CDEAD3" stroke-width="1"/> |
| 93 | </g> |
| 94 | <rect x="930" y="200" width="6" height="100" fill="#10B981"/> |
| 95 | <text x="952" y="226" |
| 96 | font-size="18" font-weight="700" fill="#0F172A">API Gateway</text> |
| 97 | <text x="952" y="252" |
| 98 | font-size="13" fill="#475569">Auth & Rate Limiting</text> |
| 99 | <text x="952" y="272" |
| 100 | font-size="13" fill="#475569">Routing & Tracing</text> |
| 101 | <text x="952" y="290" |
| 102 | font-size="13" fill="#64748B">Kong / Envoy</text> |
| 103 | </g> |
| 104 | <g id="server-2"> |
| 105 | <!-- Server Module 2: Services --> |
| 106 | <g> |
| 107 | <rect x="930" y="320" width="260" height="100" rx="10" fill="#FFFFFF" stroke="#CDEAD3" stroke-width="1"/> |
| 108 | </g> |
| 109 | <rect x="930" y="320" width="6" height="100" fill="#10B981"/> |
| 110 | <text x="952" y="346" |
| 111 | font-size="18" font-weight="700" fill="#0F172A">Microservices</text> |
| 112 | <text x="952" y="372" |
| 113 | font-size="13" fill="#475569">Domain Service Cluster</text> |
| 114 | <text x="952" y="392" |
| 115 | font-size="13" fill="#475569">gRPC Internal Comm.</text> |
| 116 | <text x="952" y="410" |
| 117 | font-size="13" fill="#64748B">Go / Java / Node</text> |
| 118 | </g> |
| 119 | <g id="server-3"> |
| 120 | <!-- Server Module 3: Data --> |
| 121 | <g> |
| 122 | <rect x="930" y="440" width="260" height="100" rx="10" fill="#FFFFFF" stroke="#CDEAD3" stroke-width="1"/> |
| 123 | </g> |
| 124 | <rect x="930" y="440" width="6" height="100" fill="#10B981"/> |
| 125 | <text x="952" y="466" |
| 126 | font-size="18" font-weight="700" fill="#0F172A">Database Layer</text> |
| 127 | <text x="952" y="492" |
| 128 | font-size="13" fill="#475569">Primary/Replica & Cache</text> |
| 129 | <text x="952" y="512" |
| 130 | font-size="13" fill="#475569">Hot/Cold Data Tiering</text> |
| 131 | <text x="952" y="530" |
| 132 | font-size="13" fill="#64748B">PostgreSQL / Redis / S3</text> |
| 133 | </g> |
| 134 | </g> |
| 135 | <g id="interactions" data-pptx-bounds="312 121 682 433"> |
| 136 | <!-- Middle Communication Channel Labels --> |
| 137 | <text x="640" y="160" text-anchor="middle" |
| 138 | font-size="14" font-weight="700" fill="#0F172A">Key Interactions</text> |
| 139 | <text x="640" y="180" text-anchor="middle" |
| 140 | font-size="13" fill="#64748B">Key Interactions</text> |
| 141 | <g id="interaction-1"> |
| 142 | <!-- Interaction 1: Login Request --> |
| 143 | <line x1="380" y1="250" x2="926" y2="250" stroke="#3B82F6" stroke-width="2.5" marker-end="url(#csArrowRight)"/> |
| 144 | <rect x="500" y="216" width="280" height="26" rx="11" fill="#FFFFFF" stroke="#3B82F6" stroke-width="1"/> |
| 145 | <text x="640" y="234" text-anchor="middle" |
| 146 | font-size="14" font-weight="700" fill="#3B82F6">① Login Request · POST /auth/login</text> |
| 147 | </g> |
| 148 | <g id="interaction-2"> |
| 149 | <!-- Interaction 2: Return Token --> |
| 150 | <line x1="926" y1="290" x2="384" y2="290" stroke="#10B981" stroke-width="2.5" marker-end="url(#csArrowLeft)"/> |
| 151 | <rect x="500" y="302" width="280" height="26" rx="11" fill="#FFFFFF" stroke="#10B981" stroke-width="1"/> |
| 152 | <text x="640" y="318" text-anchor="middle" |
| 153 | font-size="14" font-weight="700" fill="#10B981">② Return JWT Token · 2xx Response</text> |
| 154 | </g> |
| 155 | <g id="interaction-3"> |
| 156 | <!-- Interaction 3: Business Call --> |
| 157 | <line x1="380" y1="370" x2="926" y2="370" stroke="#3B82F6" stroke-width="2.5" marker-end="url(#csArrowRight)"/> |
| 158 | <rect x="500" y="336" width="280" height="26" rx="11" fill="#FFFFFF" stroke="#3B82F6" stroke-width="1"/> |
| 159 | <text x="640" y="354" text-anchor="middle" |
| 160 | font-size="14" font-weight="700" fill="#3B82F6">③ Business Call · GET /api/resources</text> |
| 161 | </g> |
| 162 | <g id="interaction-4"> |
| 163 | <!-- Interaction 4: Data Return --> |
| 164 | <line x1="926" y1="410" x2="384" y2="410" stroke="#10B981" stroke-width="2.5" marker-end="url(#csArrowLeft)"/> |
| 165 | <rect x="500" y="422" width="280" height="26" rx="11" fill="#FFFFFF" stroke="#10B981" stroke-width="1"/> |
| 166 | <text x="640" y="438" text-anchor="middle" |
| 167 | font-size="14" font-weight="700" fill="#10B981">④ Return Data · JSON Payload</text> |
| 168 | </g> |
| 169 | <g id="interaction-5"> |
| 170 | <!-- Interaction 5: Push --> |
| 171 | <line x1="926" y1="490" x2="384" y2="490" stroke="#10B981" stroke-width="2.5" marker-end="url(#csArrowLeft)"/> |
| 172 | <rect x="500" y="502" width="280" height="26" rx="11" fill="#FFFFFF" stroke="#10B981" stroke-width="1"/> |
| 173 | <text x="640" y="518" text-anchor="middle" |
| 174 | font-size="14" font-weight="700" fill="#10B981">⑤ Real-time Push · WebSocket / SSE</text> |
| 175 | </g> |
| 176 | </g> |
| 177 | <!-- Footer Note --> |
| 178 | <g id="source" data-pptx-bounds="40 660 1200 40"> |
| 179 | <text x="60" y="685" |
| 180 | font-size="14" fill="#64748B">Blue arrow = Client request; Green arrow = Server response; Every arrow MUST have an action label, do not draw bare lines</text> |
| 181 | </g> |
| 182 | </svg> |
| 183 |