architecture

架构图生成器

**快速入门：**创建灵活布局（单列／双列／三列）的 HTML 结构 → 为层和网格定义 CSS 样式 → 使用分类面板添加内容 → 用语义颜色区分不同层。

关键规则

规则 1：直接嵌入 HTML

**重要：**在 Markdown 中直接编写 HTML 架构图。切勿使用代码块（```html）。HTML 应直接嵌入文档中，不要使用围栏。

规则 2：HTML 结构中不要有空行

**至关重要：**HTML 架构图结构中不得添加空行。保持整个 HTML 块连续，以免出现解析错误。

规则 3：采用渐进式创建方法

**建议：**分多个步骤创建架构图：

1. **首先：**创建整体框架（包装器、侧边栏、主体结构），并定义所有 CSS 样式
2. **其次：**添加带标题的层容器
3. **然后：**逐层填充组件
4. **最后：**添加详细内容并进行完善

规则 4：灵活的布局结构

架构图可根据复杂程度采用灵活的布局：

• **单列：**仅包含主体内容（适用于简单架构）
• **双列：**主体内容 + 一个侧边栏（左侧或右侧）
• **三列：**包含两个侧边栏的完整布局（适用于复杂系统）
  • **左侧边栏：**支持系统（监控、运维、分析）
  • **主体内容：**核心架构层（用户、应用、数据、基础设施）
  • **右侧边栏：**横向关注点（安全、合规、治理）

规则 5：按层组织

每一层都应具备：

• 明确的语义含义（用户、应用、AI／逻辑、数据、基础设施）
• 一致的颜色编码
• 用于组件的网格布局
• 对子组件进行适当嵌套

规则 6：颜色语义

为各层使用一致的语义含义——具体的调色板因风格而异（参见示例）。标准语义映射如下：

• 用户层——面向用户的界面和客户端
• 应用层——业务逻辑和 API 服务
• AI／逻辑层——智能、规则、处理引擎
• 数据层——数据库、缓存、存储
• 基础设施层——容器、网络、DevOps
• 外部服务——第三方 API、云服务（通常使用虚线边框）

风格示例

选择与项目调性和受众相符的视觉风格。每个示例都包含一个完整、可直接复制的 HTML 模板。

#	风格	文件	适用场景
1	Steel Blue	styles/steel-blue.md	咨询报告、银行/金融、政府项目、RFP 提案
2	Ember Warm	styles/ember-warm.md	零售/电子商务、教育平台、生活方式品牌、文化机构
3	Neon Dark	styles/neon-dark.md	技术演讲、开发者大会、游戏平台、网络安全仪表板
4	Stark Block	styles/stark-block.md	创意工作室、教育平台、独立开发者、技术博客
5	Ocean Teal	styles/ocean-teal.md	旅游平台、物流/运输、绿色科技、天气/海洋项目
6	Dusk Glow	styles/dusk-glow.md	社交媒体、娱乐平台、营销技术、内容创作工具
7	Rose Bloom	styles/rose-bloom.md	时尚/美容、奢侈品牌、婚礼平台、高端会员服务
8	Sage Forest	styles/sage-forest.md	医疗保健、农业科技、清洁能源、可持续发展、生物信息学
9	Frost Clean	styles/frost-clean.md	设计工具、开发者文档、API 参考、极简 SaaS
10	Indigo Deep	styles/indigo-deep.md	品牌风格统一的系统、企业白皮书、内部平台
11	Pastel Mix	styles/pastel-mix.md	SaaS 产品、初创公司、通用技术架构、产品文档
12	Slate Dark	styles/slate-dark.md	企业深色模式、内部工具、开发者仪表板

布局示例

选择适合架构复杂度的布局结构。布局采用线框风格（不使用颜色），以突出结构模式。可将任意布局与上述任意风格组合使用。

#	布局	文件	最适合用于
1	三列布局	layouts/three-column.md	存在横切关注点和监控侧边栏的复杂系统
2	单列堆叠	layouts/single-stack.md	简单服务、微服务详情视图、聚焦型文档
3	左侧边栏	layouts/left-sidebar.md	着重于运维/监控的系统、以 DevOps 为核心的视图
4	右侧边栏	layouts/right-sidebar.md	着重于安全/合规的系统、以治理为核心的视图
5	流水线	layouts/pipeline.md	数据流水线、CI/CD 流程、ETL 流程、基于水平阶段的流程
6	双列拆分	layouts/two-column-split.md	前后对比、双系统视图、迁移架构
7	仪表板	layouts/dashboard.md	包含 KPI 的系统概览、监控仪表板、高管摘要
8	网格目录	layouts/grid-catalog.md	服务目录、组件库、权重相同的微服务
9	横幅 + 居中	layouts/banner-center.md	以网关为核心的架构、共享基础设施的面向用户系统
10	嵌套容器	layouts/nested-containers.md	云部署、VPC/网络拓扑、环境隔离
11	分层布局	layouts/layer-layouts.md	每层的布局模式：网格、子分组、产品分组、KPI、垂直堆叠、区域、内联流水线、混合宽度
12	连接线	layouts/connectors.md	组件之间的 SVG 覆盖连接线：实线/虚线、箭头、标签、曲线和正交路径

高级功能

注意：这些高级组件需要额外的 CSS 样式。请将以下内容添加到 <style scoped> 部分：

.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; }
/* SVG connector lines between components */
.arch-conn { stroke: #94a3b8; stroke-width: 1.5; fill: none; }
.arch-conn-dashed { stroke: #94a3b8; stroke-width: 1.5; fill: none; stroke-dasharray: 6 4; }
.arch-conn-label { font-size: 9px; fill: #64748b; font-family: sans-serif; }

自定义产品组

适用于包含多个产品/模块的复杂应用：

<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>

子分组组件

适用于层内的详细拆分：

<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>

用户类型/标签

<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>

指标和 KPI

<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>

组件之间的 SVG 连接线

使用 SVG 覆盖层绘制组件之间的正交（直角）连接线。**必须使用带有 M/L 命令的 <path> 来绘制严格水平和垂直的线段。不要使用 <line>、贝塞尔曲线或对角线。**完整参考请参见 layouts/connectors.md。

<div style="position: relative;">
  
  
  <svg style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible;">
    <defs>
      <marker id="arrowhead" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
        <path d="M0,0 L8,3 L0,6" fill="none" stroke="#94a3b8" stroke-width="1"/>
      </marker>
    </defs>
    
    <path d="M 200,72 L 200,90 L 400,90 L 400,108" class="arch-conn" marker-end="url(#arrowhead)"/>
    
    <path d="M 600,72 L 600,90 L 600,90 L 600,108" class="arch-conn-dashed" marker-end="url(#arrowhead)"/>
    
    <text x="420" y="86" class="arch-conn-label">data flow</text>
  </svg>
</div>

样式参考

常用类（所有样式共用）

• .arch-wrapper — 用于侧边栏和主布局的弹性容器
• .arch-sidebar — 固定宽度的侧边栏列
• .arch-main — 灵活的主内容区域
• .arch-layer — 层容器（添加语义类：.user、.application、.ai、.data、.infra、.external）
• .arch-box — 组件框；.arch-box.highlight 用于关键项目；.arch-box.tech 用于较小的技术项目
• .arch-grid-2 到 .arch-grid-6 — 网格列布局
• .arch-sidebar-panel — 侧边栏面板容器
• .arch-sidebar-item — 侧边栏项目；.arch-sidebar-item.metric 用于突出显示的指标

最佳实践

HTML 使用指南

1. 仅直接嵌入 — 始终将 HTML 直接嵌入 Markdown，切勿使用 ```html 代码块
2. 结构中不留空行 — 整个 HTML 块保持连续，不要出现空行
3. 循序渐进地开发 — 逐步构建图表：
   • 从基本框架和布局结构开始（根据需要采用单列、双列或三列）
   • 添加带有适当 CSS 类的空层容器
   • 从上到下逐层填充内容
   • 最后完善内容并添加高亮

架构设计

1. 保持层级逻辑清晰 — 每一层都应代表明确的架构层级
2. 使用一致的命名 — 遵循组件和服务的命名规范
3. 突出关键组件 — 对关键组件使用 .highlight 类
4. 添加技术细节 — 在 <small> 标签中包含技术栈信息
5. 平衡信息密度 — 不要让组件中的文字过于拥挤
6. 谨慎使用图标 — 在标题中添加表情符号，建立视觉层级
7. 保持颜色语义一致 — 遵循既定的颜色含义
8. 考虑响应式设计 — 网格会根据内容自动调整