AI-Generated SVG View Details - <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>微服务架构图</title> <style> body { margin: 0; padding: 20px; background-color: #f0f2f5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } svg { max-width: 100%; height: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } </style> </head> <body> <svg width="1000" height="800" viewBox="0 0 1000 800">  <text x="500" y="30" text-anchor="middle" font-size="24" font-weight="bold" fill="#1a365d">微服务架构图</text>  <rect x="50" y="60" width="900" height="100" fill="#ebf8ff" stroke="#90caf9" stroke-width="2" rx="4" ry="4" /> <text x="70" y="80" font-size="16" font-weight="bold" fill="#1a365d">客户端层</text>  <rect x="80" y="100" width="100" height="50" fill="#667eea" stroke="#5a67d8" stroke-width="2" rx="8" ry="8"> <title>用户：系统的最终使用者</title> </rect> <text x="130" y="132" text-anchor="middle" font-size="14" fill="#ffffff">用户</text>  <rect x="200" y="100" width="120" height="50" fill="#667eea" stroke="#5a67d8" stroke-width="2" rx="8" ry="8"> <title>Web前端：浏览器端应用程序</title> </rect> <text x="260" y="132" text-anchor="middle" font-size="14" fill="#ffffff">Web前端</text>  <rect x="340" y="100" width="120" height="50" fill="#667eea" stroke="#5a67d8" stroke-width="2" rx="8" ry="8"> <title>移动端：手机和平板应用</title> </rect> <text x="400" y="132" text-anchor="middle" font-size="14" fill="#ffffff">移动端</text>  <rect x="480" y="100" width="120" height="50" fill="#667eea" stroke="#5a67d8" stroke-width="2" rx="8" ry="8"> <title>桌面客户端：PC端应用程序</title> </rect> <text x="540" y="132" text-anchor="middle" font-size="14" fill="#ffffff">桌面客户端</text>  <rect x="620" y="100" width="120" height="50" fill="#667eea" stroke="#5a67d8" stroke-width="2" rx="8" ry="8"> <title>第三方应用：集成的外部系统</title> </rect> <text x="680" y="132" text-anchor="middle" font-size="14" fill="#ffffff">第三方应用</text>  <rect x="50" y="180" width="900" height="100" fill="#f0fff4" stroke="#68d391" stroke-width="2" rx="4" ry="4" /> <text x="70" y="200" font-size="16" font-weight="bold" fill="#1a365d">API网关层</text>  <rect x="400" y="220" width="200" height="50" fill="#48bb78" stroke="#38a169" stroke-width="2" rx="8" ry="8"> <title>API网关：统一入口，路由和安全控制</title> </rect> <text x="500" y="252" text-anchor="middle" font-size="14" fill="#ffffff">API网关</text>  <rect x="50" y="300" width="900" height="200" fill="#f7fafc" stroke="#cbd5e0" stroke-width="2" rx="4" ry="4" /> <text x="70" y="320" font-size="16" font-weight="bold" fill="#1a365d">微服务层</text>  <rect x="80" y="340" width="120" height="50" fill="#ed8936" stroke="#dd6b20" stroke-width="2" rx="8" ry="8"> <title>用户服务：管理用户信息和认证</title> </rect> <text x="140" y="372" text-anchor="middle" font-size="14" fill="#ffffff">用户服务</text>  <rect x="220" y="340" width="120" height="50" fill="#ed8936" stroke="#dd6b20" stroke-width="2" rx="8" ry="8"> <title>认证服务：处理用户身份验证和授权</title> </rect> <text x="280" y="372" text-anchor="middle" font-size="14" fill="#ffffff">认证服务</text>  <rect x="360" y="340" width="120" height="50" fill="#ed8936" stroke="#dd6b20" stroke-width="2" rx="8" ry="8"> <title>订单服务：处理订单创建和管理</title> </rect> <text x="420" y="372" text-anchor="middle" font-size="14" fill="#ffffff">订单服务</text>  <rect x="500" y="340" width="120" height="50" fill="#ed8936" stroke="#dd6b20" stroke-width="2" rx="8" ry="8"> <title>商品服务：管理商品信息和库存</title> </rect> <text x="560" y="372" text-anchor="middle" font-size="14" fill="#ffffff">商品服务</text>  <rect x="640" y="340" width="120" height="50" fill="#ed8936" stroke="#dd6b20" stroke-width="2" rx="8" ry="8"> <title>支付服务：处理支付交易</title> </rect> <text x="700" y="372" text-anchor="middle" font-size="14" fill="#ffffff">支付服务</text>  <rect x="780" y="340" width="120" height="50" fill="#ed8936" stroke="#dd6b20" stroke-width="2" rx="8" ry="8"> <title>通知服务：发送邮件、短信和推送通知</title> </rect> <text x="840" y="372" text-anchor="middle" font-size="14" fill="#ffffff">通知服务</text>  <rect x="400" y="410" width="200" height="50" fill="#ed8936" stroke="#dd6b20" stroke-width="2" rx="8" ry="8"> <title>搜索服务：提供全文搜索功能</title> </rect> <text x="500" y="442" text-anchor="middle" font-size="14" fill="#ffffff">搜索服务</text>  <rect x="50" y="520" width="900" height="100" fill="#ffffff" stroke="#cbd5e0" stroke-width="2" rx="4" ry="4" /> <text x="70" y="540" font-size="16" font-weight="bold" fill="#1a365d">数据层</text>  <rect x="150" y="560" width="120" height="50" fill="#4299e1" stroke="#3182ce" stroke-width="2" rx="8" ry="8"> <title>数据库：存储业务数据</title> </rect> <text x="210" y="592" text-anchor="middle" font-size="14" fill="#ffffff">多个数据库</text>  <rect x="290" y="560" width="120" height="50" fill="#4299e1" stroke="#3182ce" stroke-width="2" rx="8" ry="8"> <title>缓存：提高数据访问速度</title> </rect> <text x="350" y="592" text-anchor="middle" font-size="14" fill="#ffffff">缓存</text>  <rect x="430" y="560" width="120" height="50" fill="#4299e1" stroke="#3182ce" stroke-width="2" rx="8" ry="8"> <title>搜索引擎：提供全文检索能力</title> </rect> <text x="490" y="592" text-anchor="middle" font-size="14" fill="#ffffff">搜索引擎</text>  <rect x="50" y="640" width="900" height="100" fill="#e2e8f0" stroke="#a0aec0" stroke-width="2" rx="4" ry="4" /> <text x="70" y="660" font-size="16" font-weight="bold" fill="#1a365d">基础设施层</text>  <rect x="100" y="680" width="120" height="50" fill="#718096" stroke="#4a5568" stroke-width="2" rx="8" ry="8"> <title>服务注册与发现：管理服务实例和路由</title> </rect> <text x="160" y="712" text-anchor="middle" font-size="14" fill="#ffffff">服务注册与发现</text>  <rect x="240" y="680" width="120" height="50" fill="#718096" stroke="#4a5568" stroke-width="2" rx="8" ry="8"> <title>配置中心：集中管理配置信息</title> </rect> <text x="300" y="712" text-anchor="middle" font-size="14" fill="#ffffff">配置中心</text>  <rect x="380" y="680" width="120" height="50" fill="#718096" stroke="#4a5568" stroke-width="2" rx="8" ry="8"> <title>消息队列：实现异步通信</title> </rect> <text x="440" y="712" text-anchor="middle" font-size="14" fill="#ffffff">消息队列</text>  <rect x="520" y="680" width="120" height="50" fill="#718096" stroke="#4a5568" stroke-width="2" rx="8" ry="8"> <title>日志系统：收集和分析日志</title> </rect> <text x="580" y="712" text-anchor="middle" font-size="14" fill="#ffffff">日志系统</text>  <rect x="660" y="680" width="120" height="50" fill="#718096" stroke="#4a5568" stroke-width="2" rx="8" ry="8"> <title>监控告警：监控系统状态和性能</title> </rect> <text x="720" y="712" text-anchor="middle" font-size="14" fill="#ffffff">监控告警</text>  <rect x="800" y="680" width="120" height="50" fill="#718096" stroke="#4a5568" stroke-width="2" rx="8" ry="8"> <title>链路追踪：跟踪请求调用链路</title> </rect> <text x="860" y="712" text-anchor="middle" font-size="14" fill="#ffffff">链路追踪</text>  <line x1="130" y1="150" x2="130" y2="180" stroke="#90caf9" stroke-width="2" stroke-dasharray="5,5" /> <line x1="260" y1="150" x2="260" y2="180" stroke="#90caf9" stroke-width="2" stroke-dasharray="5,5" /> <line x1="400" y1="150" x2="400" y2="180" stroke="#90caf9" stroke-width="2" stroke-dasharray="5,5" /> <line x1="540" y1="150" x2="540" y2="180" stroke="#90caf9" stroke-width="2" stroke-dasharray="5,5" /> <line x1="680" y1="150" x2="680" y2="180" stroke="#90caf9" stroke-width="2" stroke-dasharray="5,5" /> <line x1="500" y1="270" x2="500" y2="300" stroke="#68d391" stroke-width="2" stroke-dasharray="5,5" /> <line x1="140" y1="390" x2="140" y2="520" stroke="#cbd5e0" stroke-width="2" stroke-dasharray="5,5" /> <line x1="280" y1="390" x2="280" y2="520" stroke="#cbd5e0" stroke-width="2" stroke-dasharray="5,5" /> <line x1="420" y1="390" x2="420" y2="520" stroke="#cbd5e0" stroke-width="2" stroke-dasharray="5,5" /> <line x1="560" y1="390" x2="560" y2="520" stroke="#cbd5e0" stroke-width="2" stroke-dasharray="5,5" /> <line x1="700" y1="390" x2="700" y2="520" stroke="#cbd5e0" stroke-width="2" stroke-dasharray="5,5" /> <line x1="840" y1="390" x2="840" y2="520" stroke="#cbd5e0" stroke-width="2" stroke-dasharray="5,5" /> <line x1="500" y1="460" x2="500" y2="520" stroke="#cbd5e0" stroke-width="2" stroke-dasharray="5,5" /> <line x1="210" y1="610" x2="210" y2="640" stroke="#cbd5e0" stroke-width="2" stroke-dasharray="5,5" /> <line x1="350" y1="610" x2="350" y2="640" stroke="#cbd5e0" stroke-width="2" stroke-dasharray="5,5" /> <line x1="490" y1="610" x2="490" y2="640" stroke="#cbd5e0" stroke-width="2" stroke-dasharray="5,5" /> </svg> <script> // 点击事件模拟弹窗 const rects = document.querySelectorAll('rect'); rects.forEach(rect => { rect.addEventListener('click', () => { const title = rect.querySelector('title')?.textContent || '无描述'; alert(`服务详情：\n${title}`); }); // 添加鼠标样式提示可点击 rect.style.cursor = 'pointer'; }); </script> </body> </html> High-Quality Vector Graphics