AI Skills
architecture

architecture

熱門

使用 HTML/CSS 模板建立分層系統架構圖，支援顏色編碼層級與網格佈局。最適合技術堆疊、微服務拓撲與多層應用程式設計。

3091星標
178分支
更新於 2026/5/26
獲取技能源代碼

相關技能

homelab-pihole-dns24萬paperclip-create-plugin7.5萬docker-expert4.5萬
SKILL.md
唯讀
名稱
architecture
描述

使用 HTML/CSS 模板建立分層系統架構圖，支援顏色編碼層級與網格佈局。最適合技術堆疊、微服務拓撲與多層應用程式設計。

Architecture Diagram Generator

快速開始： 建立具備彈性佈局（單欄/雙欄/三欄）的 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 鋼藍 styles/steel-blue.md 顧問報告、銀行/金融、政府專案、RFP 提案
2 暖琥珀 styles/ember-warm.md 零售/電商、教育平台、生活風格品牌、文化機構
3 霓虹暗色 styles/neon-dark.md 技術演講、開發者大會、遊戲平台、資安儀表板
4 極簡區塊 styles/stark-block.md 創意工作室、教育平台、獨立開發者、技術部落格
5 海洋青綠 styles/ocean-teal.md 旅遊平台、物流/航運、綠色科技、天氣/海洋專案
6 暮光輝光 styles/dusk-glow.md 社群媒體、娛樂平台、行銷科技、內容創作工具
7 玫瑰綻放 styles/rose-bloom.md 時尚/美妝、奢華品牌、婚禮平台、高級會員
8 鼠尾森林 styles/sage-forest.md 醫療保健、農業科技、潔淨能源、永續發展、生物資訊
9 霜雪潔淨 styles/frost-clean.md 設計工具、開發者文件、API 參考、極簡 SaaS
10 靛藍深邃 styles/indigo-deep.md 品牌一致性系統、企業白皮書、內部平台
11 粉彩混合 styles/pastel-mix.md SaaS 產品、新創公司、通用技術架構、產品文件
12 石板暗色 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 連接線 */
.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">🎯 產品 A</div>
    <div class="arch-grid arch-grid-2">
      <div class="arch-box">功能 1<br><small>說明</small></div>
      <div class="arch-box highlight">功能 2<br><small>關鍵功能</small></div>
    </div>
  </div>
  <div class="arch-product">
    <div class="arch-product-title">📊 產品 B</div>
    <div class="arch-grid arch-grid-2">
      <div class="arch-box">功能 3<br><small>說明</small></div>
      <div class="arch-box">功能 4<br><small>說明</small></div>
    </div>
  </div>
</div>

子群組元件

適用於層級內的詳細分解：

<div class="arch-subgroup">
  <div class="arch-subgroup-box">
    <div class="arch-subgroup-title">元件群組 A</div>
    <div class="arch-grid arch-grid-3">
      <div class="arch-box tech">服務 1<br><small>詳細資訊</small></div>
      <div class="arch-box tech">服務 2<br><small>詳細資訊</small></div>
      <div class="arch-box tech">服務 3<br><small>詳細資訊</small></div>
    </div>
  </div>
  <div class="arch-subgroup-box">
    <div class="arch-subgroup-title">元件群組 B</div>
    <div class="arch-grid arch-grid-2">
      <div class="arch-box tech">服務 4<br><small>詳細資訊</small></div>
      <div class="arch-box tech">服務 5<br><small>詳細資訊</small></div>
    </div>
  </div>
</div>

使用者類型/標籤

<div class="arch-user-types">
  <span class="arch-user-tag">管理員</span>
  <span class="arch-user-tag">一般使用者</span>
  <span class="arch-user-tag">API 客戶端</span>
  <span class="arch-user-tag">合作夥伴</span>
</div>

指標與 KPI

<div class="arch-sidebar-item metric">99.9% 正常運作時間</div>
<div class="arch-sidebar-item metric">&lt;200ms 回應時間</div>
<div class="arch-sidebar-item metric">100 萬+ 使用者</div>

元件間的 SVG 連接器

使用 SVG 覆蓋層繪製元件之間的正交（直角）連接器。務必使用 <path> 搭配 M/L 指令來產生嚴格的水平和垂直線段。請勿使用 <line>、貝茲曲線或斜線。 完整參考請見 layouts/connectors.md。

<!-- 將圖表內容包在相對定位容器中 -->
<div style="position: relative;">
  <!-- ...層級與元件放置於此... -->
  <!-- SVG 覆蓋層作為最後一個子元素 -->
  <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">資料流</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. 僅直接嵌入 — 務必在 Markdown 中直接嵌入 HTML，切勿使用 ```html 程式碼區塊
  2. 結構中不留空行 — 保持整個 HTML 區塊連續，不留任何空行
  3. 漸進式開發 — 逐步建立圖表：
    • 從基本框架與佈局結構開始（依需求選擇單欄/雙欄/三欄）
    • 加入帶有適當 CSS 類別的空層級容器
    • 從上到下逐層填入內容
    • 最後修飾內容並加入強調效果

架構設計

  1. 保持層級邏輯分離 — 每個層級應代表一個清晰的架構層次
  2. 使用一致命名 — 遵循元件與服務的命名慣例
  3. 強調關鍵元件 — 使用 .highlight 類別標記關鍵元件
  4. 加入技術細節 — 在 <small> 標籤中納入技術堆疊資訊
  5. 平衡資訊密度 — 不要讓元件被文字塞滿
  6. 謹慎使用圖示 — 在標題中加入表情符號以建立視覺層次
  7. 維持顏色語意 — 堅守已建立的顏色意義
  8. 考慮響應式設計 — 網格會自動適應內容