{/* 此页面由 website/scripts/generate-skill-docs.py 从技能的 SKILL.md 自动生成。请编辑源文件 SKILL.md，而非此页面。 */}

概念图

生成扁平、简约、支持明暗模式的 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
平台	linux, macos, windows
标签	`diagrams`, `svg`, `visualization`, `education`, `physics`, `chemistry`, `engineering`
相关技能	`architecture-diagram`, `excalidraw`, `generative-widgets`

参考：完整 SKILL.md

:::info 以下是 Hermes 在触发此技能时加载的完整技能定义。这是技能激活时代理所看到的指令。 :::

概念图

使用统一的扁平极简设计系统生成生产级 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	通用文本

始终使用句首大写（Sentence case）。 绝不用标题式大写（Title Case）或全大写（ALL CAPS）。
每个 <text> 必须带有类（t, ts 或 th）。不允许无类文本。
所有盒子内的文本设置 dominant-baseline="central"。
盒子内居中文本设置 text-anchor="middle"。

宽度估算（约）：

14px 字重 500：每个字符约 8px
12px 字重 400：每个字符约 6.5px
始终验证：box_width >= (字符数 × 每字符像素数) + 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>
 
  <!-- 图表内容在此 -->
 
</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">服务名称</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">服务名称</text>
  <text class="ts" x="200" y="56" text-anchor="middle" dominant-baseline="central">简短描述</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">容器标签</text>
  <text class="ts" x="66" y="134">副标题信息</text>
</g>

图表类型

选择适合主题的布局：

流程图 —— CI/CD 流水线、请求生命周期、审批工作流、数据处理。单向流（自上而下或从左到右）。每行最多 4-5 个节点。
结构/包含图 —— 云基础设施嵌套、分层系统架构。外部大容器包含内部区域。逻辑分组使用虚线矩形。
API/端点映射图 —— REST 路由、GraphQL 模式。根树形结构，分支到资源组，每个包含端点节点。
微服务拓扑图 —— 服务网格、事件驱动系统。服务为节点，箭头表示通信模式，消息队列在服务之间。
数据流图 —— ETL 流水线、流式架构。从左到右从源经处理到目标。
物理/结构图 —— 车辆、建筑、硬件、解剖。使用匹配物理形态的形状 —— <path> 用于曲线体、<polygon> 用于锥形、<ellipse>/<circle> 用于圆柱部件、嵌套 <rect> 用于隔间。参见 references/physical-shape-cookbook.md。
基础设施/系统集成图 —— 智慧城市、物联网网络、多领域系统。中心辐射式布局，中心平台连接子系统。语义线样式（.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 >= (最长标签字符数 × 8) + 48。
对于 12px 文本：box_width >= (最长标签字符数 × 6.5) + 48。
ViewBox 高度 = 最底部元素 + 40px。
所有内容保持在 x=40 至 x=640 范围内。
颜色类（c-*）放在 <g> 或形状元素上，绝不放在 <path> 连接线上。
箭头 <defs> 块已包含。
无渐变、阴影、模糊或发光效果。
所有节点边框的描边宽度为 0.5px。

输出与预览

默认：独立 HTML 文件

编写用户可直接打开的单个 .html 文件。无需服务器，无需依赖项，离线可用。模式：

# 1. 加载模板
template = skill_view("concept-diagrams", "templates/template.html")
 
# 2. 填写标题、副标题并粘贴 SVG
html = template.replace(
    "<!-- DIAGRAM TITLE HERE -->", "SN2 反应机理"
).replace(
    "<!-- OPTIONAL SUBTITLE HERE -->", "双分子亲核取代反应"
).replace(
    "<!-- PASTE SVG HERE -->", svg_content
)
 
# 3. 写入用户选择的路径（或默认写入 ./）
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 文件。

推荐模式（让操作系统选择空闲的临时端口）：

# 将每个图表放在 .diagrams/ 下的独立文件夹中
mkdir -p .diagrams/sn2-mechanism
# ...写入 .diagrams/sn2-mechanism/index.html...
 
# 仅在回环接口上提供服务，使用空闲端口
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:<端口> —— 仍然绝不使用 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/<文件名>")

快速参考：何时使用何种图表

用户说	图表类型	建议颜色
”展示管道”	流程图	灰色开始/结束，紫色步骤，红色错误，青色部署
”画出数据流”	数据管道（从左到右）	灰色源，紫色处理，青色目标
”可视化系统”	结构图（包含）	紫色容器，青色服务，珊瑚色数据
”映射端点”	API 树	紫色根，每个资源组一个色阶
”展示服务”	微服务拓扑	灰色入口，青色服务，紫色总线，珊瑚色工作节点
”画出飞行器/车辆”	物理图	路径、多边形、椭圆实现真实形状
”智慧城市 / IoT”	中心辐射集成图	每个子系统的语义线样式
”展示仪表盘”	UI 原型	暗色屏幕，图表颜色：青色、紫色、珊瑚色用于警报
”电网 / 电力”	多阶段流程图	电压层次（HV/MV/LV 线宽）
“风力涡轮机 / 涡轮”	物理截面图	基础 + 塔筒剖视图 + 机舱颜色编码
”X 的旅程 / 生命周期”	叙事旅程	蜿蜒路径，渐进状态变化
”X 的层次 / 分解”	分解层视图	垂直堆叠，交替标签
”CPU / 流水线”	硬件流水线	垂直级，扇出到执行端口
”平面图 / 公寓”	平面图	墙壁、门、红色虚线表示建议更改
”反应机理”	化学图	原子、化学键、弯曲箭头、过渡态、能量曲线

好奇心花园🪴

探索

最近的笔记

note-template

getMoon.js

getWeather.js

概念图（Concept Diagrams）

概念图