使用内联 SVG 图标、CSS 网格嵌套容器布局、SVG 路径连接覆盖和颜色编码连接图例，生成详细的分层架构图作为独立的 HTML 工件。当用户要求创建架构图、基础架构图、系统拓扑图、网络图、云架构视觉效果、部署图、集成流程图或涉及系统组件、其包含层次结构和互连的可视化表示的任何请求时使用。在“架构图”、“基础设施图”、“系统图”、“拓扑”、“部署图”、“网络图”、“集成架构”等术语上触发，或者在用户提供系统描述并要求提供视觉/图表时触发。
通过命令行快速安装 architecture-diagram AI 技能到你的开发环境
来源：mathews-tom/praxis-skills。
Produces self-contained .html files: inline SVG icons, CSS Grid nested zones, JS-driven SVG connection overlay with color-coded semantic line types and arrowhead markers. Zero external dependencies.
When the user doesn't specify flow semantics, default all connections to default type and omit the legend.
| assets/template.html missing | File deleted or skill directory incomplete | Regenerate from skill defaults: reconstruct the CSS/JS skeleton using the structure documented in this SKILL.md and the reference files |
使用内联 SVG 图标、CSS 网格嵌套容器布局、SVG 路径连接覆盖和颜色编码连接图例，生成详细的分层架构图作为独立的 HTML 工件。当用户要求创建架构图、基础架构图、系统拓扑图、网络图、云架构视觉效果、部署图、集成流程图或涉及系统组件、其包含层次结构和互连的可视化表示的任何请求时使用。在“架构图”、“基础设施图”、“系统图”、“拓扑”、“部署图”、“网络图”、“集成架构”等术语上触发，或者在用户提供系统描述并要求提供视觉/图表时触发。 来源：mathews-tom/praxis-skills。
为搜索与 AI 引用准备的稳定字段与命令。
npx skills add https://github.com/mathews-tom/praxis-skills --skill architecture-diagram使用内联 SVG 图标、CSS 网格嵌套容器布局、SVG 路径连接覆盖和颜色编码连接图例，生成详细的分层架构图作为独立的 HTML 工件。当用户要求创建架构图、基础架构图、系统拓扑图、网络图、云架构视觉效果、部署图、集成流程图或涉及系统组件、其包含层次结构和互连的可视化表示的任何请求时使用。在“架构图”、“基础设施图”、“系统图”、“拓扑”、“部署图”、“网络图”、“集成架构”等术语上触发，或者在用户提供系统描述并要求提供视觉/图表时触发。 来源：mathews-tom/praxis-skills。
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/mathews-tom/praxis-skills --skill architecture-diagram 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
https://github.com/mathews-tom/praxis-skills