菜单
Generate dark-themed standalone HTML architecture diagrams with inline SVG, based on the Cocoon-style architecture diagram pattern, but adapted for Hermes. Use when the user wants a clean architecture diagram delivered as a single .html file that opens in any browser.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Undermybelt/hermes-skills --skill arch-diagram-html命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Use when retiring old logic, collapsing duplicate owners, removing fallbacks, or touching schema, persistence, or source-of-truth boundaries while deciding whether to delete old paths, retain compatibility, or stop for confirmation.
Use when defining new features, product behavior, UI/component design, architecture choices, contract changes, or ambiguous medium/high-complexity work before implementation.
Use when the user asks for caveman mode, fewer tokens, brief responses, compressed communication, or otherwise explicitly requests a much shorter answer.
基于 SOC 职业分类
正在显示 SKILL.md
| name | arch-diagram-html |
| description | Generate dark-themed standalone HTML architecture diagrams with inline SVG, based on the Cocoon-style architecture diagram pattern, but adapted for Hermes. Use when the user wants a clean architecture diagram delivered as a single .html file that opens in any browser. |
| version | 1.0.0 |
| author | Hermes Agent |
| license | MIT |
| tags | ["architecture-diagram","html","svg","system-design","visualization"] |
产物：单文件 .html，内嵌 CSS 与 SVG，可直接浏览器打开。
适用：
不适用：
excalidrawmanim-video#020617。*.html 并在现代浏览器打开。| 类型 | Fill | Stroke |
|---|---|---|
| Frontend | rgba(8, 51, 68, 0.4) | #22d3ee |
| Backend | rgba(6, 78, 59, 0.4) | #34d399 |
| Database / Storage / AI | rgba(76, 29, 149, 0.4) | #a78bfa |
| Cloud / Infra | rgba(120, 53, 15, 0.3) | #fbbf24 |
| Security | rgba(136, 19, 55, 0.4) | #fb7185 |
| Message Bus | rgba(251, 146, 60, 0.3) | #fb923c |
| External / Generic | rgba(30, 41, 59, 0.5) | #94a3b8 |
默认可用：
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
若用户要求完全离线：
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;标准 HTML 结构：
viewBox 高度<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>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />
</marker>
<rect x="X" y="Y" width="W" height="H" rx="6" fill="#0f172a"/>
<rect x="X" y="Y" width="W" height="H" rx="6" fill="rgba(6, 78, 59, 0.4)" stroke="#34d399" stroke-width="1.5"/>
若用户未指定：
默认直接产：
若用户要落盘：
write_file 保存 .htmlreferences/template.html：Hermes 基础模板references/source-note.md：上游来源与吸收说明