CodeFlow 在瀏覽器中繪製 GitHub 儲存庫架構圖
此專案圍繞「braedonsaunders/codeflow」建置，面向真實業務場景，提供可重複使用、可持續維運的開源實作。
秒懂
- 它是什麼？
- 貼上 GitHub URL，即可獲得互動式依賴圖、影響範圍和健康評分，全部在用戶端完成。
- 適合誰用？
- README 清楚地說明 CodeFlow 是什麼：一個快速、啟發式的視覺化工具，程式碼保留在瀏覽器中，並不承諾窮盡式的準確性。它沒有包含基準測試、可用性保證或安全認證，MIT 授權條款授予使用權利但不提供任何擔保。
- 可以商用嗎？
- 可以。MIT 是寬鬆授權：你可以使用、修改並販售以它為基礎的軟體，只需保留著作權與授權聲明。
- 還在維護嗎？
- 有在維護。儲存庫最近一次提交在 9 天前。
- 用什麼語言寫的？
- 主要是 HTML（依據 GitHub 的語言統計）。
以上回答依據專案的 GitHub 資料（最近同步於 2026年9月14日）與我們的分析，不構成法律意見。
開源專案深度解析
一種純瀏覽器端的程式碼庫視覺化方式
CodeFlow 是一個 HTML 工具，接受 GitHub 儲存庫 URL 並產生互動式架構圖。README 說明你可以貼上 URL 或選擇本機檔案，然後在瀏覽器中看到架構圖，無需安裝或註冊。核心流程寫作「貼上 URL / 選擇檔案 -> 查看架構 -> 做出更好的決策」。儲存庫的主要語言是 HTML，README 將克隆後直接打開 index.html 描述為自託管選項。
無需建置步驟的執行方式
沒有建置過程，也沒有 npm install。README 說克隆儲存庫並打開 index.html 就足夠了，因為 index.html 從 vendor/ 資料夾載入固定的瀏覽器依賴。這些依賴包括 React 18、D3.js 7 和用於 JSX 的 Babel，每個都帶有來源 URL、SHA-256 摘要和授權聲明。腳本 scripts/vendor-browser-deps.mjs 用於重新整理這些依賴。README 還聲稱全新的本機啟動無需網路連線，本機檔案分析也可離線執行。
分析產生的結果
README 列出了多種輸出：互動式依賴圖、所選檔案的影響範圍分析、基於 git 歷史的程式碼所有權、針對硬編碼金鑰、SQL 注入、危險 eval 和除錯語句的安全掃描器、單例、工廠、觀察者和反模式的模式偵測、基於死程式碼和耦合度的 A-F 健康評分、按提交頻率顯示的活動熱圖、PR 影響分析，以及支援 wiki 連結的 markdown 圖。它還支援帶排除模式的本機資料夾分析。README 沒有為這些分析提供準確性基準。
隱私模型：程式碼保留在瀏覽器中
CodeFlow 完全在瀏覽器中執行，並直接從瀏覽器發出 GitHub API 呼叫。README 說它從不儲存程式碼或令牌，如果使用 GitHub 令牌，則僅儲存在瀏覽器記憶體中，並在關閉標籤頁時清除。它聲稱沒有分析或追蹤。對於私有儲存庫，令牌在本機輸入，僅用於 API 請求。本機檔案分析選項完全在瀏覽器中處理檔案，因此程式碼不會離開機器。README 沒有描述伺服器端日誌記錄或第三方資料共享。
CodeFlow Card GitHub Action
儲存庫包含一個名為 CodeFlow Card 的 GitHub Action，用於在 README 上產生 SVG 徽章。README 說該卡片在每次合併時由與 Web 應用相同的分析器重新計算，並顯示健康等級、規模、脆弱性和隱藏成本。有五種樣式：緊湊、行、極簡、英雄和詳細，還有強調色預設和隱藏等級的隱私模式。該操作可以選擇性發布 PR 評論。設定說明在 card/ 目錄中，README 包含真實卡片範例的樣式畫廊。
身份驗證、速率限制和匯出選項
公共儲存庫不需要令牌；沒有令牌時，GitHub API 限制為每小時 60 個請求。使用具有 repo 範圍的個人存取令牌，限制升至每小時 5,000 個請求，README 還記錄了適用於團隊的 GitHub App 身份驗證，限制類似。分析後，共享按鈕建立一個連結，任何人都可以重新執行相同的分析。匯出選項包括 JSON、Markdown、純文字、SVG、PDF 和原始 JSON，JSON 報告包含儲存庫中繼資料、檔案函式、依賴項、安全問題、模式和建議。
已知限制和啟發式準確性
README 明確指出依賴分析是啟發式的。唯一函式按名稱匹配，重複函式名按檔案和顯式匯入限定作用域，動態匯入或重新命名的執行時引用可能會被遺漏。單個超過 2 MB 的檔案會列出但不會解析。Pascal 支援被描述為啟發式，識別例程和 uses 單元依賴，同時過濾註解。安全掃描器從 XSS 檢查中排除測試檔案、固定裝置、文件和工具目錄，但仍檢查 CI 工作流和鉤子中的硬編碼金鑰。README 沒有提供正式的準確性規範。
braedonsaunders-codeflow 的 README 所列內容應視為這個版本的操作邊界。實際閱讀時，先對照專案名稱、命令列入口、設定檔路徑與輸出格式，再檢查環境需求是否吻合。若文件沒有說明某項能力，本文不把它推定為已提供。這個判讀方式特別適合將 braedonsaunders-codeflow 放進既有工具鏈前的初步篩選：可以從最小輸入開始，觀察終端輸出、產生的檔案與錯誤訊息，再決定是否擴大使用範圍。
編輯結論
README 清楚地說明 CodeFlow 是什麼：一個快速、啟發式的視覺化工具，程式碼保留在瀏覽器中，並不承諾窮盡式的準確性。它沒有包含基準測試、可用性保證或安全認證，MIT 授權條款授予使用權利但不提供任何擔保。 針對 braedonsaunders-codeflow，先依 README 指定的安裝命令、設定檔與輸出逐項核對，再決定是否納入現有流程；這篇文章適合需要理解其實作邊界的工程師，不適合把個人設定或實驗性功能直接當成正式保證的人。
社群筆記