Back to Details

architecture

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Architecture Diagram Generator

架构图生成器

Quick Start: Create HTML structure with flexible layout (single/double/triple column) → Define CSS styles for layers and grids → Add content with categorized panels → Use semantic colors for different layers.
快速开始: 创建具有灵活布局（单列/双列/三列）的HTML结构 → 为图层和网格定义CSS样式 → 添加带有分类面板的内容 → 为不同图层使用语义化颜色。

Critical Rules

关键规则

Rule 1: Direct HTML Embedding

规则1：直接嵌入HTML

IMPORTANT: Write architecture diagrams as direct HTML in Markdown. NEVER use code blocks (
```html
). The HTML should be embedded directly in the document without any fencing.
重要提示：将架构图以直接HTML的形式写入Markdown。绝对不要使用代码块（
```html
）。HTML应直接嵌入文档中，无需任何包裹。

Rule 2: No Empty Lines in HTML Structure

规则2：HTML结构中无空行

CRITICAL: Do NOT add any empty lines within the HTML architecture diagram structure. Keep the entire HTML block continuous to prevent parsing errors.
关键要求：请勿在HTML架构图结构内添加任何空行。保持整个HTML块连续，以避免解析错误。

Rule 3: Incremental Creation Approach

规则3：增量创建方法

RECOMMENDED: Create architecture diagrams in multiple steps:
  1. First: Create the overall framework (wrapper, sidebars, main structure) and define all CSS styles
  2. Second: Add layer containers with titles
  3. Third: Fill in components layer by layer
  4. Fourth: Add detailed content and refinements
推荐做法：分多步创建架构图：
  1. 第一步：创建整体框架（容器、侧边栏、主结构）并定义所有CSS样式
  2. 第二步：添加带有标题的图层容器
  3. 第三步：逐层填充组件
  4. 第四步：添加详细内容并优化

Rule 4: Flexible Layout Structure

规则4：灵活布局结构

Architecture diagrams can use flexible layouts based on complexity:
  • Single Column: Main content only (for simple architectures)
  • Two Column: Main content + one sidebar (left or right)
  • Three Column: Full layout with both sidebars (for complex systems)
    • Left Sidebar: Supporting systems (monitoring, operations, analytics)
    • Main Content: Core architecture layers (user, application, data, infrastructure)
    • Right Sidebar: Cross-cutting concerns (security, compliance, governance)
架构图可根据复杂度使用灵活布局：
  • 单列：仅包含主内容（适用于简单架构）
  • 双列：主内容 + 一个侧边栏（左侧或右侧）
  • 三列：包含两个侧边栏的完整布局（适用于复杂系统）
    • 左侧侧边栏：支撑系统（监控、运维、分析）
    • 主内容区：核心架构层（用户、应用、数据、基础设施）
    • 右侧侧边栏：横切关注点（安全、合规、治理）

Rule 5: Layer-Based Organization

规则5：基于图层的组织

Each layer should have:
  • Clear semantic meaning (User, Application, AI/Logic, Data, Infrastructure)
  • Consistent color coding
  • Grid-based layout for components
  • Appropriate nesting for sub-components
每个图层应包含：
  • 清晰的语义（用户、应用、AI/逻辑、数据、基础设施）
  • 统一的颜色编码
  • 基于网格的组件布局
  • 适合子组件的嵌套结构

Rule 6: Color Semantics

规则6：颜色语义

Use consistent colors for layer types:
  • User Layer: Blue gradient (
    #dbeafe
    to 
    #bfdbfe
    )
  • Application Layer: Yellow/Orange gradient (
    #fef3c7
    to 
    #fde68a
    )
  • AI/Logic Layer: Green gradient (
    #dcfce7
    to 
    #bbf7d0
    )
  • Data Layer: Pink gradient (
    #fce7f3
    to 
    #fbcfe8
    )
  • Infrastructure Layer: Purple gradient (
    #e0e7ff
    to 
    #c7d2fe
    )
  • External Services: Gray gradient (
    #f1f5f9
    to 
    #e2e8f0
    ) with dashed border
为不同类型的图层使用统一颜色：
  • 用户层：蓝色渐变（
    #dbeafe
    至 
    #bfdbfe
    ）
  • 应用层：黄/橙色渐变（
    #fef3c7
    至 
    #fde68a
    ）
  • AI/逻辑层：绿色渐变（
    #dcfce7
    至 
    #bbf7d0
    ）
  • 数据层：粉色渐变（
    #fce7f3
    至 
    #fbcfe8
    ）
  • 基础设施层：紫色渐变（
    #e0e7ff
    至 
    #c7d2fe
    ）
  • 外部服务：灰色渐变（
    #f1f5f9
    至 
    #e2e8f0
    ），带虚线边框

Basic Architecture Template

基础架构模板

USAGE NOTE: Copy the HTML below directly into your Markdown document. Do NOT wrap it in code blocks. Remove all empty lines to keep it continuous.
<div style="width: 1200px; box-sizing: border-box; position: relative;"> <style scoped> .arch-wrapper { display: flex; gap: 12px; }.arch-sidebar { width: 165px; flex-shrink: 0; }.arch-main { flex: 1; min-width: 0; }.arch-title { text-align: center; font-size: 22px; font-weight: bold; color: #1e293b; margin-bottom: 16px; } .arch-layer { margin: 10px 0; padding: 14px; border-radius: 10px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1); }.arch-layer-title { font-size: 14px; font-weight: bold; color: #1e293b; margin-bottom: 10px; text-align: center; } .arch-grid { display: grid; gap: 8px; }.arch-grid-2 { grid-template-columns: repeat(2, 1fr); }.arch-grid-3 { grid-template-columns: repeat(3, 1fr); }.arch-grid-4 { grid-template-columns: repeat(4, 1fr); }.arch-grid-5 { grid-template-columns: repeat(5, 1fr); }.arch-grid-6 { grid-template-columns: repeat(6, 1fr); } .arch-box { border-radius: 6px; padding: 8px; text-align: center; font-size: 11px; font-weight: 600; line-height: 1.35; color: #0f172a; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(15, 23, 42, 0.1); }.arch-box.highlight { background: linear-gradient(135deg, #fef08a 0%, #fde047 100%); border: 2px solid #eab308; }.arch-box.tech { font-size: 10px; background: rgba(255, 255, 255, 0.7); } .arch-layer.external { background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); border: 2px dashed #64748b; }.arch-layer.user { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); border: 2px solid #3b82f6; }.arch-layer.application { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 2px solid #f59e0b; }.arch-layer.ai { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); border: 2px solid #22c55e; }.arch-layer.data { background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%); border: 2px solid #ec4899; }.arch-layer.infra { background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); border: 2px solid #6366f1; } .arch-sidebar-panel { border-radius: 8px; padding: 10px; background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); border: 2px solid #9ca3af; margin-bottom: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); }.arch-sidebar-title { font-size: 12px; font-weight: bold; text-align: center; color: #374151; margin-bottom: 6px; }.arch-sidebar-item { font-size: 10px; text-align: center; color: #1f2937; background: rgba(255, 255, 255, 0.8); padding: 5px; border-radius: 4px; margin: 3px 0; border: 1px solid rgba(0, 0, 0, 0.05); }.arch-sidebar-item.metric { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border: 1px solid #86efac; font-weight: 600; } </style> <div class="arch-title">System Architecture Overview</div> <div class="arch-wrapper"> <div class="arch-sidebar"> <div class="arch-sidebar-panel"><div class="arch-sidebar-title">📊 Monitoring</div><div class="arch-sidebar-item">Application Metrics</div><div class="arch-sidebar-item">Performance Tracking</div><div class="arch-sidebar-item">Health Checks</div><div class="arch-sidebar-item">Alert Management</div></div> <div class="arch-sidebar-panel"><div class="arch-sidebar-title">📈 Analytics</div><div class="arch-sidebar-item">User Behavior</div><div class="arch-sidebar-item">Business KPIs</div><div class="arch-sidebar-item">Technical Metrics</div><div class="arch-sidebar-item">Custom Reports</div></div> <div class="arch-sidebar-panel"><div class="arch-sidebar-title">🔄 Operations</div><div class="arch-sidebar-item">CI/CD Pipeline</div><div class="arch-sidebar-item">Deployment</div><div class="arch-sidebar-item">Configuration</div><div class="arch-sidebar-item">Maintenance</div></div> </div> <div class="arch-main"> <div class="arch-layer user"> <div class="arch-layer-title">User Interface Layer</div> <div class="arch-grid arch-grid-4"><div class="arch-box">Web App<br><small>React/Vue</small></div><div class="arch-box">Mobile App<br><small>React Native</small></div><div class="arch-box">Desktop App<br><small>Electron</small></div><div class="arch-box">API Client<br><small>REST/GraphQL</small></div></div> </div> <div class="arch-layer application"> <div class="arch-layer-title">Application Services Layer</div> <div class="arch-grid arch-grid-3"><div class="arch-box">Business Logic<br><small>Core Services</small></div><div class="arch-box highlight">API Gateway<br><small>Routing & Auth</small></div><div class="arch-box">Background Jobs<br><small>Queue Processing</small></div></div> </div> <div class="arch-layer ai"> <div class="arch-layer-title">Intelligence Layer</div> <div class="arch-grid arch-grid-2"><div class="arch-box">ML Models<br><small>Inference Engine</small></div><div class="arch-box">Rule Engine<br><small>Business Rules</small></div></div> </div> <div class="arch-layer data"> <div class="arch-layer-title">Data Layer</div> <div class="arch-grid arch-grid-4"><div class="arch-box tech">Primary DB<br><small>PostgreSQL</small></div><div class="arch-box tech">Cache<br><small>Redis</small></div><div class="arch-box tech">Search<br><small>Elasticsearch</small></div><div class="arch-box tech">File Storage<br><small>S3/MinIO</small></div></div> </div> <div class="arch-layer infra"> <div class="arch-layer-title">Infrastructure Layer</div> <div class="arch-grid arch-grid-5"><div class="arch-box tech">Container<br><small>Docker/K8s</small></div><div class="arch-box tech">Load Balancer<br><small>Nginx</small></div><div class="arch-box tech">Message Queue<br><small>RabbitMQ</small></div><div class="arch-box tech">Logging<br><small>ELK Stack</small></div><div class="arch-box tech">CDN<br><small>CloudFlare</small></div></div> </div> <div class="arch-layer external"> <div class="arch-layer-title">External Services</div> <div class="arch-grid arch-grid-4"><div class="arch-box tech">Third-party APIs<br><small>Payment/Auth</small></div><div class="arch-box tech">Cloud Services<br><small>AWS/Azure</small></div><div class="arch-box tech">SaaS Tools<br><small>Analytics</small></div><div class="arch-box tech">Integrations<br><small>Webhooks</small></div></div> </div> </div> <div class="arch-sidebar"> <div class="arch-sidebar-panel"><div class="arch-sidebar-title">🔐 Security</div><div class="arch-sidebar-item">Authentication</div><div class="arch-sidebar-item">Authorization</div><div class="arch-sidebar-item">Data Encryption</div><div class="arch-sidebar-item">Network Security</div></div> <div class="arch-sidebar-panel"><div class="arch-sidebar-title">📋 Compliance</div><div class="arch-sidebar-item">Audit Logging</div><div class="arch-sidebar-item">Data Privacy</div><div class="arch-sidebar-item">Regulatory</div><div class="arch-sidebar-item">Standards</div></div> <div class="arch-sidebar-panel"><div class="arch-sidebar-title">💾 Backup</div><div class="arch-sidebar-item">Data Backup</div><div class="arch-sidebar-item">Disaster Recovery</div><div class="arch-sidebar-item">High Availability</div><div class="arch-sidebar-item">Failover</div></div> </div> </div> </div> ```
使用说明：直接复制以下HTML到你的Markdown文档中。请勿用代码块包裹。删除所有空行以保持内容连续。
<div style="width: 1200px; box-sizing: border-box; position: relative;"> <style scoped> .arch-wrapper { display: flex; gap: 12px; }.arch-sidebar { width: 165px; flex-shrink: 0; }.arch-main { flex: 1; min-width: 0; }.arch-title { text-align: center; font-size: 22px; font-weight: bold; color: #1e293b; margin-bottom: 16px; } .arch-layer { margin: 10px 0; padding: 14px; border-radius: 10px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1); }.arch-layer-title { font-size: 14px; font-weight: bold; color: #1e293b; margin-bottom: 10px; text-align: center; } .arch-grid { display: grid; gap: 8px; }.arch-grid-2 { grid-template-columns: repeat(2, 1fr); }.arch-grid-3 { grid-template-columns: repeat(3, 1fr); }.arch-grid-4 { grid-template-columns: repeat(4, 1fr); }.arch-grid-5 { grid-template-columns: repeat(5, 1fr); }.arch-grid-6 { grid-template-columns: repeat(6, 1fr); } .arch-box { border-radius: 6px; padding: 8px; text-align: center; font-size: 11px; font-weight: 600; line-height: 1.35; color: #0f172a; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(15, 23, 42, 0.1); }.arch-box.highlight { background: linear-gradient(135deg, #fef08a 0%, #fde047 100%); border: 2px solid #eab308; }.arch-box.tech { font-size: 10px; background: rgba(255, 255, 255, 0.7); } .arch-layer.external { background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); border: 2px dashed #64748b; }.arch-layer.user { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); border: 2px solid #3b82f6; }.arch-layer.application { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 2px solid #f59e0b; }.arch-layer.ai { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); border: 2px solid #22c55e; }.arch-layer.data { background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%); border: 2px solid #ec4899; }.arch-layer.infra { background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); border: 2px solid #6366f1; } .arch-sidebar-panel { border-radius: 8px; padding: 10px; background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); border: 2px solid #9ca3af; margin-bottom: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); }.arch-sidebar-title { font-size: 12px; font-weight: bold; text-align: center; color: #374151; margin-bottom: 6px; }.arch-sidebar-item { font-size: 10px; text-align: center; color: #1f2937; background: rgba(255, 255, 255, 0.8); padding: 5px; border-radius: 4px; margin: 3px 0; border: 1px solid rgba(0, 0, 0, 0.05); }.arch-sidebar-item.metric { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border: 1px solid #86efac; font-weight: 600; } </style> <div class="arch-title">System Architecture Overview</div> <div class="arch-wrapper"> <div class="arch-sidebar"> <div class="arch-sidebar-panel"><div class="arch-sidebar-title">📊 Monitoring</div><div class="arch-sidebar-item">Application Metrics</div><div class="arch-sidebar-item">Performance Tracking</div><div class="arch-sidebar-item">Health Checks</div><div class="arch-sidebar-item">Alert Management</div></div> <div class="arch-sidebar-panel"><div class="arch-sidebar-title">📈 Analytics</div><div class="arch-sidebar-item">User Behavior</div><div class="arch-sidebar-item">Business KPIs</div><div class="arch-sidebar-item">Technical Metrics</div><div class="arch-sidebar-item">Custom Reports</div></div> <div class="arch-sidebar-panel"><div class="arch-sidebar-title">🔄 Operations</div><div class="arch-sidebar-item">CI/CD Pipeline</div><div class="arch-sidebar-item">Deployment</div><div class="arch-sidebar-item">Configuration</div><div class="arch-sidebar-item">Maintenance</div></div> </div> <div class="arch-main"> <div class="arch-layer user"> <div class="arch-layer-title">User Interface Layer</div> <div class="arch-grid arch-grid-4"><div class="arch-box">Web App<br><small>React/Vue</small></div><div class="arch-box">Mobile App<br><small>React Native</small></div><div class="arch-box">Desktop App<br><small>Electron</small></div><div class="arch-box">API Client<br><small>REST/GraphQL</small></div></div> </div> <div class="arch-layer application"> <div class="arch-layer-title">Application Services Layer</div> <div class="arch-grid arch-grid-3"><div class="arch-box">Business Logic<br><small>Core Services</small></div><div class="arch-box highlight">API Gateway<br><small>Routing & Auth</small></div><div class="arch-box">Background Jobs<br><small>Queue Processing</small></div></div> </div> <div class="arch-layer ai"> <div class="arch-layer-title">Intelligence Layer</div> <div class="arch-grid arch-grid-2"><div class="arch-box">ML Models<br><small>Inference Engine</small></div><div class="arch-box">Rule Engine<br><small>Business Rules</small></div></div> </div> <div class="arch-layer data"> <div class="arch-layer-title">Data Layer</div> <div class="arch-grid arch-grid-4"><div class="arch-box tech">Primary DB<br><small>PostgreSQL</small></div><div class="arch-box tech">Cache<br><small>Redis</small></div><div class="arch-box tech">Search<br><small>Elasticsearch</small></div><div class="arch-box tech">File Storage<br><small>S3/MinIO</small></div></div> </div> <div class="arch-layer infra"> <div class="arch-layer-title">Infrastructure Layer</div> <div class="arch-grid arch-grid-5"><div class="arch-box tech">Container<br><small>Docker/K8s</small></div><div class="arch-box tech">Load Balancer<br><small>Nginx</small></div><div class="arch-box tech">Message Queue<br><small>RabbitMQ</small></div><div class="arch-box tech">Logging<br><small>ELK Stack</small></div><div class="arch-box tech">CDN<br><small>CloudFlare</small></div></div> </div> <div class="arch-layer external"> <div class="arch-layer-title">External Services</div> <div class="arch-grid arch-grid-4"><div class="arch-box tech">Third-party APIs<br><small>Payment/Auth</small></div><div class="arch-box tech">Cloud Services<br><small>AWS/Azure</small></div><div class="arch-box tech">SaaS Tools<br><small>Analytics</small></div><div class="arch-box tech">Integrations<br><small>Webhooks</small></div></div> </div> </div> <div class="arch-sidebar"> <div class="arch-sidebar-panel"><div class="arch-sidebar-title">🔐 Security</div><div class="arch-sidebar-item">Authentication</div><div class="arch-sidebar-item">Authorization</div><div class="arch-sidebar-item">Data Encryption</div><div class="arch-sidebar-item">Network Security</div></div> <div class="arch-sidebar-panel"><div class="arch-sidebar-title">📋 Compliance</div><div class="arch-sidebar-item">Audit Logging</div><div class="arch-sidebar-item">Data Privacy</div><div class="arch-sidebar-item">Regulatory</div><div class="arch-sidebar-item">Standards</div></div> <div class="arch-sidebar-panel"><div class="arch-sidebar-title">💾 Backup</div><div class="arch-sidebar-item">Data Backup</div><div class="arch-sidebar-item">Disaster Recovery</div><div class="arch-sidebar-item">High Availability</div><div class="arch-sidebar-item">Failover</div></div> </div> </div> </div> ```

Advanced Features

高级功能

NOTE: These advanced components require additional CSS styles. Add these to your 
<style scoped>
section:
css
.arch-product-group { display: flex; gap: 10px; }
.arch-product { flex: 1; border-radius: 8px; padding: 10px; background: rgba(255, 255, 255, 0.6); border: 1px dashed #d97706; }
.arch-product-title { font-size: 12px; font-weight: bold; color: #92400e; margin-bottom: 8px; text-align: center; }
.arch-subgroup { display: flex; gap: 8px; margin-top: 8px; }
.arch-subgroup-box { flex: 1; border-radius: 6px; padding: 8px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(0, 0, 0, 0.08); }
.arch-subgroup-title { font-size: 10px; font-weight: bold; color: #374151; text-align: center; margin-bottom: 6px; }
.arch-user-types { display: flex; gap: 4px; justify-content: center; margin-top: 6px; }
.arch-user-tag { font-size: 9px; padding: 2px 6px; border-radius: 10px; background: rgba(59, 130, 246, 0.15); color: #1d4ed8; }
注意：这些高级组件需要额外的CSS样式。将以下内容添加到你的
<style scoped>
部分：
css
.arch-product-group { display: flex; gap: 10px; }
.arch-product { flex: 1; border-radius: 8px; padding: 10px; background: rgba(255, 255, 255, 0.6); border: 1px dashed #d97706; }
.arch-product-title { font-size: 12px; font-weight: bold; color: #92400e; margin-bottom: 8px; text-align: center; }
.arch-subgroup { display: flex; gap: 8px; margin-top: 8px; }
.arch-subgroup-box { flex: 1; border-radius: 6px; padding: 8px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(0, 0, 0, 0.08); }
.arch-subgroup-title { font-size: 10px; font-weight: bold; color: #374151; text-align: center; margin-bottom: 6px; }
.arch-user-types { display: flex; gap: 4px; justify-content: center; margin-top: 6px; }
.arch-user-tag { font-size: 9px; padding: 2px 6px; border-radius: 10px; background: rgba(59, 130, 246, 0.15); color: #1d4ed8; }

Custom Product Groups

自定义产品组

For complex applications with multiple products/modules:
html
<div class="arch-product-group">
  <div class="arch-product">
    <div class="arch-product-title">🎯 Product A</div>
    <div class="arch-grid arch-grid-2">
      <div class="arch-box">Feature 1<br><small>Description</small></div>
      <div class="arch-box highlight">Feature 2<br><small>Key Feature</small></div>
    </div>
  </div>
  <div class="arch-product">
    <div class="arch-product-title">📊 Product B</div>
    <div class="arch-grid arch-grid-2">
      <div class="arch-box">Feature 3<br><small>Description</small></div>
      <div class="arch-box">Feature 4<br><small>Description</small></div>
    </div>
  </div>
</div>
针对包含多个产品/模块的复杂应用：
html
<div class="arch-product-group">
  <div class="arch-product">
    <div class="arch-product-title">🎯 Product A</div>
    <div class="arch-grid arch-grid-2">
      <div class="arch-box">Feature 1<br><small>Description</small></div>
      <div class="arch-box highlight">Feature 2<br><small>Key Feature</small></div>
    </div>
  </div>
  <div class="arch-product">
    <div class="arch-product-title">📊 Product B</div>
    <div class="arch-grid arch-grid-2">
      <div class="arch-box">Feature 3<br><small>Description</small></div>
      <div class="arch-box">Feature 4<br><small>Description</small></div>
    </div>
  </div>
</div>

Sub-grouped Components

子分组组件

For detailed breakdowns within layers:
html
<div class="arch-subgroup">
  <div class="arch-subgroup-box">
    <div class="arch-subgroup-title">Component Group A</div>
    <div class="arch-grid arch-grid-3">
      <div class="arch-box tech">Service 1<br><small>Details</small></div>
      <div class="arch-box tech">Service 2<br><small>Details</small></div>
      <div class="arch-box tech">Service 3<br><small>Details</small></div>
    </div>
  </div>
  <div class="arch-subgroup-box">
    <div class="arch-subgroup-title">Component Group B</div>
    <div class="arch-grid arch-grid-2">
      <div class="arch-box tech">Service 4<br><small>Details</small></div>
      <div class="arch-box tech">Service 5<br><small>Details</small></div>
    </div>
  </div>
</div>
针对图层内的详细拆分：
html
<div class="arch-subgroup">
  <div class="arch-subgroup-box">
    <div class="arch-subgroup-title">Component Group A</div>
    <div class="arch-grid arch-grid-3">
      <div class="arch-box tech">Service 1<br><small>Details</small></div>
      <div class="arch-box tech">Service 2<br><small>Details</small></div>
      <div class="arch-box tech">Service 3<br><small>Details</small></div>
    </div>
  </div>
  <div class="arch-subgroup-box">
    <div class="arch-subgroup-title">Component Group B</div>
    <div class="arch-grid arch-grid-2">
      <div class="arch-box tech">Service 4<br><small>Details</small></div>
      <div class="arch-box tech">Service 5<br><small>Details</small></div>
    </div>
  </div>
</div>

User Types/Tags

用户类型/标签

Add user type indicators:
html
<div class="arch-user-types">
  <span class="arch-user-tag">Admin Users</span>
  <span class="arch-user-tag">End Users</span>
  <span class="arch-user-tag">API Clients</span>
  <span class="arch-user-tag">Partners</span>
</div>
添加用户类型标识：
html
<div class="arch-user-types">
  <span class="arch-user-tag">Admin Users</span>
  <span class="arch-user-tag">End Users</span>
  <span class="arch-user-tag">API Clients</span>
  <span class="arch-user-tag">Partners</span>
</div>

Metrics and KPIs

指标与KPI

Highlight important metrics in sidebar:
html
<div class="arch-sidebar-item metric">99.9% Uptime</div>
<div class="arch-sidebar-item metric">&lt;200ms Response</div>
<div class="arch-sidebar-item metric">1M+ Users</div>
在侧边栏中突出显示重要指标：
html
<div class="arch-sidebar-item metric">99.9% Uptime</div>
<div class="arch-sidebar-item metric">&lt;200ms Response</div>
<div class="arch-sidebar-item metric">1M+ Users</div>

Styling Reference

样式参考

Layer Classes

图层类

  • .arch-layer.user
    - Blue gradient for user-facing components
  • .arch-layer.application
    - Yellow/Orange for application services
  • .arch-layer.ai
    - Green for AI/ML/Logic components
  • .arch-layer.data
    - Pink for data storage and processing
  • .arch-layer.infra
    - Purple for infrastructure components
  • .arch-layer.external
    - Gray dashed for external dependencies
  • .arch-layer.user
    - 面向用户组件的蓝色渐变
  • .arch-layer.application
    - 应用服务的黄/橙色渐变
  • .arch-layer.ai
    - AI/ML/逻辑组件的绿色渐变
  • .arch-layer.data
    - 数据存储与处理的粉色渐变
  • .arch-layer.infra
    - 基础设施组件的紫色渐变
  • .arch-layer.external
    - 外部依赖的灰色虚线边框

Box Classes

盒子类

  • .arch-box
    - Standard component box
  • .arch-box.highlight
    - Highlighted/key components (yellow)
  • .arch-box.tech
    - Technical components (smaller text)
  • .arch-box
    - 标准组件盒子
  • .arch-box.highlight
    - 突出显示的核心组件（黄色）
  • .arch-box.tech
    - 技术组件（更小字体）

Grid Classes

网格类

  • .arch-grid-2
    to 
    .arch-grid-6
    - 2 to 6 column responsive grids
  • .arch-grid-2
    至 
    .arch-grid-6
    - 2到6列的响应式网格

Sidebar Classes

侧边栏类

  • .arch-sidebar-panel
    - Panel container
  • .arch-sidebar-item
    - Regular sidebar item
  • .arch-sidebar-item.metric
    - Highlighted metric item
  • .arch-sidebar-panel
    - 面板容器
  • .arch-sidebar-item
    - 常规侧边栏项
  • .arch-sidebar-item.metric
    - 突出显示的指标项

Best Practices

最佳实践

HTML Usage Guidelines

HTML使用指南

  1. Direct embedding only - Always embed HTML directly in Markdown, never use 
    ```html
    code blocks
  2. No empty lines in structure - Keep the entire HTML block continuous without any empty lines
  3. Incremental development - Build diagrams step by step:
    • Start with basic framework and layout structure (single/two/three column as needed)
    • Add empty layer containers with proper CSS classes
    • Fill in content layer by layer from top to bottom
    • Refine content and add highlights last
  1. 仅直接嵌入 - 始终将HTML直接嵌入Markdown，绝不要使用
    ```html
    代码块
  2. 结构中无空行 - 保持整个HTML块连续，不要有任何空行
  3. 增量开发 - 逐步构建图表：
    • 从基础框架和布局结构开始（根据需要选择单列/双列/三列）
    • 添加带有正确CSS类的空图层容器
    • 从上到下逐层填充内容
    • 最后优化内容并添加高亮

Architecture Design

架构设计

  1. Keep layers logically separated - Each layer should represent a clear architectural tier
  2. Use consistent naming - Follow naming conventions for components and services
  3. Highlight key components - Use 
    .highlight
    class for critical components
  4. Add technical details - Include technology stack info in 
    <small>
    tags
  5. Balance information density - Don't overcrowd components with text
  6. Use icons sparingly - Add emojis to titles for visual hierarchy
  7. Maintain color semantics - Stick to the established color meanings
  8. Consider responsive design - Grids automatically adapt to content
  1. 保持图层逻辑分离 - 每个图层应代表清晰的架构层级
  2. 使用统一命名 - 遵循组件和服务的命名规范
  3. 突出核心组件 - 对关键组件使用
    .highlight
    类
  4. 添加技术细节 - 在
    <small>
    标签中包含技术栈信息
  5. 平衡信息密度 - 不要用过多文字拥挤组件
  6. 谨慎使用图标 - 为标题添加表情符号以形成视觉层级
  7. 保持颜色语义一致 - 坚持既定的颜色含义
  8. 考虑响应式设计 - 网格会自动适配内容

Use Cases

使用场景

  • Microservices Architecture - Show service boundaries and dependencies
  • Enterprise Application Architecture - Display multi-tier application structure
  • Cloud Infrastructure - Illustrate cloud service dependencies
  • Data Pipeline Architecture - Show data flow through processing layers
  • AI/ML System Architecture - Highlight ML components and data flows
  • Security Architecture - Emphasize security controls across layers
  • DevOps Architecture - Show CI/CD and deployment infrastructure
  • 微服务架构 - 展示服务边界与依赖关系
  • 企业应用架构 - 显示多层应用结构
  • 云基础设施 - 说明云服务依赖关系
  • 数据管道架构 - 展示数据在处理层中的流动
  • AI/ML系统架构 - 突出ML组件与数据流
  • 安全架构 - 强调跨层的安全控制
  • DevOps架构 - 展示CI/CD与部署基础设施