架構圖
生成深色主題的 SVG 軟件系統和雲基礎設施圖表，作為帶有內聯 SVG 圖形的獨立 HTML 文件。語義化組件顏色（青色=前端，翠綠色=後端，紫色=數據庫，琥珀色=雲/AWS，玫瑰色=安全，橙色=消息總線），JetBrains Mono 字體，網格背景。最適合軟件架構、雲/VPC 拓撲、微服務地圖、服務網格圖、數據庫 + API 層圖、安全組、消息總線——任何適合具有深色美學風格的技術基礎設施演示文稿的內容。如果存在針對該主題更專業的繪圖技能（科學、教育、手繪、動畫等），請優先使用——否則此技能也可作為通用 SVG 圖表的備選方案。基於 Cocoon AI 的 architecture-diagram-generator（MIT 許可證）。
技能元數據
| 來源 | 捆綁（默認安裝） |
| 路徑 | skills/creative/architecture-diagram |
| 版本 | 1.0.0 |
| 作者 | Cocoon AI (hello@cocoon-ai.com)，由 Hermes Agent 移植 |
| 許可證 | MIT |
| 標籤 | architecture, diagrams, SVG, HTML, visualization, infrastructure, cloud |
| 相關技能 | concept-diagrams, excalidraw |
參考：完整 SKILL.md
以下是 Hermes 在觸發此技能時加載的完整技能定義。這是技能激活時代理看到的指令。
架構圖技能
生成專業的、深色主題的技術架構圖，作為帶有內聯 SVG 圖形的獨立 HTML 文件。無需外部工具、無需 API 密鑰、無需渲染庫——只需編寫 HTML 文件並在瀏覽器中打開即可。
適用範圍
最適合：
- 軟件系統架構（前端 / 後端 / 數據庫層）
- 雲基礎設施（VPC、區域、子網、託管服務）
- 微服務 / 服務網格拓撲
- 數據庫 + API 映射、部署圖
- 任何具有技術基礎設施主題且符合深色網格背景美學的內容
請首先考慮其他技能用於：
- 物理、化學、數學、生物學或其他科學主題
- 物理對象（車輛、硬件、解剖結構、截面圖）
- 平面圖、敘事旅程、教育/教科書風格的視覺效果
- 手繪白板草圖（考慮使用
excalidraw） - 動畫解說（考慮使用動畫技能）
如果存在針對該主題更專業的技能，請優先使用。如果沒有合適的技能，此技能也可作為通用 SVG 圖表的備選方案——輸出將僅攜帶下述的深色技術美學風格。
基於 Cocoon AI 的 architecture-diagram-generator（MIT 許可證）。
工作流程
- 用戶描述其系統架構（組件、連接、技術）
- 按照以下設計系統生成 HTML 文件
- 使用
write_file保存為.html文件（例如~/architecture-diagram.html） - 用戶在任意瀏覽器中打開——離線可用，無依賴項
輸出位置
將圖表保存到用戶指定的路徑，或默認為當前工作目錄：
./[project-name]-architecture.html
預覽
保存後，建議用戶打開它：
# macOS
open ./my-architecture.html
# Linux
xdg-open ./my-architecture.html
設計系統與視覺語言
調色板（語義映射）
使用特定的 rgba 填充和十六進制描邊來對組件進行分類：
| 組件類型 | 填充 (rgba) | 描邊 (Hex) |
|---|---|---|
| 前端 | rgba(8, 51, 68, 0.4) | #22d3ee (cyan-400) |
| 後端 | rgba(6, 78, 59, 0.4) | #34d399 (emerald-400) |
| 數據庫 | rgba(76, 29, 149, 0.4) | #a78bfa (violet-400) |
| AWS/雲 | rgba(120, 53, 15, 0.3) | #fbbf24 (amber-400) |
| 安全 | rgba(136, 19, 55, 0.4) | #fb7185 (rose-400) |
| 消息總線 | rgba(251, 146, 60, 0.3) | #fb923c (orange-400) |
| 外部 | rgba(30, 41, 59, 0.5) | #94a3b8 (slate-400) |
排版與背景
- 字體： JetBrains Mono（等寬字體），從 Google Fonts 加載
- 字號： 12px（名稱）、9px（副標籤）、8px（註釋）、7px（微小標籤）
- 背景： Slate-950 (
#020617)，帶有細微的 40px 網格圖案
<!-- Background Grid Pattern -->
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</pattern>
技術實現細節
組件渲染
組件為圓角矩形（rx="6"），描邊寬度為 1.5px。為了防止箭頭透過半透明填充顯示出來，請使用雙矩形遮罩技術：
- 繪製不透明的背景矩形（
#0f172a） - 在其上方繪製半透明的樣式矩形
連接規則
- Z 軸順序： 儘早 在 SVG 中繪製箭頭（在網格之後），以便它們在組件框後面渲染
- 箭頭： 通過 SVG 標記定義
- 安全流： 使用玫瑰色（
#fb7185）的虛線 - 邊界：
- 安全組： 虛線（
4,4），玫瑰色 - 區域： 大型虛線（
8,4），琥珀色，rx="12"
- 安全組： 虛線（
間距與佈局邏輯
- 標準高度： 60px（服務）；80-120px（大型組件）
- 垂直間距： 組件之間最小 40px
- 消息總線： 必須放置在服務之間的間隙中，不得與其重疊
- 圖例位置： 關鍵。 必須放置在所有邊界框之外。計算所有邊界的最低 Y 座標，並將圖例放置在其下方至少 20px 處。
文檔結構
生成的 HTML 文件遵循四部分佈局：
- 頁眉： 標題帶有脈衝點指示器和副標題
- 主 SVG： 包含在圓角邊框卡片中的圖表
- 摘要卡片： 圖表下方的三張卡片網格，用於顯示高層級詳細信息
- 頁腳： 極簡元數據
信息卡片模式
<div class="card">
<div class="card-header">
<div class="card-dot cyan"></div>
<h3>Title</h3>
</div>
<ul>
<li>• Item one</li>
<li>• Item two</li>
</ul>
</div>
輸出要求
- 單文件： 一個自包含的
.html文件 - 無外部依賴： 所有 CSS 和 SVG 必須內聯（Google Fonts 除外）
- 無 JavaScript： 使用純 CSS 實現任何動畫（如脈衝點）
- 兼容性： 必須在任何現代 Web 瀏覽器中正確渲染
模板參考
加載完整的 HTML 模板以獲取確切的結構、CSS 和 SVG 組件示例：
skill_view(name="architecture-diagram", file_path="templates/template.html")
該模板包含每種組件類型（前端、後端、數據庫、雲、安全）、箭頭樣式（標準、虛線、曲線）、安全組、區域邊界和圖例的工作示例——在生成圖表時，將其用作結構參考。