概念圖 (Concept Diagrams)
生成扁平、極簡且支持淺色/深色模式的 SVG 圖表，並輸出為獨立的 HTML 文件。採用統一的教育視覺語言，包含 9 種語義色階、句首大寫排版以及自動深色模式。最適合用於教育和非軟件類可視化——物理裝置、化學機理、數學曲線、物理對象（飛機、渦輪機、智能手機、機械手錶）、解剖學、平面圖、剖面圖、敘事流程（X 的生命週期、Y 的過程）、中心輻射型系統集成（智慧城市、物聯網）以及爆炸圖層視圖。如果存在針對該主題更專業的技能（專用軟件/雲架構、手繪草圖、動畫講解等），請優先使用那些技能；否則，本技能可作為具有簡潔教育風格的通用 SVG 圖表備選方案。附帶 15 個示例圖表。
技能元數據
| 來源 | 可選 — 使用 hermes skills install official/creative/concept-diagrams 安裝 |
| 路徑 | optional-skills/creative/concept-diagrams |
| 版本 | 0.1.0 |
| 作者 | v1k22（原始 PR），移植到 hermes-agent |
| 許可證 | MIT |
| 標籤 | diagrams, svg, visualization, education, physics, chemistry, engineering |
| 相關技能 | architecture-diagram, excalidraw, generative-widgets |
參考：完整 SKILL.md
信息
以下是 Hermes 在觸發此技能時加載的完整技能定義。這是技能激活時代理所看到的指令。
概念圖 (Concept Diagrams)
生成具有統一扁平、極簡設計系統的生產級質量 SVG 圖表。輸出為單個自包含的 HTML 文件，在任何現代瀏覽器中渲染效果一致，並支持自動淺色/深色模式切換。
適用範圍
最適合：
- 物理裝置、化學機理、數學曲線、生物學
- 物理對象（飛機、渦輪機、智能手機、機械手錶、細胞）
- 解剖學、剖面圖、爆炸圖層視圖
- 平面圖、建築轉換圖
- 敘事流程（X 的生命週期、Y 的過程）
- 中心輻射型系統集成（智慧城市、物聯網網絡、電網）
- 任何領域的教育/教科書風格可視化
- 定量圖表（分組條形圖、能量分佈圖）
以下情況請優先考慮其他技能：
- 具有深色科技美學的專用軟件/雲基礎設施架構（如果可用，請考慮
architecture-diagram） - 手繪白板草圖（如果可用，請考慮
excalidraw） - 動畫講解或視頻輸出（請考慮動畫類技能）
如果存在針對該主題更專業的技能，請優先使用。如果沒有合適的技能，本技能可作為通用 SVG 圖表的備選方案——輸出將具備下文所述的簡潔教育美學風格，這幾乎是任何主題的合理默認選擇。
工作流程
- 確定圖表類型（參見下方的圖表類型）。
- 使用設計系統規則佈局組件。
- 使用
templates/template.html作為外殼編寫完整的 HTML 頁面——將你的 SVG 粘貼到模板中標記為<!-- PASTE SVG HERE -->的位置。 - 保存為獨立的
.html文件（例如~/my-diagram.html或./my-diagram.html）。 - 用戶直接在瀏覽器中打開——無需服務器，無依賴項。
可選：如果用戶想要瀏覽多個圖表的畫廊，請參閱底部的“本地預覽服務器”。
加載 HTML 模板：
skill_view(name="concept-diagrams", file_path="templates/template.html")
該模板嵌入了完整的 CSS 設計系統（c-* 顏色類、文本類、淺色/深色變量、箭頭標記樣式）。你生成的 SVG 依賴於宿主頁面上存在的這些類。
設計系統
理念
- 扁平：無漸變、投影、模糊、發光或霓虹效果。
- 極簡：展示必要內容。框內無裝飾性圖標。
- 一致：每個圖表使用相同的顏色、間距、排版和描邊寬度。
- 支持深色模式：所有顏色通過 CSS 類自動適配——無需為每種模式單獨製作 SVG。
調色板
9 種色階，每種包含 7 個色階停點。將類名放在 <g> 或形狀元素上；模板 CSS 會處理兩種模式。
| 類名 | 50（最淺） | 100 | 200 | 400 | 600 | 800 | 900（最深） |
|---|---|---|---|---|---|---|---|
c-purple | #EEEDFE | #CECBF6 | #AFA9EC | #7F77DD | #534AB7 | #3C3489 | #26215C |
c-teal | #E1F5EE | #9FE1CB | #5DCAA5 | #1D9E75 | #0F6E56 | #085041 | #04342C |
c-coral | #FAECE7 | #F5C4B3 | #F0997B | #D85A30 | #993C1D | #712B13 | #4A1B0C |
c-pink | #FBEAF0 | #F4C0D1 | #ED93B1 | #D4537E | #993556 | #72243E | #4B1528 |
c-gray | #F1EFE8 | #D3D1C7 | #B4B2A9 | #888780 | #5F5E5A | #444441 | #2C2C2A |
c-blue | #E6F1FB | #B5D4F4 | #85B7EB | #378ADD | #185FA5 | #0C447C | #042C53 |
c-green | #EAF3DE | #C0DD97 | #97C459 | #639922 | #3B6D11 | #27500A | #173404 |
c-amber | #FAEEDA | #FAC775 | #EF9F27 | #BA7517 | #854F0B | #633806 | #412402 |
c-red | #FCEBEB | #F7C1C1 | #F09595 | #E24B4A | #A32D2D | #791F1F | #501313 |
顏色分配規則
顏色用於編碼含義，而非順序。切勿像彩虹色那樣循環使用顏色。
- 按類別對節點進行分組——同一類型的所有節點共享一種顏色。
- 使用
c-gray表示中性/結構性節點（開始、結束、通用步驟、用戶）。 - 每個圖表使用 2-3 種顏色，不要超過 6 種。
- 常規類別優先使用
c-purple、c-teal、c-coral、c-pink。 - 將
c-blue、c-green、c-amber、c-red保留用於語義含義（信息、成功、警告、錯誤）。
淺色/深色模式映射（由模板 CSS 處理——只需使用類名即可）：
- 淺色模式：50 填充 + 600 描邊 + 800 標題 / 600 副標題
- 深色模式：800 填充 + 200 描邊 + 100 標題 / 200 副標題
排版
僅使用兩種字體大小。無例外情況。
| 類名 | 大小 | 字重 | 用途 |
|---|---|---|---|
th | 14px | 500 | 節點標題、區域標籤 |
ts | 12px | 400 | 副標題、描述、箭頭標籤 |
t | 14px | 400 | 通用文本 |
- 始終使用句首大寫。切勿使用標題大寫（Title Case），也切勿全部大寫（ALL CAPS）。
- 每個
<text>元素必須帶有類名（t、ts或th）。不允許存在未分類的文本。 - 框內所有文本均需設置
dominant-baseline="central"。 - 框內居中文本需設置
text-anchor="middle"。
寬度估算（近似值）：
- 14px 字重 500：每字符約 8px
- 12px 字重 400：每字符約 6.5px
- 務必驗證：
box_width >= (char_count × px_per_char) + 48（兩側各 24px 內邊距）
間距與佈局
- ViewBox：
viewBox="0 0 680 H"，其中 H = 內容高度 + 40px 緩衝。 - 安全區域：x=40 至 x=640，y=40 至 y=(H-40)。
- 框之間：最小間隙 60px。
- 框內部：水平內邊距 24px，垂直內邊距 12px。
- 箭頭間隙：箭頭尖端與框邊緣之間保持 10px 間隙。
- 單行框：高度 44px。
- 雙行框：高度 56px，標題與副標題基線之間間距 18px。
- 容器內邊距：每個容器內部至少 20px。
- 最大嵌套層級：2-3 層。更深層次在 680px 寬度下將難以閱讀。
描邊與形狀
- 描邊寬度：所有節點邊框均為 0.5px。不是 1px，也不是 2px。
- 矩形圓角：節點使用
rx="8"，內部容器使用rx="12"，外部容器使用rx="16"至rx="20"。 - 連接線路徑：必須設置
fill="none"。否則 SVG 默認填充為黑色。
箭頭標記
在每個 SVG 的開頭包含此 <defs> 塊：
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</marker>
</defs>
在線條上使用 marker-end="url(#arrow)"。箭頭尖端通過 context-stroke 繼承線條顏色。
CSS 類（由模板提供）
模板頁面提供以下類：
- 文本：
.t、.ts、.th - 中性樣式：
.box、.arr、.leader、.node - 顏色漸變：
.c-purple、.c-teal、.c-coral、.c-pink、.c-gray、.c-blue、.c-green、.c-amber、.c-red（均支持自動淺色/深色模式）
你無需重新定義這些類——只需在 SVG 中應用它們即可。模板文件包含完整的 CSS 定義。
SVG 樣板代碼
模板頁面中的每個 SVG 均以以下確切結構開頭：
<svg width="100%" viewBox="0 0 680 {HEIGHT}" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</marker>
</defs>
<!-- Diagram content here -->
</svg>
將 {HEIGHT} 替換為實際計算的高度（最後一個元素的底部位置 + 40px）。
節點模式
單行節點（44px）：
<g class="node c-blue">
<rect x="100" y="20" width="180" height="44" rx="8" stroke-width="0.5"/>
<text class="th" x="190" y="42" text-anchor="middle" dominant-baseline="central">Service name</text>
</g>
雙行節點（56px）：
<g class="node c-teal">
<rect x="100" y="20" width="200" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="200" y="38" text-anchor="middle" dominant-baseline="central">Service name</text>
<text class="ts" x="200" y="56" text-anchor="middle" dominant-baseline="central">Short description</text>
</g>
連接線（無標籤）：
<line x1="200" y1="76" x2="200" y2="120" class="arr" marker-end="url(#arrow)"/>
容器（虛線或實線）：
<g class="c-purple">
<rect x="40" y="92" width="600" height="300" rx="16" stroke-width="0.5"/>
<text class="th" x="66" y="116">Container label</text>
<text class="ts" x="66" y="134">Subtitle info</text>
</g>
圖表類型
選擇適合主題的佈局：
- 流程圖 — CI/CD 流水線、請求生命週期、審批工作流、數據處理。單向流動（自上而下或從左到右）。每行最多 4-5 個節點。
- 結構/包含關係 — 雲基礎設施嵌套、分層系統架構。大型外部容器包含內部區域。使用虛線矩形表示邏輯分組。
- API/端點映射 — REST 路由、GraphQL 模式。從根節點開始的樹狀結構，分支到資源組，每個資源組包含端點節點。
- 微服務拓撲 — 服務網格、事件驅動系統。服務作為節點，箭頭表示通信模式，其間包含消息隊列。
- 數據流 — ETL 流水線、流式架構。從左到右的流動，從源經過處理到達 sink（數據匯）。
- 物理/結構 — 車輛、建築物、硬件、解剖結構。使用與物理形態匹配的形狀 —
<path>用於曲線主體，<polygon>用於錐形形狀，<ellipse>/<circle>用於圓柱形部件，嵌套<rect>用於隔間。參見references/physical-shape-cookbook.md。 - 基礎設施/系統集成 — 智慧城市、IoT 網絡、多域系統。中心輻射型佈局，中央平臺連接各個子系統。語義化線條樣式（
.data-line、.power-line、.water-pipe、.road）。參見references/infrastructure-patterns.md。 - UI/儀表板模擬圖 — 管理面板、監控儀表板。帶有嵌套圖表/儀表盤/指示器元素的屏幕框架。參見
references/dashboard-patterns.md。
對於物理、基礎設施和儀表板圖表，在生成之前加載相應的參考文件 — 每個文件都提供現成的 CSS 類和形狀基元。
驗證清單
在最終確定任何 SVG 之前，驗證以下所有事項：
- 每個
<text>都具有類t、ts或th。 - 框內的每個
<text>都具有dominant-baseline="central"。 - 用作箭頭的每個連接器
<path>或<line>都具有fill="none"。 - 沒有箭頭線穿過無關的框。
- 對於 14px 文本，
box_width >= (longest_label_chars × 8) + 48。 - 對於 12px 文本，
box_width >= (longest_label_chars × 6.5) + 48。 - ViewBox 高度 = 最底部元素 + 40px。
- 所有內容保持在 x=40 到 x=640 之間。
- 顏色類（
c-*）位於<g>或形狀元素上，絕不位於<path>連接器上。 - 存在箭頭
<defs>塊。 - 無漸變、陰影、模糊或發光效果。
- 所有節點邊框的描邊寬度為 0.5px。
輸出與預覽
默認：獨立 HTML 文件
編寫一個用戶可以直接打開的單個 .html 文件。無需服務器，無依賴項，可離線工作。模式：
# 1. Load the template
template = skill_view("concept-diagrams", "templates/template.html")
# 2. Fill in title, subtitle, and paste your SVG
html = template.replace(
"<!-- DIAGRAM TITLE HERE -->", "SN2 reaction mechanism"
).replace(
"<!-- OPTIONAL SUBTITLE HERE -->", "Bimolecular nucleophilic substitution"
).replace(
"<!-- PASTE SVG HERE -->", svg_content
)
# 3. Write to a user-chosen path (or ./ by default)
write_file("./sn2-mechanism.html", html)
告知用戶如何打開它：
# macOS
open ./sn2-mechanism.html
# Linux
xdg-open ./sn2-mechanism.html
可選：本地預覽服務器（多圖表畫廊）
僅在用戶明確希望瀏覽多個圖表的畫廊時使用此選項。
規則：
- 僅綁定到
127.0.0.1。絕不使用0.0.0.0。在共享網絡上將所有網絡接口暴露圖表存在安全隱患。 - 選擇一個空閒端口（不要硬編碼端口）並告知用戶所選的 URL。
- 服務器是可選且需主動啟用的 — 首選獨立 HTML 文件。
推薦模式（讓操作系統選擇空閒的臨時端口）：
# Put each diagram in its own folder under .diagrams/
mkdir -p .diagrams/sn2-mechanism
# ...write .diagrams/sn2-mechanism/index.html...
# Serve on loopback only, free port
cd .diagrams && python3 -c "
import http.server, socketserver
with socketserver.TCPServer(('127.0.0.1', 0), http.server.SimpleHTTPRequestHandler) as s:
print(f'Serving at http://127.0.0.1:{s.server_address[1]}/')
s.serve_forever()
" &
如果用戶堅持使用固定端口，請使用 127.0.0.1:<port> — 仍然絕不使用 0.0.0.0。記錄如何停止服務器（kill %1 或 pkill -f "http.server"）。
示例參考
examples/ 目錄附帶了 15 個完整且經過測試的圖表。在編寫類似類型的新圖表之前，請瀏覽它們以獲取可行的模式：
| 文件 | 類型 | 演示內容 |
|---|---|---|
hospital-emergency-department-flow.md | 流程圖 | 帶有語義顏色的優先級路由 |
feature-film-production-pipeline.md | 流程圖 | 分階段工作流，水平子流 |
automated-password-reset-flow.md | 流程圖 | 帶有錯誤分支的身份驗證流 |
autonomous-llm-research-agent-flow.md | 流程圖 | 迴環箭頭，決策分支 |
place-order-uml-sequence.md | 序列圖 | UML 序列圖樣式 |
commercial-aircraft-structure.md | 物理結構 | 用於逼真形狀的路徑、多邊形、橢圓 |
wind-turbine-structure.md | 物理橫截面 | 地下/地上分離，顏色編碼 |
smartphone-layer-anatomy.md | 爆炸視圖 | 交替的左右標籤，分層組件 |
apartment-floor-plan-conversion.md | 平面圖 | 牆壁、門，用紅色虛線表示擬議變更 |
banana-journey-tree-to-smoothie.md | 敘事旅程 | 蜿蜒路徑，漸進狀態變化 |
cpu-ooo-microarchitecture.md | 硬件流水線 | 扇出，內存層次結構側邊欄 |
sn2-reaction-mechanism.md | 化學 | 分子，彎曲箭頭，能量分佈 |
smart-city-infrastructure.md | 中心輻射型 | 每個系統的語義化線條樣式 |
electricity-grid-flow.md | 多階段流 | 電壓層級，流動標記 |
ml-benchmark-grouped-bar-chart.md | 圖表 | 分組條形圖，雙軸 |
使用以下命令加載任何示例：
skill_view(name="concept-diagrams", file_path="examples/<filename>")
快速參考：何時使用什麼
| 用戶指令 | 圖表類型 | 建議顏色 |
|---|---|---|
| "show the pipeline" | 流程圖 | 灰色起始/結束，紫色步驟，紅色錯誤，青色部署 |
| "draw the data flow" | 數據流水線（從左到右） | 灰色源，紫色處理，青色匯 |
| "visualize the system" | 結構圖（包含關係） | 紫色容器，青色服務，珊瑚色數據 |
| "map the endpoints" | API 樹 | 紫色根節點，每個資源組一個坡道 |
| "show the services" | 微服務拓撲 | 灰色入口，青色服務，紫色總線，珊瑚色工作器 |
| "draw the aircraft/vehicle" | 物理圖 | 路徑、多邊形、橢圓以呈現逼真形狀 |
| "smart city / IoT" | 中心輻射型集成 | 每個子系統使用語義化線條樣式 |
| "show the dashboard" | UI 模型 | 深色屏幕，圖表顏色：青色、紫色、珊瑚色用於警報 |
| "power grid / electricity" | 多階段流 | 電壓層級（高壓/中壓/低壓線寬） |
| "wind turbine / turbine" | 物理剖面圖 | 基礎 + 塔筒剖視 + 機艙顏色編碼 |
| "journey of X / lifecycle" | 敘事旅程 | 蜿蜒路徑，漸進式狀態變化 |
| "layers of X / exploded" | 爆炸層視圖 | 垂直堆疊，交替標籤 |
| "CPU / pipeline" | 硬件流水線 | 垂直階段，扇出至執行端口 |
| "floor plan / apartment" | 平面圖 | 牆體、門，提議的變更用紅色虛線表示 |
| "reaction mechanism" | 化學圖 | 原子、鍵、彎曲箭頭、過渡態、能量分佈 |