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:

First: Create the overall framework (wrapper, sidebars, main structure) and define all CSS styles
Second: Add layer containers with titles
Third: Fill in components layer by layer
Fourth: Add detailed content and refinements

推荐做法：分多步创建架构图：

第一步：创建整体框架（容器、侧边栏、主结构）并定义所有CSS样式
第二步：添加带有标题的图层容器
第三步：逐层填充组件
第四步：添加详细内容并优化

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使用指南

Direct embedding only - Always embed HTML directly in Markdown, never use
```
```html
```
code blocks
No empty lines in structure - Keep the entire HTML block continuous without any empty lines
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

仅直接嵌入 - 始终将HTML直接嵌入Markdown，绝不要使用
```
```html
```
代码块
结构中无空行 - 保持整个HTML块连续，不要有任何空行
增量开发 - 逐步构建图表：
- 从基础框架和布局结构开始（根据需要选择单列/双列/三列）
- 添加带有正确CSS类的空图层容器
- 从上到下逐层填充内容
- 最后优化内容并添加高亮

Architecture Design

架构设计

Keep layers logically separated - Each layer should represent a clear architectural tier
Use consistent naming - Follow naming conventions for components and services
Highlight key components - Use
```
.highlight
```
class for critical components
Add technical details - Include technology stack info in
```
<small>
```
tags
Balance information density - Don't overcrowd components with text
Use icons sparingly - Add emojis to titles for visual hierarchy
Maintain color semantics - Stick to the established color meanings
Consider responsive design - Grids automatically adapt to content

保持图层逻辑分离 - 每个图层应代表清晰的架构层级
使用统一命名 - 遵循组件和服务的命名规范
突出核心组件 - 对关键组件使用
```
.highlight
```
类
添加技术细节 - 在
```
<small>
```
标签中包含技术栈信息
平衡信息密度 - 不要用过多文字拥挤组件
谨慎使用图标 - 为标题添加表情符号以形成视觉层级
保持颜色语义一致 - 坚持既定的颜色含义
考虑响应式设计 - 网格会自动适配内容

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与部署基础设施

architecture

Original

Translation

Architecture Diagram Generator

架构图生成器

Critical Rules

关键规则

Rule 1: Direct HTML Embedding

规则1：直接嵌入HTML

Rule 2: No Empty Lines in HTML Structure

规则2：HTML结构中无空行

Rule 3: Incremental Creation Approach

规则3：增量创建方法

Rule 4: Flexible Layout Structure

规则4：灵活布局结构

Rule 5: Layer-Based Organization

规则5：基于图层的组织

Rule 6: Color Semantics

规则6：颜色语义

Basic Architecture Template

基础架构模板

Advanced Features

高级功能

Custom Product Groups

自定义产品组

Sub-grouped Components

子分组组件

User Types/Tags

用户类型/标签

Metrics and KPIs

指标与KPI

Styling Reference

样式参考

Layer Classes

图层类

Box Classes

盒子类

Grid Classes

网格类

Sidebar Classes

侧边栏类

Best Practices

最佳实践

HTML Usage Guidelines

HTML使用指南

Architecture Design

架构设计

Use Cases

使用场景