draw-architecture：把系統架構變成互動式 canvas 圖

• URL: https://github.com/yulonghe97/draw-architecture
• Date Saved: 2026-08-20
• Source: GitHub
• Tags: ai-tools, dev-tools
• Repo: https://github.com/yulonghe97/draw-architecture

Summary

一個 agent skill，把任何系統架構（codebase、架構文件、文字描述）轉成互動式可探索 canvas 圖表。輸出為單一 HTML 檔。

功能

• Pan/zoom/pinch 互動瀏覽
• Click-to-isolate：點任何元件可高亮其連線、顯示說明面板
• Dark/light 切換
• PNG 匯出（2x 解析度）
• URL hash 保存視角狀態，可分享特定位置
• 單一 self-contained HTML，僅依賴 Google Fonts（JetBrains Mono）

視覺語言

• Bands：水平區域代表架構層次，由上到下按因果順序排列
• 虛線框 = 你擁有的抽象；實線框 = 可替換的 vendor/infra
• 每個 plane 一個色調，反饋迴路走側邊 gutter

安裝方式

• npx skills add yulonghe97/draw-architecture（支援 70+ agents）
• npx draw-architecture（Claude Code 專用）
• 手動 git clone + symlink

使用

裝好後對 agent 說「把這個 codebase 的架構畫成 canvas」即可觸發。

與 diagram-design 的比較

• diagram-design：28 種圖表模板 + 設計規則，輸出靜態 HTML+SVG
• draw-architecture：專注架構圖，輸出互動式 canvas（可 pan/zoom/click），更適合大型系統視覺化

99 stars，MIT，2026-08-11 建立。