架构图里的形状怎么选？

服务用方框 [ ]，数据库用圆柱 [( )]，队列或外部系统用双方括号 [[ ]]，用户或终端用圆角 ( )。形状不影响语义，只是约定俗成。

层与层之间的线太多太乱怎么办？

可以从分组直接连线：应用层 --> 数据层，用一条线表示整层调用；或者只画主链路，次要依赖写在文档里。

这算逻辑架构还是部署架构？

这份是逻辑分层架构。部署架构（几台服务器、容器怎么分布）可以用同样的语法，把分组改成「服务器 A」「Kubernetes 集群」即可。

Web 应用系统架构图模板（前后端分离）

客户端、接入层、应用层、数据层四层的前后端分离 Web 系统架构图：浏览器与 App、Nginx 与 API 网关、三个业务服务、MySQL、Redis 与对象存储。适合技术方案与毕业设计，免费导出 PNG、Word、PPT。

预览用的是「靛蓝」主题，打开编辑器后可以换

在编辑器里打开免费 · 免登录 · 无水印

改文字、换主题，导出 Word / PPT / PDF

适用场景

技术方案评审、项目投标的技术架构章节、「基于 Spring Boot + Vue 的 XX 系统」毕业设计的系统架构一节。四层从上到下，每层一个分组，数据库用圆柱形节点。

怎么改成你的

把服务名换成你的模块（订单服务、支付服务、通知服务），加节点后从网关连一条线。
技术栈写进节点：S2[业务服务<br/>Spring Boot]、DB[(MySQL 8)]。
加消息队列：MQ[[RabbitMQ]]，双方括号表示队列 / 子流程形状。
分组名（客户端、接入层）在 subgraph 后面改。

Mermaid 代码

flowchart TB
    subgraph 客户端
        B[浏览器 / 网页]
        M[手机 App / 小程序]
    end
    subgraph 接入层
        N[Nginx 反向代理]
        G[API 网关]
    end
    subgraph 应用层
        S1[用户服务]
        S2[业务服务]
        S3[文件服务]
    end
    subgraph 数据层
        DB[(MySQL)]
        R[(Redis 缓存)]
        OSS[(对象存储)]
    end
    B --> N
    M --> N
    N --> G
    G --> S1
    G --> S2
    G --> S3
    S1 --> DB
    S2 --> DB
    S1 --> R
    S2 --> R
    S3 --> OSS

让 AI 按这个结构生成一份

把下面这段发给豆包、DeepSeek、Kimi 或元宝，再把它的回复整段粘贴到编辑器，会自动识别其中的代码。

请用 Mermaid 的 flowchart TB 语法画一张前后端分离的 Web 系统架构图：用 subgraph 分为客户端（浏览器、手机 App）、接入层（Nginx 反向代理、API 网关）、应用层（用户服务、业务服务、文件服务）、数据层（MySQL、Redis 缓存、对象存储，用圆柱形节点）。客户端经 Nginx 到网关，网关分发到三个服务，服务连接对应的数据存储。只输出 mermaid 代码块。

常见问题

架构图里的形状怎么选？: 服务用方框 [ ]，数据库用圆柱 [( )]，队列或外部系统用双方括号 [[ ]]，用户或终端用圆角 ( )。形状不影响语义，只是约定俗成。
层与层之间的线太多太乱怎么办？: 可以从分组直接连线：应用层 --> 数据层，用一条线表示整层调用；或者只画主链路，次要依赖写在文档里。
这算逻辑架构还是部署架构？: 这份是逻辑分层架构。部署架构（几台服务器、容器怎么分布）可以用同样的语法，把分组改成「服务器 A」「Kubernetes 集群」即可。