前言¶

写技术方案时，把系统组件和它们的关系画清楚，往往比写几百字描述更省事。常见做法是开一个 draw.io 或 PPT 手工摆框，画完导出图片贴进文档；问题是组件一多就要手动对齐，改一次结构整张图重排，产出也只是一张静态图片，无法复用也不方便版本管理。下面介绍的 architecture diagram 这个 Skill，就是让模型直接生成一份独立 HTML 文件，里面用 SVG 绘制架构图，支持四种主题，产出即用，不用装额外的绘图软件。

这是什么¶

architecture diagram 是一个基于通用 SKILL.md 格式的 Skill，坐标 @indiv-artislong/architecture-diagram-new，由社区开发者（发布者 user_608d0df3）发布维护，分类为 dev-programming。它解决的问题很明确：当你需要系统架构图、基础设施图、云架构图、安全图、网络拓扑图，或任何展示系统组件及其关系的技术图时，由它直接产出 HTML 文件，而不是给你一段需要自己粘贴渲染的描述或一张不好改的截图。

版本 1.0.1，来源 community，标签 requires_api_key=false，即使用它不需要额外配置 API Key。

核心功能¶

根据官方资料，这个 Skill 的能力边界如下，没有更多隐藏功能，也不要按想象补充：

1、把架构图生成为独立的 HTML 文件。图不是图片外链，也不是需要后端渲染的页面，拿到一个 .html 文件就能在浏览器打开，也能直接归档或放进仓库。

2、图形使用 SVG 绘制。SVG 是矢量格式，放大缩小不失真，组件、连线、标注在 DOM 里是结构化元素，想改文字或连线关系时有下手的地方。

3、内置四种主题：light、clean、slate、dark。白天写文档可以用浅色，深夜调试或投屏演示可以切深色，同一套图结构换主题即可，不用重新画。

4、面向的场景覆盖系统架构、基础设施、云架构、安全、网络拓扑等以「组件加关系」为主的技术图。

安装与启用¶

已抓取资料中没有给出具体的安装命令或配置文件字段，因此这里如实说明，不做推测：

• 官方页面地址见文末，可从 SkillHub 页面获取安装方式与最新版本信息。
• 该 Skill 基于通用 SKILL.md 格式，在支持该格式的客户端（如 Cursor、Codex CLI、Claude Code）中，把 SKILL.md 放入 Skill 目录即可被识别，但具体目录位置和启用开关以各客户端文档为准，官方资料未逐一说明。
• 标签 requires_api_key=false 表示启用它不需要配置 API Key。

典型用法¶

官方简介里的使用方式就是一条指令式描述：当用户要求画某类技术图时使用。可复现的例子是，直接给出需求，比如「画一张订单系统的架构图，包含网关、服务、数据库和缓存，并标注调用关系」，然后由 Skill 生成对应的 HTML 文件。

拿到产出后建议做两步检查：一是在浏览器里打开，确认组件布局和连线没有重叠或断开；二是确认主题是否符合使用场景，四种主题在生成时指定即可。

适用场景与注意¶

适合谁：需要经常产出技术图、又不想在绘图工具里手工排版的后端、架构和 SRE 同学，以及写方案、写文档需要配图的人。

限制：

1、它产出的是结构图，不是流程图或时序图，如果需求是泳道图、甘特图一类，不在这个 Skill 的覆盖范围内。
2、SVG 绘制复杂拓扑时，连线交叉和布局美观程度取决于生成结果，拿到后可能需要手工微调。
3、图一旦生成就是一份 HTML 文件，后续组件增删改还是要改这份 HTML，它不会自动监听代码变化重画。
4、这是社区发布、分类为 dev-programming 的 Skill，使用前建议先看一眼生成的 HTML 源码，确认没有夹带多余的脚本或外链。

结尾¶

architecture diagram 的价值在于把「画架构图」从手工排版变成一次生成、四主题可选、可直接入库的 HTML 文件。功能不多，但正好卡在文档配图这个高频痛点上。官方地址：https://api.skillhub.cn/indiv-artislong/architecture-diagram-new