影像 Premium

Architecture Diagrammer

把元件與連接的純文字規格變成經過校驗的 SVG 架構圖，並附一份書面報告：未知連線會被丟棄、重複 ID 會被拒絕、孤立元件與環路都會被點名。

適用於： Claude Code, Codex, Cursor, Muse · 版本 1.0.0 · 需要：一份架構規格（spec.txt：[components] 寫 id: 名稱 | 類型，[connections] 寫 a -> b: 標籤）。

用 Premium 取得此 Skill 查看方案

預覽

Architecture Diagrammer —— 成品輸出 — 範例圖：該 Skill 用自帶規格生成的 Shop API 架構圖與報告。文字範例見下方。

範例輸出

此 Skill 產出的範例。範例內容，僅供說明。

Architecture Diagrammer report — sample

Diagram report: Shop API

Components: 5 | Edges drawn: 5 | Columns: 4

Components: Web App (client, column 0); API Server (service, column 1); Redis Cache (cache, column 2); Job Worker (service, column 2); Postgres (database, column 3).

Edges: Web App -> API Server: HTTPS; API Server -> Redis Cache: GET; API Server -> Postgres: SQL; API Server -> Job Worker: Enqueue; Job Worker -> Postgres: SQL.

Errors: none. Warnings: none.

Messy draft check: 5 components, 3 edges drawn, 2 errors (duplicate api id; edge to unknown ghost dropped), 4 warnings (unknown type, 2 orphans, cycle api -> db -> api).

你將獲得

校驗過的 SVG 圖：依賴分列、帶標籤箭頭、環路走下方繞行
架構報告：元件與連線表及全部錯誤與警告
繪圖前校驗：丟棄未知連線、拒絕重複 ID
可與成圖一起入庫的規格格式

關於此 Skill

讀取純文字規格（[components] 寫 ID、名稱與類型；[connections] 寫帶標籤的箭頭），渲染按依賴分列的 SVG 架構圖與 diagram-report.md：元件與連線表、每個元件的分列位置、全部錯誤與警告。引用未知元件的連線會被丟棄，絕不會畫向猜測的方框；重複 ID 保留首次定義；孤立元件與環路會被報告而非隱藏。純本地執行、僅用標準函式庫；圖上只出現規格裡列出的內容——不會推斷補全畫面。

試一試

按這份規格畫出我的 Shop API 架構圖。

適合對象

為 README、文件或 PR 審查記錄系統架構
分享前檢查手寫的架構草圖
讓架構圖保持誠實：只畫列出的內容

不適合

從程式碼庫反向生成架構圖——規格由你自己寫
編造缺失的元件、儲存或連線來補全畫面
證明架構本身正確——報告乾淨只說明圖與規格一致，不說明規格與現實一致

如何安裝

把安裝提示詞複製到你的 Agent： Read https://skillu.dev/install/agent.md, then install the Architecture Diagrammer skill (architecture-diagrammer).
或在上線後從本頁下載 Skill 包，把它的資料夾放入你的 Agent 的 skills 目錄。
用斜線命令呼叫它，例如 /architecture-diagrammer，然後用大白話描述你想要什麼。

常見問題

規格有錯怎麼辦？

仍會用有效部分出圖，報告列出全部錯誤與警告：未知連線被丟棄、重複 ID 保留首次定義、孤立元件與環路都會點名。修好規格再跑一次即可。

它會畫出我沒列出的東西嗎？

不會。圖上只出現規格裡的元件與連線。缺失的快取或兜底路徑是規格缺口，需要你補上，而不是由 Skill 替你補。

取得 Premium 瀏覽更多 Skills