使用內嵌 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