News-Feed-Design-diagram.excalidraw
==⚠ Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠==
News Feed Design — Architecture Diagram
Text Elements
Fan-Out-on-Write Path (normal users) ^writepathlabel User posts ^userpost Post Service ^postservice Post DB ^postdb Fanout Service ^fanoutservice Social Graph DB ^socialgraph Feed Cache (Redis) ^feedcache pre-computed feed per user ^feedcacheann Fast read, expensive write — good for normal users ^writepath-note
Fan-Out-on-Read Path (read time merge) ^readpathlabel User opens feed ^userfeed Feed Service ^feedservice Ranking Service ^rankservice Celebrity Post Store ^celebstore Hybrid: cache for normal, on-read for celebrities ^readpath-note
Celebrity Problem Resolution ^celeblabel Celebrity threshold: >10K followers -> skip fanout-on-write, fetch on-read instead ^celebnote Hybrid model: fan-out-on-write for normal users, fan-out-on-read for celebrities to avoid write amplification ^hybridnote
%%
Drawing
{
"type": "excalidraw",
"version": 2,
"source": "https://excalidraw.com",
"elements": [
{
"id": "write-path-label",
"type": "text",
"x": 20,
"y": 10,
"width": 360,
"height": 24,
"text": "Fan-Out-on-Write Path (normal users)",
"fontSize": 16,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"strokeColor": "#1971c2",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "userpost",
"type": "rectangle",
"x": 20,
"y": 44,
"width": 120,
"height": 50,
"strokeColor": "#495057",
"backgroundColor": "#f1f3f5",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "userpost-text",
"type": "text",
"x": 30,
"y": 62,
"width": 100,
"height": 20,
"text": "User posts",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "postservice",
"type": "rectangle",
"x": 200,
"y": 44,
"width": 140,
"height": 50,
"strokeColor": "#1971c2",
"backgroundColor": "#e7f5ff",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "postservice-text",
"type": "text",
"x": 210,
"y": 62,
"width": 120,
"height": 20,
"text": "Post Service",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#1971c2",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "postdb",
"type": "ellipse",
"x": 390,
"y": 38,
"width": 110,
"height": 64,
"strokeColor": "#495057",
"backgroundColor": "#f1f3f5",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "postdb-text",
"type": "text",
"x": 400,
"y": 62,
"width": 90,
"height": 20,
"text": "Post DB",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#495057",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "fanoutservice",
"type": "rectangle",
"x": 200,
"y": 140,
"width": 140,
"height": 50,
"strokeColor": "#e67700",
"backgroundColor": "#fff3bf",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "fanoutservice-text",
"type": "text",
"x": 210,
"y": 158,
"width": 120,
"height": 20,
"text": "Fanout Service",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#e67700",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "socialgraph",
"type": "ellipse",
"x": 390,
"y": 134,
"width": 130,
"height": 64,
"strokeColor": "#495057",
"backgroundColor": "#f1f3f5",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "socialgraph-text",
"type": "text",
"x": 395,
"y": 154,
"width": 120,
"height": 36,
"text": "Social Graph DB",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#495057",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "feedcache",
"type": "rectangle",
"x": 570,
"y": 140,
"width": 160,
"height": 50,
"strokeColor": "#c92a2a",
"backgroundColor": "#fff5f5",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "feedcache-text",
"type": "text",
"x": 580,
"y": 158,
"width": 140,
"height": 20,
"text": "Feed Cache (Redis)",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#c92a2a",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "feedcache-ann",
"type": "text",
"x": 555,
"y": 198,
"width": 190,
"height": 20,
"text": "pre-computed feed per user",
"fontSize": 11,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "top",
"strokeColor": "#c92a2a",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "write-path-note",
"type": "text",
"x": 20,
"y": 230,
"width": 460,
"height": 20,
"text": "Fast read, expensive write — good for normal users",
"fontSize": 12,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"strokeColor": "#1971c2",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "read-path-label",
"type": "text",
"x": 20,
"y": 280,
"width": 380,
"height": 24,
"text": "Fan-Out-on-Read Path (read time merge)",
"fontSize": 16,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"strokeColor": "#2f9e44",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "userfeed",
"type": "rectangle",
"x": 20,
"y": 314,
"width": 120,
"height": 50,
"strokeColor": "#495057",
"backgroundColor": "#f1f3f5",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "userfeed-text",
"type": "text",
"x": 30,
"y": 332,
"width": 100,
"height": 20,
"text": "User opens feed",
"fontSize": 12,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "feedservice",
"type": "rectangle",
"x": 200,
"y": 314,
"width": 140,
"height": 50,
"strokeColor": "#2f9e44",
"backgroundColor": "#ebfbee",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "feedservice-text",
"type": "text",
"x": 210,
"y": 332,
"width": 120,
"height": 20,
"text": "Feed Service",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#2f9e44",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "rankservice",
"type": "rectangle",
"x": 390,
"y": 314,
"width": 150,
"height": 50,
"strokeColor": "#862e9c",
"backgroundColor": "#f3d9fa",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "rankservice-text",
"type": "text",
"x": 400,
"y": 332,
"width": 130,
"height": 20,
"text": "Ranking Service",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#862e9c",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "celebstore",
"type": "ellipse",
"x": 570,
"y": 308,
"width": 160,
"height": 64,
"strokeColor": "#c92a2a",
"backgroundColor": "#fff5f5",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100
},
{
"id": "celebstore-text",
"type": "text",
"x": 580,
"y": 328,
"width": 140,
"height": 36,
"text": "Celebrity Post Store",
"fontSize": 13,
"fontFamily": 1,
"textAlign": "center",
"verticalAlign": "middle",
"strokeColor": "#c92a2a",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "read-path-note",
"type": "text",
"x": 20,
"y": 400,
"width": 520,
"height": 20,
"text": "Hybrid: cache for normal, on-read for celebrities",
"fontSize": 12,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"strokeColor": "#2f9e44",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "celeb-box",
"type": "rectangle",
"x": 20,
"y": 440,
"width": 740,
"height": 60,
"strokeColor": "#c92a2a",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"strokeStyle": "dashed",
"opacity": 100
},
{
"id": "celeb-note",
"type": "text",
"x": 30,
"y": 448,
"width": 720,
"height": 20,
"text": "Celebrity threshold: >10K followers -> skip fanout-on-write, fetch on-read instead",
"fontSize": 12,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"strokeColor": "#c92a2a",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "hybrid-note",
"type": "text",
"x": 30,
"y": 472,
"width": 720,
"height": 20,
"text": "Hybrid model: fan-out-on-write for normal users, fan-out-on-read for celebrities to avoid write amplification",
"fontSize": 12,
"fontFamily": 1,
"textAlign": "left",
"verticalAlign": "top",
"strokeColor": "#e67700",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"opacity": 100
},
{
"id": "arrow-userpost-postservice",
"type": "arrow",
"x": 140,
"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-postservice-postdb",
"type": "arrow",
"x": 340,
"y": 69,
"width": 50,
"height": 0,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100,
"points": [[0, 0], [50, 0]],
"startArrowhead": null,
"endArrowhead": "arrow"
},
{
"id": "arrow-postservice-fanout",
"type": "arrow",
"x": 270,
"y": 94,
"width": 0,
"height": 46,
"strokeColor": "#e67700",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100,
"points": [[0, 0], [0, 46]],
"startArrowhead": null,
"endArrowhead": "arrow"
},
{
"id": "arrow-fanout-socialgraph",
"type": "arrow",
"x": 340,
"y": 166,
"width": 50,
"height": 0,
"strokeColor": "#495057",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"strokeStyle": "dashed",
"opacity": 100,
"points": [[0, 0], [50, 0]],
"startArrowhead": null,
"endArrowhead": "arrow"
},
{
"id": "arrow-fanout-feedcache",
"type": "arrow",
"x": 340,
"y": 165,
"width": 228,
"height": 0,
"strokeColor": "#c92a2a",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100,
"points": [[0, 0], [228, 0]],
"startArrowhead": null,
"endArrowhead": "arrow"
},
{
"id": "arrow-userfeed-feedservice",
"type": "arrow",
"x": 140,
"y": 339,
"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-feedservice-feedcache",
"type": "arrow",
"x": 650,
"y": 190,
"width": 0,
"height": 118,
"strokeColor": "#c92a2a",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 1,
"roughness": 1,
"strokeStyle": "dashed",
"opacity": 100,
"points": [[0, 0], [0, 118]],
"startArrowhead": null,
"endArrowhead": "arrow"
},
{
"id": "arrow-feedservice-rank",
"type": "arrow",
"x": 340,
"y": 339,
"width": 48,
"height": 0,
"strokeColor": "#862e9c",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100,
"points": [[0, 0], [48, 0]],
"startArrowhead": null,
"endArrowhead": "arrow"
},
{
"id": "arrow-rank-celebstore",
"type": "arrow",
"x": 540,
"y": 339,
"width": 32,
"height": 0,
"strokeColor": "#c92a2a",
"backgroundColor": "transparent",
"fillStyle": "solid",
"strokeWidth": 2,
"roughness": 1,
"opacity": 100,
"points": [[0, 0], [32, 0]],
"startArrowhead": null,
"endArrowhead": "arrow"
}
],
"appState": {
"gridSize": null,
"viewBackgroundColor": "#ffffff"
},
"files": {}
}%%