architecture-diagram-generator

为什么收录

这个 skill 面向更精致的 architecture diagrams，产物是独立 HTML 文件。当 diagram 不只是文档内嵌素材，而是需要直接分享、展示和评审的视觉页面时，它很合适。它的输出包含暗色主题、summary cards 和 inline SVG。

适合场景

• system architecture overviews。
• cloud 和 infrastructure diagrams。
• security boundary 和 network topology diagrams。
• 可以直接在浏览器打开的可分享 HTML artifacts。

评估笔记

• 优点：输出自包含，视觉识别度强，component color system 明确，适合 demo 和 stakeholder review。
• 短板：比 plain SVG 更重，不太适合原生 diagram editor 工作流，也没有 validator。
• 待确认：是否把上游 examples 保存在本仓库，还是只保留我们自己的 benchmark examples。

产物

• 示例：examples/service-architecture.html
• 预览：screenshots/service-architecture-preview.png
• 可编辑预览源文件：screenshots/service-architecture-preview.svg

维护

• 最近检查：2026-04-26
• 下一步：在浏览器中渲染 HTML 示例，并决定是否加入自动截图。