Session 2: 架构设计 - 先画框，再填色
上节课你想清楚要做什么了，这节课教你：怎么把想法变成一张图。
🎬 开场故事
小红做读书笔记工具。
她打开 AI："帮我写一个读书笔记 App"
AI 问："你想用什么技术？数据存哪儿？前端用什么框架？"
小红懵了："我...我不知道啊"
问题在哪？
小红直接跳到了"怎么实现"，但中间缺了一步——画个框图。
就像装修房子，你不会直接买砖吧？先画个平面图啊！
🧠 核心概念：先画框，再填色
系统设计师做架构设计，就干一件事：
用框框和箭头，画出系统长什么样。
别被"架构"这个词吓到，就是画几张图。
为什么要先画图？
- 看清全貌 - 不陷入细节
- 发现盲点 - 哎呀，这块没考虑
- 沟通工具 - 给 AI 看，给合伙人看，给未来的自己看
- 改起来便宜 - 改图5分钟，改代码5小时
🛠️ 实战工具：三层架构
最简单的架构，就三层：
┌─────────────────┐
│ 界面层 │ ← 用户看到什么
│ (Frontend) │
└────────┬────────┘
│
▼
┌─────────────────┐
│ 逻辑层 │ ← 处理数据
│ (Backend) │
└────────┬────────┘
│
▼
┌─────────────────┐
│ 数据层 │ ← 存东西
│ (Database) │
└─────────────────┘
界面层：用户看到的东西（网页、App界面）
逻辑层：处理数据的代码（检查、计算、转换）
数据层：存东西的地方（数据库、文件）
小红的读书笔记工具
┌─────────────────────────────┐
│ 手机界面 │
│ • 书籍列表 │
│ • 添加笔记表单 │
│ • 搜索框 │
└──────────────┬──────────────┘
│ 输入书名/笔记
▼
┌─────────────────────────────┐
│ 处理逻辑 │
│ • 检查输入是否合法 │
│ • 保存到数据库 │
│ • 搜索时查询数据库 │
└──────────────┬──────────────┘
│ 存/取数据
▼
┌─────────────────────────────┐
│ 数据存储 │
│ • 书籍表（书名、作者） │
│ • 笔记表（内容、标签、时间）│
└─────────────────────────────┘
就这么简单！不需要美术功底，框框箭头就行。
🎨 让 AI 帮你画专业的图
你说："我不会画这种图啊"
没关系，让 AI 帮你画。
Prompt 模板
根据以下需求，画出系统架构图：
项目：读书笔记工具
功能：
1. 用户添加书籍（书名、作者）
2. 用户添加笔记（摘抄、感想、标签）
3. 用户搜索笔记
4. 数据需要在手机和电脑同步
请用 Mermaid 语法画出架构图，包括：
- 用户层
- 前端层（Web界面）
- 后端层（API服务）
- 数据库层
- 各层之间的数据流向
AI 会生成这样的代码
graph TD
A[用户] -->|打开网页| B[浏览器/Web界面]
B -->|输入数据| C[后端API]
C -->|保存| D[(数据库)]
C -->|查询结果| B
D -->|返回数据| C
E[手机App] -->|同步请求| C
F[电脑网页] -->|同步请求| C
把这段代码贴到 Mermaid Live Editor 或者 Notion、GitHub 里，就能显示出漂亮的图！
📝 实战练习：画出你的系统
步骤 1：确定有哪些"角色"
谁参与你的系统？
- 用户（肯定要）
- 管理员（可能）
- 第三方服务（比如支付宝、微信）
步骤 2：确定有哪些"箱子"
每个箱子是一个模块：
- 用户界面（网页/App）
- 登录模块
- 核心功能模块
- 数据库
- 文件存储（如果有图片/视频）
步骤 3：画箭头——数据怎么流
问自己：
- 用户做了什么？
- 数据去哪里了？
- 返回什么结果？
小红的完整数据流
用户打开App → 显示书籍列表
↓
用户点击"添加书" → 弹出表单
↓
用户输入书名、作者 → 点击保存
↓
前端检查：书名不能为空？
↓
发送到后端API
↓
后端检查：这本书已存在？
↓
存入数据库
↓
返回"保存成功"
↓
前端显示新书在列表里
这就是数据流图——比三层架构更详细，但原理一样。
⚠️ 常见陷阱
陷阱 1：一开始就纠结技术细节
❌ "我用 React 还是 Vue？PostgreSQL 还是 MySQL？"
✅ 正确做法：先画框图，技术选型下节课讲
陷阱 2：画得太复杂
❌ 一张图里塞了 20 个框，自己都看不懂
✅ 正确做法：一张图只讲一件事。复杂系统拆成多张图
陷阱 3：不画数据流
❌ 只画"有哪些模块"，不画"数据怎么流动"
✅ 正确做法：跟着一个用户操作，画出完整路径
陷阱 4：画完不看
❌ 画完就放那儿，写代码时完全忘了
✅ 正确做法：把图贴在显眼位置，写代码前看一眼
🤖 AI 协作技巧
1. 用 AI 检查架构
我设计了一个读书笔记工具的架构：
[粘贴你的图或描述]
请检查：
1. 有没有遗漏的模块？
2. 数据流是否合理？
3. 如果用户量增大10倍，哪里会出问题？
4. 建议用什么技术实现？（简单版）
2. 让 AI 帮你优化
请帮我简化这个架构：
[粘贴]
要求：
- 第一版只做单机版，不要服务器
- 数据存在浏览器本地
- 怎么改最简单？
3. 生成 Mermaid 代码
请把我这段描述转成 Mermaid 流程图：
[你的描述]
✅ 本节课作业
用你 Session 1 的项目，完成：
作业 1：三层架构图
画出你的系统的：
- 界面层（用户看到什么）
- 逻辑层（处理什么）
- 数据层（存什么）
可以用纸笔画，也可以用 Mermaid。
作业 2：数据流图
选一个核心功能（比如"添加一条笔记"），画出完整数据流：
用户操作 → 前端处理 → 后端处理 → 数据库 → 返回结果
作业 3：给 AI 检查
把图发给 AI，问：
- "这个架构有什么问题？"
- "如果第一版只做单机版，怎么简化？"
作业 4（进阶）：生成 Mermaid 图
让 AI 帮你生成 Mermaid 代码，贴到 mermaid.live 看看效果。
📎 模板下载
空白架构图模板
我的项目：_________________
【三层架构】
┌─────────────────┐
│ 界面层 │ 用户看到：
│ │ 1. _________________
│ │ 2. _________________
│ │ 3. _________________
└────────┬────────┘
│
▼ 数据：_________________
┌─────────────────┐
│ 逻辑层 │ 处理什么：
│ │ 1. _________________
│ │ 2. _________________
│ │ 3. _________________
└────────┬────────┘
│
▼ 存：_________________
┌─────────────────┐
│ 数据层 │ 存什么数据：
│ │ • _________________
│ │ • _________________
│ │ • _________________
└─────────────────┘
【核心功能数据流】
功能名称：_________________
步骤 1：用户 _________________
↓
步骤 2：系统 _________________
↓
步骤 3：系统 _________________
↓
步骤 4：返回 _________________
🎯 下节课预告
Session 3: 技术选型 - 不要造轮子
我们会学习：
- 怎么选择技术栈（简单粗暴版）
- 优先用现成服务，别自己写
- Trade-off：快速上线 vs 长期维护
- 给非技术人员的决策清单
记得带上你的架构图！
💬 常见问题
Q: 我不会画画，能画架构图吗？
A: 架构图不是美术作品！框框箭头就行。你看我上面的图，就是字符画的，一样能用。
Q: 我的项目很简单，有必要画架构吗？
A: 越简单的项目越要画！因为简单项目容易想复杂，一画才发现"原来就这几步"。
Q: 架构图会改吗？
A: 会！而且应该改。一开始的图通常是错的，做着做着就明白该怎么调整了。改图不丢人，闷头写代码写错了才尴尬。
完成这节课，你学会了如何把模糊的想法变成清晰的结构。
下节课，我们聊聊：用什么东西来实现这个结构。
下节课见！ 🚀