Search-Autocomplete-Design-diagram.excalidraw
==⚠ Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠==
Search Autocomplete Design — Architecture Diagram
Text Elements
Data Collection Pipeline ^pipelinelabel Search Queries ^queries Analytics / Log Aggregator ^aggregator MapReduce / Spark Job ^mapreduce aggregate query frequencies ^mapreduceann Trie Builder ^triebuilder Trie Snapshot Store ^snapshotstore
Trie Data Structure ^trielabel root -> t -> tr -> tre -> tree ^trievis1 top-K: ["tree", "trend", "trek"] ^trievis2 Top-K cached at each trie node — no runtime sorting ^trieannotation
Query Serving Path ^servinglabel User types prefix ^usertypes CDN / Browser Cache ^cdn cache frequent prefixes ^cdnann API Gateway ^apigateway Autocomplete Service ^autoservice Trie (in-memory / Redis) ^trieredis top-K suggestions (precomputed) ^resultsann Offline: aggregate + build trie with top-K per node; Online: prefix lookup returns precomputed top-K in O(p) time ^mainannotation
%%
Drawing
{
"type": "excalidraw",
"version": 2,
"source": "https://excalidraw.com",
"elements": [
{
"id": "pipeline-label",
"type": "text",
"x": 20,
"y": 10,
"width": 360,
"height": 24,
"text": "Data Collection Pipeline",
"fontSize": 16,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"strokeColor": "#1971c2",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "queries",
"type": "rectangle",
"x": 20,
"y": 44,
"width": 140,
"height": 50,
"strokeColor": "#495057",
"backgroundColor": "#f1f3f5",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "queries-text",
"type": "text",
"x": 30,
"y": 62,
"width": 120,
"height": 20,
"text": "Search Queries",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "aggregator",
"type": "rectangle",
"x": 220,
"y": 44,
"width": 180,
"height": 50,
"strokeColor": "#1971c2",
"backgroundColor": "#e7f5ff",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "aggregator-text",
"type": "text",
"x": 230,
"y": 56,
"width": 160,
"height": 36,
"text": "Analytics /\nLog Aggregator",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#1971c2",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "mapreduce",
"type": "rectangle",
"x": 460,
"y": 44,
"width": 180,
"height": 50,
"strokeColor": "#e67700",
"backgroundColor": "#fff3bf",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "mapreduce-text",
"type": "text",
"x": 470,
"y": 56,
"width": 160,
"height": 36,
"text": "MapReduce /\nSpark Job",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#e67700",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "mapreduce-ann",
"type": "text",
"x": 455,
"y": 100,
"width": 190,
"height": 20,
"text": "aggregate query frequencies",
"fontSize": 11,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "top",
"strokeColor": "#e67700",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "triebuilder",
"type": "rectangle",
"x": 700,
"y": 44,
"width": 130,
"height": 50,
"strokeColor": "#2f9e44",
"backgroundColor": "#ebfbee",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "triebuilder-text",
"type": "text",
"x": 710,
"y": 62,
"width": 110,
"height": 20,
"text": "Trie Builder",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#2f9e44",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "snapshotstore",
"type": "ellipse",
"x": 880,
"y": 36,
"width": 140,
"height": 70,
"strokeColor": "#2f9e44",
"backgroundColor": "#ebfbee",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "snapshotstore-text",
"type": "text",
"x": 885,
"y": 56,
"width": 130,
"height": 36,
"text": "Trie Snapshot\nStore",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#2f9e44",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "trie-label",
"type": "text",
"x": 20,
"y": 145,
"width": 260,
"height": 24,
"text": "Trie Data Structure",
"fontSize": 16,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"strokeColor": "#2f9e44",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "trie-box",
"type": "rectangle",
"x": 20,
"y": 175,
"width": 340,
"height": 110,
"strokeColor": "#2f9e44",
"backgroundColor": "#ebfbee",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "trie-vis1",
"type": "text",
"x": 30,
"y": 188,
"width": 320,
"height": 20,
"text": "root -> t -> tr -> tre -> tree",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"strokeColor": "#2f9e44",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "trie-vis2",
"type": "text",
"x": 30,
"y": 212,
"width": 320,
"height": 20,
"text": "top-K: [\"tree\", \"trend\", \"trek\"]",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"strokeColor": "#2f9e44",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "trie-ann",
"type": "text",
"x": 30,
"y": 242,
"width": 320,
"height": 36,
"text": "Top-K cached at each trie node\n— no runtime sorting",
"fontSize": 12,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "serving-label",
"type": "text",
"x": 20,
"y": 310,
"width": 300,
"height": 24,
"text": "Query Serving Path",
"fontSize": 16,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"strokeColor": "#862e9c",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "usertypes",
"type": "rectangle",
"x": 20,
"y": 344,
"width": 140,
"height": 50,
"strokeColor": "#495057",
"backgroundColor": "#f1f3f5",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "usertypes-text",
"type": "text",
"x": 30,
"y": 356,
"width": 120,
"height": 36,
"text": "User types\nprefix",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "cdn",
"type": "rectangle",
"x": 220,
"y": 344,
"width": 160,
"height": 50,
"strokeColor": "#495057",
"backgroundColor": "#f1f3f5",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"strokeStyle": "dashed",
"opacity": 100
},
{
"id": "cdn-text",
"type": "text",
"x": 230,
"y": 356,
"width": 140,
"height": 36,
"text": "CDN /\nBrowser Cache",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#495057",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "cdn-ann",
"type": "text",
"x": 215,
"y": 400,
"width": 170,
"height": 20,
"text": "cache frequent prefixes",
"fontSize": 11,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "top",
"strokeColor": "#495057",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "apigateway",
"type": "rectangle",
"x": 440,
"y": 344,
"width": 140,
"height": 50,
"strokeColor": "#1971c2",
"backgroundColor": "#e7f5ff",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "apigateway-text",
"type": "text",
"x": 450,
"y": 362,
"width": 120,
"height": 20,
"text": "API Gateway",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#1971c2",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "autoservice",
"type": "rectangle",
"x": 640,
"y": 344,
"width": 170,
"height": 50,
"strokeColor": "#862e9c",
"backgroundColor": "#f3d9fa",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "autoservice-text",
"x": 650,
"y": 356,
"width": 150,
"height": 36,
"type": "text",
"text": "Autocomplete\nService",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#862e9c",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "trieredis",
"type": "rectangle",
"x": 870,
"y": 344,
"width": 160,
"height": 50,
"strokeColor": "#c92a2a",
"backgroundColor": "#fff5f5",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "trieredis-text",
"x": 880,
"y": 356,
"width": 140,
"height": 36,
"type": "text",
"text": "Trie (in-memory\n/ Redis)",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#c92a2a",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "results-ann",
"type": "text",
"x": 820,
"y": 400,
"width": 260,
"height": 20,
"text": "top-K suggestions (precomputed)",
"fontSize": 11,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "top",
"strokeColor": "#c92a2a",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "main-annotation",
"type": "text",
"x": 20,
"y": 440,
"width": 980,
"height": 36,
"text": "Offline: aggregate + build trie with top-K per node;\nOnline: prefix lookup returns precomputed top-K in O(p) time",
"fontSize": 12,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"strokeColor": "#495057",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "arrow-queries-aggregator",
"type": "arrow",
"x": 160,
"y": 69,
"width": 58,
"height": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100,
"points": [[0, 0], [58, 0]],
"startArrowhead": null,
"endArrowhead": "arrow"
},
{
"id": "arrow-aggregator-mapreduce",
"type": "arrow",
"x": 400,
"y": 69,
"width": 58,
"height": 0,
"strokeColor": "#e67700",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100,
"points": [[0, 0], [58, 0]],
"startArrowhead": null,
"endArrowhead": "arrow"
},
{
"id": "arrow-mapreduce-triebuilder",
"type": "arrow",
"x": 640,
"y": 69,
"width": 58,
"height": 0,
"strokeColor": "#2f9e44",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100,
"points": [[0, 0], [58, 0]],
"startArrowhead": null,
"endArrowhead": "arrow"
},
{
"id": "arrow-triebuilder-snapshot",
"type": "arrow",
"x": 830,
"y": 69,
"width": 50,
"height": 0,
"strokeColor": "#2f9e44",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100,
"points": [[0, 0], [50, 0]],
"startArrowhead": null,
"endArrowhead": "arrow"
},
{
"id": "arrow-snapshot-trieredis",
"type": "arrow",
"x": 950,
"y": 106,
"width": 0,
"height": 238,
"strokeColor": "#c92a2a",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"strokeStyle": "dashed",
"opacity": 100,
"points": [[0, 0], [0, 238]],
"startArrowhead": null,
"endArrowhead": "arrow"
},
{
"id": "arrow-usertypes-cdn",
"type": "arrow",
"x": 160,
"y": 369,
"width": 58,
"height": 0,
"strokeColor": "#495057",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"strokeStyle": "dashed",
"opacity": 100,
"points": [[0, 0], [58, 0]],
"startArrowhead": null,
"endArrowhead": "arrow"
},
{
"id": "arrow-cdn-apigateway",
"type": "arrow",
"x": 380,
"y": 369,
"width": 58,
"height": 0,
"strokeColor": "#1971c2",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100,
"points": [[0, 0], [58, 0]],
"startArrowhead": null,
"endArrowhead": "arrow"
},
{
"id": "arrow-apigateway-autoservice",
"type": "arrow",
"x": 580,
"y": 369,
"width": 58,
"height": 0,
"strokeColor": "#862e9c",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100,
"points": [[0, 0], [58, 0]],
"startArrowhead": null,
"endArrowhead": "arrow"
},
{
"id": "arrow-autoservice-trieredis",
"type": "arrow",
"x": 810,
"y": 369,
"width": 58,
"height": 0,
"strokeColor": "#c92a2a",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100,
"points": [[0, 0], [58, 0]],
"startArrowhead": null,
"endArrowhead": "arrow"
}
],
"appState": {
"gridSize": null,
"viewBackgroundColor": "#ffffff"
},
"files": {}
}%%