功能特色 快速上手 GitHub
English | 繁體中文
開始使用

一鍵看懂你做出來的東西

不需要看懂程式碼,也能理解你的專案。CodeAtlas 把任何程式碼庫轉化為視覺地圖 — 幾分鐘內看見架構、資料流與邏輯。開源、本地優先,程式碼不出站。

$ npx code-atlas
localhost:3000
CodeAtlas Structure Flow — interactive project architecture visualization

你的程式碼庫,視覺化解讀

不用再猜測各部分如何連結。三個互動視角帶你看清全貌 — 即使你從未讀過一行程式碼。

結構流(Structure Flow)

看見專案中每個檔案以及它們之間的關係 — 以漂亮的互動式地圖呈現。終於知道哪些部分彼此依賴,完全不用打開任何檔案。

Structure Flow — file tree with detail panel

邏輯總覽(Logic Overview)

AI 幫你閱讀程式碼,並用白話文解釋每個部分的功能。不需要任何程式基礎,就能理解整個專案的用途與結構。

Logic Overview — categorized module cards

資料旅程(Data Journey)

追蹤資訊在你的 App 中從頭到尾的流動。看見使用者點擊按鈕、提交表單或觸發任何動作時,背後究竟發生了什麼。

Data Journey — API endpoint cards

AI 驅動分析

支援 Claude、OpenAI 或完全離線運行。AI 用白話文生成程式碼說明 — 未經你明確允許,絕不會將程式碼傳送至任何伺服器。

AI-powered code analysis results

Wiki 與知識匯出

自動將專案轉化為可讀的文件。匯出為 Markdown Wiki 頁面,建構可搜尋的知識圖譜 — 方便分享給團隊或未來的自己。

本地優先 & 隱私安全

你的程式碼留在你的電腦上,句號。CodeAtlas 100% 在本地運行 — 不上傳、不需雲端、不需帳號。一次安裝,隨處使用,完全放心。

Local analysis — call chain tracing with AI insights

60 秒上手

不需設定檔、不需註冊帳號。執行一行指令,就能看見你的專案活起來。

執行 CodeAtlas

一行指令搞定。不需要設定,不需要配置。

npx code-atlas

指向你的專案

CodeAtlas 掃描你的專案資料夾,自動建構一張完整的連結地圖。

code-atlas analyze ./my-project

探索視覺化地圖

瀏覽器自動開啟互動式視覺化。四處點擊,探索你專案的結構、邏輯和資料流。

http://localhost:3000

匯出為 Wiki(選用)

生成整個團隊都能看懂的文件 — 連非開發者也看得懂。

code-atlas wiki ./my-project --output ./docs

實際操作示範

觀看 CodeAtlas 在 2 分鐘內把真實專案變成互動式視覺地圖。

觀看示範 示範影片即將推出

應對真實專案

不論你的 App 有 10 個檔案還是 10,000 個 — CodeAtlas 都能解析、分析並視覺化。

core
Analysis Engine
cli
Orchestration
web
Visualization

三層架構:core 負責分析程式碼,cli 運行本地伺服器,web 呈現互動式視覺化。一切都在你的電腦上完成。

解析 TypeScript、JavaScript、Python 與 Java
React Flow + D3.js 互動式圖譜渲染
本地伺服器運行 — 一切不出站
AI 說明支援 Claude / OpenAI / 完全離線
支援 Windows、macOS 和 Linux
雙語介面(英文 & 中文)

準備好看懂你建造的東西了嗎?

一行指令安裝。免費且開源。不需要任何程式知識。

npm install -g code-atlas