draw画图

flowchart TD%% 定义样式类 (深色主题)classDef darkNode fill:#2d2d2d,stroke:#ffffff,stroke-width:1px,color:#ffffff,rx:5,ry:5;classDef layerBox fill:#1a1a1a,stroke:#ffffff,stroke-width:1px,stroke-dasharray: 5 5,color:#cccccc;%% 1. 客户端层subgraph ClientLayer [客户端层]direction LRWeb[Web 浏览器]:::darkNodeMobile[移动应用]:::darkNodeWeChat[微信小程序]:::darkNodeend%% 2. 基础设施层subgraph InfraLayer [基础设施层]direction TBCDN[CDN 加速]:::darkNodeNginx[负载均衡 Nginx]:::darkNodeGateway[API 网关]:::darkNodeend%% 3. 微服务层subgraph ServiceLayer [微服务层]direction LRAuth[认证服务]:::darkNodeCourse[课程服务]:::darkNodeLearning[学习服务]:::darkNodeAppSvc[应用服务]:::darkNodeExam[考试服务]:::darkNodeCommunity[社区服务]:::darkNodePayment[支付服务]:::darkNodeend%% 4. 数据层subgraph DataLayer [数据层]direction LROSS[对象存储]:::darkNodeRedis[Redis 缓存]:::darkNodePG[(PostgreSQL)]:::darkNodeES[弹性搜索]:::darkNodeend%% 连接关系 - 客户端到基础设施Web -- CDNMobile -- CDNWeChat -- CDNCDN -- NginxNginx -- Gateway%% 连接关系 - 网关到服务Gateway -- AuthGateway -- CourseGateway -- LearningGateway -- AppSvcGateway -- ExamGateway -- CommunityGateway -- Payment%% 连接关系 - 服务到数据 (简化逻辑映射)Auth -- RedisCourse -- OSSCourse -- PGLearning -- PGExam -- PGCommunity -- ESPayment -- PG%% 应用层样式class ClientLayer,InfraLayer,ServiceLayer,DataLayer layerBox代码说明分层结构(subgraph)使用了4个子图分别代表客户端层、基础设施层、微服务层和数据层实现了垂直排列。样式定义(classDef)darkNode模拟图片中的深灰色方块白字白边。layerBox模拟图片中的大框使用虚线边框区分区域。连接逻辑所有客户端指向CDN。流量依次经过Nginx-API网关。网关分发到所有微服务。微服务根据业务逻辑连接到不同的数据库如认证连Redis课程连OSS和PG等。