概念图 (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 粘贴到模板中标记为  的位置。
保存为独立的 .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"	化学图	原子、键、弯曲箭头、过渡态、能量分布

技能元数据​

参考：完整 SKILL.md​

概念图 (Concept Diagrams)

适用范围​

工作流程​

设计系统​

理念​

调色板​

颜色分配规则​

排版​

间距与布局​

描边与形状​

箭头标记​

CSS 类（由模板提供）​

SVG 样板代码​

节点模式​

图表类型​

验证清单​

输出与预览​

默认：独立 HTML 文件​

可选：本地预览服务器（多图表画廊）​

示例参考​

快速参考：何时使用什么​

技能元数据

参考：完整 SKILL.md

适用范围

工作流程

设计系统

理念

调色板

颜色分配规则

排版

间距与布局

描边与形状

箭头标记

CSS 类（由模板提供）

SVG 样板代码

节点模式

图表类型

验证清单

输出与预览

默认：独立 HTML 文件

可选：本地预览服务器（多图表画廊）

示例参考

快速参考：何时使用什么