mcpField
A
architecture-diagram

architecture-diagram

github.com/nousresearch设计与 UI258.5k494 次安装今天更新
代码仓库

关于 architecture-diagram

此技能用于生成独立的深色主题 HTML 架构图，并以内嵌 SVG 绘制，面向技术系统和基础设施，采用明确的视觉样式与布局规范。

主要功能

  1. 01生成独立 HTML 文件
  2. 02使用内嵌 SVG 绘图
  3. 03采用深色网格视觉风格
  4. 04呈现系统组件及其连接
  5. 05应用语义配色与边界样式

适用场景

  1. 01绘制前端、后端和数据库分层
  2. 02展示云区域、VPC 和子网
  3. 03呈现微服务或服务网格拓扑

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/nousresearch/hermes-agent --skill architecture-diagram

安装后在 Claude Code 中输入/architecture-diagram确认已加载。

附带文件templates/template.html

详细介绍

架构图技能

生成专业的深色主题技术架构图，作为带有内嵌 SVG 图形的独立 HTML 文件。无需外部工具、API 密钥或渲染库——只需编写 HTML 文件并在浏览器中打开。

范围

最适合：

  • 软件系统架构（前端／后端／数据库层）
  • 云基础设施（VPC、区域、子网、托管服务）
  • 微服务／服务网格拓扑
  • 数据库 + API 映射、部署图
  • 任何适合深色网格美学的技术基础设施主题

请先考虑其他选择：

  • 物理、化学、数学、生物学或其他科学主题
  • 实体物品（车辆、硬件、解剖结构、剖面图）
  • 平面图、叙事旅程、教育／教科书风格的视觉内容
  • 手绘白板草图（可考虑 excalidraw）
  • 动画讲解（可考虑动画技能）

如果有更适合该主题的专用技能，请优先使用。如果没有合适的技能，此技能也可作为通用 SVG 图表的替代方案——只是输出会采用下文所述的深色科技风格。

基于 Cocoon AI 的架构图生成器（MIT）。

工作流

  1. 用户描述系统架构（组件、连接、技术）
  2. 按照以下设计系统生成 HTML 文件
  3. 使用 write_file 保存为 .html 文件（例如 ~/architecture-diagram.html）
  4. 用户可在任意浏览器中打开——可离线使用，无依赖
输出位置

将图表保存到用户指定的路径；若未指定，默认保存到当前工作目录：

./[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 网格图案

<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。为防止箭头透过半透明填充显示，请使用双矩形遮罩技术：

  1. 绘制不透明背景矩形（#0f172a）
  2. 在上方绘制半透明样式矩形
连接规则
  • Z 轴顺序： 在 SVG 中尽早绘制箭头（网格之后），使其显示在组件框后方
  • 箭头标记： 使用 SVG 标记定义
  • 安全流： 使用玫瑰色（#fb7185）虚线
  • 边界：
    • 安全组： 虚线（4,4），玫瑰色
    • 区域： 较长的虚线（8,4），琥珀色，rx="12"
间距与布局逻辑
  • 标准高度： 60px（服务）；80-120px（大型组件）
  • 垂直间距： 组件之间至少间隔 40px
  • 消息总线： 必须放在服务之间的间隙中，不得与服务重叠
  • 图例位置： 至关重要。 必须放在所有边界框之外。计算所有边界的最低 Y 坐标，并将图例放在其下方至少 20px 处。

文档结构

生成的 HTML 文件采用四部分布局：

  1. 页眉： 带有脉冲圆点指示器和副标题的标题
  2. 主 SVG： 包含在圆角边框卡片中的图表
  3. 摘要卡片： 图表下方由三张卡片组成的网格，用于展示概要信息
  4. 页脚： 精简元数据
信息卡片模式
<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 实现
  • 兼容性： 必须能在所有现代网页浏览器中正确呈现

模板参考

加载完整的 HTML 模板，以获取精确的结构、CSS 和 SVG 组件示例：

skill_view(name="architecture-diagram", file_path="templates/template.html")

模板包含所有组件类型的可用示例（前端、后端、数据库、云、安全）、箭头样式（标准、虚线、曲线）、安全分组、区域边界和图例——生成图表时请将其作为结构参考。

评论

支持 Markdown