📌 项目地址：ByteByteGoHq/system-design-101 | ⭐ 84,286 颗星 | 📜 未标注
什么是 System Design 101？
ByteByteGoHq/system-design-101 是一个 GitHub 仓库（星标 84,286），它的目标是用可视化图表和通俗语言解释复杂的系统架构。无论是准备系统设计面试，还是想真正理解系统底层如何工作，这个仓库都能提供帮助。官方描述写得非常清楚：Explain complex systems using visuals and simple terms. Help you prepare for system design interviews.
仓库本身不包含可执行的代码或命令行工具，而是一份精心组织的知识索引，每个主题链接到 ByteByteGo 网站上的详细图文文章。同时，项目背后还有同名 YouTube 频道和 Newsletter，形成多媒介的学习体系。
核心价值：让抽象概念看得见
系统设计面试中常见的主题——负载均衡、API 网关、WebSocket、gRPC、NAT、浏览器渲染、HTTP/2 等——往往难以用文字精准表达。这个仓库用一张张示意图，把流程、组件关系和协议交互画出来。例如：
- “How does gRPC work” 用序列图展示客户端-服务器之间的调用过程。
- “Key Use Cases for Load Balancers” 用对比图说明不同场景下的选型差异。
- “How Browsers Render Web Pages” 把 DOM 树、CSSOM、渲染树、重排/重绘画成流程图。
对求职者而言，这些图可以直接用作面试时的辅助讲解，也可以帮助自己建立清晰的架构脑图。
实际用法：按主题学习，配合视频和图文
仓库的 README 给出了详细的目录（Table of Contents），目前包含 API & Web Development 大类下的 20+ 个主题，每一个都是一个超链接。例如：
- Short/long polling, SSE, WebSocket
- Load Balancer vs. API Gateway
- How does REST API work?
- 18 Common Ports Worth Knowing
使用方法很简单：浏览器打开仓库，点击任意主题链接，即可跳转到 ByteByteGo 的图文指南。同时，官方也提供了 YouTube 频道和 Newsletter 作为补充——你可以订阅它们的邮件，每周获取新图解。
没有需要安装的命令行，也不需要配置环境。这是一个纯粹的学习资源。
和其他系统设计资源有何不同？
市面上最有名的同类仓库是 donnemartin/system-design-primer（星标 28 万）。两者侧重点不同：
| 维度 | System Design 101 | System Design Primer |
|---|---|---|
| 内容形式 | 每篇文章配多张图解，短文讲解 | 长篇文字教程，附带 OOD 与设计题 |
| 覆盖范围 | 聚焦网络协议、API、中间件等基础概念 | 涵盖分布式系统、数据库、缓存、一致性等深度话题 |
| 互动性 | 链接到外部博客/视频频道 | 仓库内包含完整代码示例和设计文档 |
| 维护风格 | 图表与思维导图驱动 | 文字驱动 + 底层原理 |
如果你时间紧张、需要快速理解概念，或者视觉记忆更强，System Design 101 更合适——把一张图看懂，基本就能回答面试中 80% 的基础问题。
需要注意的几点
- 内容定位偏入门～中级：仓库目前列出的主题大多是 API、网络、浏览器、端口等基础，缺少分布式存储、一致性协议、微服务拆分等高级话题。如果你的目标是超大系统（比如设计一个像 TikTok 那样几十亿用户的应用），建议另外搭配更深的资料。
- 部分内容在外部网站：点击链接会跳转到 bytebytego.com，该网站需要独立访问，有一定网络要求。仓库本身只是跳板。
- 许可证：README 中没有明确声明许可证，建议不要直接复制仓库里的文字或图片用于商业用途，个人学习无碍。
- 持续更新：项目通过 Pull Request 和 Issue 维护，目前活跃度较高，你可以关注 ByteByteGoHq 的 YouTube 获取最新视频。
总结
如果你正在备战系统设计面试，或者想用最短时间了解日常开发中常见的架构概念，那么 ByteByteGoHq/system-design-101 值得点赞收藏。它不是万能宝典，但绝对是高效学习的加速器——拿起一张图，胜过读十页文字。