botserver/docs/src/chapter-10-api/assets/api-request-flow.svg

<svg width="600" height="700" viewBox="0 0 600 700" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
  <!-- Define gradients and effects -->
  <defs>
    <!-- Gradients for different stages -->
    <linearGradient id="requestGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#667eea;stop-opacity:0.2" />
      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.3" />
    </linearGradient>

    <linearGradient id="rateLimitGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#f59e0b;stop-opacity:0.2" />
      <stop offset="100%" style="stop-color:#d97706;stop-opacity:0.3" />
    </linearGradient>

    <linearGradient id="authGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#ef4444;stop-opacity:0.2" />
      <stop offset="100%" style="stop-color:#dc2626;stop-opacity:0.3" />
    </linearGradient>

    <linearGradient id="routeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#8b5cf6;stop-opacity:0.2" />
      <stop offset="100%" style="stop-color:#7c3aed;stop-opacity:0.3" />
    </linearGradient>

    <linearGradient id="validateGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#06b6d4;stop-opacity:0.2" />
      <stop offset="100%" style="stop-color:#0891b2;stop-opacity:0.3" />
    </linearGradient>

    <linearGradient id="processGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#10b981;stop-opacity:0.2" />
      <stop offset="100%" style="stop-color:#059669;stop-opacity:0.3" />
    </linearGradient>

    <linearGradient id="formatGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#4facfe;stop-opacity:0.2" />
      <stop offset="100%" style="stop-color:#00f2fe;stop-opacity:0.3" />
    </linearGradient>

    <linearGradient id="responseGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#43e97b;stop-opacity:0.2" />
      <stop offset="100%" style="stop-color:#38f9d7;stop-opacity:0.3" />
    </linearGradient>

    <!-- Success path gradient -->
    <linearGradient id="successPath" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#10b981;stop-opacity:0.8" />
      <stop offset="100%" style="stop-color:#34d399;stop-opacity:0.3" />
    </linearGradient>

    <!-- Failure path gradient -->
    <linearGradient id="failPath" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#ef4444;stop-opacity:0.8" />
      <stop offset="100%" style="stop-color:#f87171;stop-opacity:0.3" />
    </linearGradient>

    <!-- Arrow markers -->
    <marker id="arrow" markerWidth="12" markerHeight="12" refX="11" refY="6" orient="auto">
      <path d="M 0 0 L 12 6 L 0 12 L 3 6 Z" fill="#4a5568" opacity="0.7"/>
    </marker>

    <marker id="arrowSuccess" markerWidth="12" markerHeight="12" refX="11" refY="6" orient="auto">
      <path d="M 0 0 L 12 6 L 0 12 L 3 6 Z" fill="#10b981" opacity="0.8"/>
    </marker>

    <marker id="arrowFail" markerWidth="12" markerHeight="12" refX="11" refY="6" orient="auto">
      <path d="M 0 0 L 12 6 L 0 12 L 3 6 Z" fill="#ef4444" opacity="0.8"/>
    </marker>

    <!-- Drop shadow filter -->
    <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
      <feOffset dx="0" dy="2" result="offsetblur"/>
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.15"/>
      </feComponentTransfer>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <!-- Background -->
  <rect x="0" y="0" width="600" height="700" fill="#fafafa"/>

  <!-- Title -->
  <rect x="150" y="10" width="300" height="35" fill="rgba(99, 102, 241, 0.05)" rx="8"/>
  <text x="300" y="33" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="22" font-weight="600" fill="#1e293b">
    API Request Flow
  </text>

  <!-- HTTP Request -->
  <rect x="200" y="60" width="200" height="50" fill="url(#requestGrad)" stroke="#667eea" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="300" y="85" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
    HTTP Request
  </text>
  <text x="300" y="100" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
    Client → Server
  </text>

  <!-- Arrow down -->
  <path d="M 300 110 L 300 140" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7"/>

  <!-- Rate Limit -->
  <rect x="200" y="140" width="200" height="60" fill="url(#rateLimitGrad)" stroke="#f59e0b" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="300" y="165" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
    Rate Limit
  </text>
  <text x="300" y="185" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
    Check request limits
  </text>

  <!-- Pass/Fail paths -->
  <path d="M 300 200 L 300 230" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7"/>
  <text x="320" y="215" text-anchor="start" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#059669">Pass</text>

  <path d="M 400 170 L 480 170 L 480 650" stroke="url(#failPath)" stroke-width="2" stroke-dasharray="5,3" fill="none" marker-end="url(#arrowFail)" opacity="0.5"/>
  <text x="420" y="165" text-anchor="start" font-family="system-ui, sans-serif" font-size="16" fill="#dc2626">429 Too Many</text>

  <!-- Auth -->
  <rect x="200" y="230" width="200" height="60" fill="url(#authGrad)" stroke="#ef4444" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="300" y="255" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
    Auth
  </text>
  <text x="300" y="275" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
    Validate token/session
  </text>

  <!-- Pass/Fail paths -->
  <path d="M 300 290 L 300 320" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7"/>
  <text x="320" y="305" text-anchor="start" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#059669">Valid</text>

  <path d="M 400 260 L 460 260 L 460 650" stroke="url(#failPath)" stroke-width="2" stroke-dasharray="5,3" fill="none" marker-end="url(#arrowFail)" opacity="0.5"/>
  <text x="420" y="255" text-anchor="start" font-family="system-ui, sans-serif" font-size="16" fill="#dc2626">401 Unauthorized</text>

  <!-- Route -->
  <rect x="200" y="320" width="200" height="60" fill="url(#routeGrad)" stroke="#8b5cf6" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="300" y="345" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
    Route
  </text>
  <text x="300" y="365" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
    Match endpoint pattern
  </text>

  <!-- Arrow down -->
  <path d="M 300 380 L 300 410" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7"/>

  <path d="M 400 350 L 440 350 L 440 650" stroke="url(#failPath)" stroke-width="2" stroke-dasharray="5,3" fill="none" marker-end="url(#arrowFail)" opacity="0.5"/>
  <text x="420" y="345" text-anchor="start" font-family="system-ui, sans-serif" font-size="16" fill="#dc2626">404 Not Found</text>

  <!-- Validate -->
  <rect x="200" y="410" width="200" height="60" fill="url(#validateGrad)" stroke="#06b6d4" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="300" y="435" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
    Validate
  </text>
  <text x="300" y="455" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
    Check request body
  </text>

  <!-- Pass/Fail paths -->
  <path d="M 300 470 L 300 500" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7"/>
  <text x="320" y="485" text-anchor="start" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#059669">Valid</text>

  <path d="M 400 440 L 420 440 L 420 650" stroke="url(#failPath)" stroke-width="2" stroke-dasharray="5,3" fill="none" marker-end="url(#arrowFail)" opacity="0.5"/>
  <text x="425" y="435" text-anchor="start" font-family="system-ui, sans-serif" font-size="16" fill="#dc2626">400 Bad Request</text>

  <!-- Process -->
  <rect x="200" y="500" width="200" height="60" fill="url(#processGrad)" stroke="#10b981" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="300" y="525" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
    Process
  </text>
  <text x="300" y="545" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
    Execute business logic
  </text>

  <!-- Arrow down -->
  <path d="M 300 560 L 300 590" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7"/>

  <!-- Format -->
  <rect x="200" y="590" width="200" height="60" fill="url(#formatGrad)" stroke="#00f2fe" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="300" y="615" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
    Format
  </text>
  <text x="300" y="635" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
    JSON response
  </text>

  <!-- Arrow down -->
  <path d="M 300 650 L 300 680" stroke="url(#successPath)" stroke-width="3" fill="none" marker-end="url(#arrowSuccess)" opacity="0.7"/>

  <!-- HTTP Response -->
  <rect x="200" y="680" width="200" height="50" fill="url(#responseGrad)" stroke="#38f9d7" stroke-width="2" rx="8" filter="url(#shadow)"/>
  <text x="300" y="705" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">
    HTTP Response
  </text>
  <text x="300" y="720" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">
    Server → Client
  </text>

  <!-- Error Response box -->
  <rect x="410" y="650" width="100" height="30" fill="rgba(239, 68, 68, 0.1)" stroke="#ef4444" stroke-width="1.5" rx="6"/>
  <text x="460" y="670" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#dc2626">
    Error Response
  </text>

  <!-- Side labels -->
  <g transform="translate(50, 380)">
    <text x="0" y="0" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#64748b" transform="rotate(-90)">
      Request Pipeline
    </text>
  </g>

  <!-- Status indicators -->
  <g transform="translate(80, 150)">
    <circle cx="0" cy="0" r="4" fill="#10b981"/>
    <text x="10" y="4" font-family="system-ui, sans-serif" font-size="16" fill="#475569">Success path</text>
  </g>

  <g transform="translate(80, 170)">
    <circle cx="0" cy="0" r="4" fill="#ef4444"/>
    <text x="10" y="4" font-family="system-ui, sans-serif" font-size="16" fill="#475569">Error path</text>
  </g>
</svg>