前后端分离架构图怎么画

前后端分离架构图怎么画

前后端分离架构图应从左到右画出客户端、CDN / 网关（或 BFF）、业务服务与数据层，并用实线 / 虚线区分同步调用与消息异步。

「前后端分离」是现代 Web 项目的事实标准：前端跑在浏览器 / 小程序 / App，后端提供 RESTful / GraphQL API，中间通过 BFF（Backend For Frontend）或网关衔接。一张清楚的架构图能让产品、前端、后端、运维快速对齐「请求从哪进来、静态资源谁托管、鉴权在哪做」。用 构图AI 可一句话生成手绘风架构图；基于 Excalidraw 可编辑，支持导出 PNG / SVG / .excalidraw。产品内含 12 种图类型技能与约 25 个示例，可直接改造前后端与微服务相关模板。

何时需要画

• 项目启动：技术方案评审，定下整体结构。
• 新人 onboarding：解释「这个请求从哪进来、走哪些服务」。
• 性能优化：找出链路上的瓶颈（如多次串行调用、无缓存）。
• 故障复盘：定位问题发生在接入层、服务层还是数据层。
• 多端扩展：新增小程序 / App 时，画清共享与分端部分。

核心节点

典型前后端分离架构包含：

1. 客户端（Client）：Web / 小程序 / App。
2. CDN：托管前端静态资源。
3. BFF / 网关：聚合后端接口、做鉴权、限流。
4. 业务服务：用户、订单、商品等服务（可单体也可微服务）。
5. 缓存（Redis）：热点数据 / 会话。
6. 数据库（DB）：主从 / 分库分表。
7. 消息队列（MQ）：异步任务 / 事件。
8. 第三方服务：支付、短信、对象存储。

节点可以裁剪：没有 MQ 就不要硬画；没有 BFF 就写清「网关直连服务」。

常见结构

画图要点

• 从左到右：客户端在左、DB 在右，符合阅读习惯。
• 横向分层：接入层 / 服务层 / 数据层，用浅色背景区分。
• 同步实线、异步虚线：MQ 调用用虚线箭头。
• 关键标注：标出协议（HTTP / gRPC / WebSocket）和是否鉴权。
• 别画部署细节：K8s Pod 数量留给部署图；本图聚焦逻辑分层。

手动画 vs AI 生成

前后端分离架构图节点不一定多，但层级要对齐，手动调框很费时。

AI 生成特别适合评审草稿和文档配图。登录后 1 次免费额度可验证效果；VIP 不限制 AI 画图，方便按评审意见多次迭代分层。

画一张前后端分离的 Web 应用架构图，手绘风。
分层：
- 客户端层：Web 浏览器、小程序、App。
- 接入层：CDN（托管静态资源）、API 网关（含鉴权、限流）。
- 服务层：用户服务、订单服务、商品服务（微服务，相互通过 gRPC 调用）。
- 数据层：Redis 缓存、MySQL 主从、Kafka 消息队列。
- 第三方：支付宝、阿里云 OSS。
流程：客户端 → CDN 加载页面 → 调用 API 网关 → 鉴权 → 路由到对应服务 → 读写数据。
异步：订单服务发消息到 Kafka，库存服务消费。

参考 前后端架构示例 与 微服务示例 改造。

行业变体

• SaaS 多租户：增加「租户隔离」节点，详见 SaaS 多租户示例。
• 小程序：客户端换成小程序 + 微信开放接口，详见 微信登录示例。
• 中台：业务能力下沉到中台，前台调用中台 API，图上用「前台 / 中台 / 后台」三带分区。
• 边缘渲染：增加 SSR / 边缘节点，注意与 CDN 的关系标注。

生成后在画布上优先做三件事：统一服务命名、删掉演示用占位框、给异步链路加「via Kafka」之类短标注。导出时 PNG 进飞书 / Notion，SVG 进幻灯片，.excalidraw 进团队网盘。

评审检查清单

一张前后端分离架构图是否「能上会」，可以用下面清单快速自检：

• 静态资源与 API 请求是否分路径画清（CDN vs 网关）？
• 鉴权发生在网关、BFF 还是各服务？图上能否一眼看出？
• 读多写少的热点有没有 Redis？没有的话是否故意省略并加了注释？
• 第三方回调（支付、短信）从哪边进入？有没有画出公网入口？
• 同步链路与 MQ 异步是否用线型区分？

若以上任一题答不上来，与其美化配色，不如回到 prompt 补约束再生成一版。架构图的读者经常包含前端与运维：前端关心「首屏资源从哪来」，运维关心「流量从哪进、依赖谁」。两端诉求都照顾到，这张图才算完成沟通任务。更细的后端拆分见 微服务架构指南；登录与 Token 细节则链到 JWT 登录架构，避免在一张总图上画爆炸。

还有一个实用技巧：为「本地开发拓扑」单独保留一版简化图——去掉 CDN、多机房与部分第三方，只保留浏览器、本地 API、本地 DB。新人配环境时看这版，上线评审时看完整版，两套图都用同一套服务命名，切换成本最低。AI 生成简化版时加一句「省略 CDN 与第三方，仅保留本地主链路」即可。若存在 GraphQL 与 REST 并存，请在接入层标注各自入口，避免读者以为所有客户端都走同一协议。文档迭代时把架构图版本号与发布版本对齐，回看事故会轻松很多。移动端若走独立 BFF，请在图上画清「Web BFF / App BFF」是否共享鉴权中间件；共享与否直接影响排障时该查哪份日志。完成这些标注后，这张前后端分离图才算真正可运维。导出前再用一分钟扫一眼左右阅读顺序，能避免评审现场临时改布局。

相关指南

• 微服务架构：前后端分离的后端延伸。
• JWT 登录架构：典型接入层认证方案。
• API 网关示例：BFF / 网关的具体实现。