跳至內容

Panolayer Studio · 架構

看清誰呼叫誰。

Panolayer 會梳理你儲存庫中的服務、模組、函式、呼叫者與相依關係。這份地圖直接從原始碼解析而來,因此同一份程式碼永遠得到同一份地圖,你的 agent 與 Verification Engine 也以此為依據運作。

macOS 15 on Apple silicon · 免費開始使用 · 無需信用卡

Architecture · from system to source

Panolayer architecture map with application groups, functions and their connected dependencies.

完整截圖 · 捲動以查看詳細內容

你已經深入某個服務三層,卻還在設法釐清是誰呼叫它。

檔案樹只顯示程式碼放在哪裡,不顯示誰相依於它。若是 agent 撰寫的程式碼,情況更難:團隊裡沒有人寫過它,而 diff 有 2,000 行。Panolayer 讓你依「誰呼叫誰」在程式碼中移動,而不是依資料夾。

你可以做什麼

從整體系統到單一行

01

從整體系統開始

開啟儲存庫,查看其中的服務、每個服務的內容,以及它們之間的連結方式。

Start at the repository

Start at the repository

The architecture diagram connects the repository to API Routes, Application Pages, Other, Shared Libraries and UI Components.

完整截圖 · 捲動以查看詳細內容

02

深入到你需要的層級

從服務到模組再到函式,逐層深入。圖表、直欄與路徑檢視以三種方式呈現同一結構。

Open a function. Go straight to its source.

Open a function. Go straight to its source.

The recorded walkthrough opens the pick function from UserSwitcher in the architecture map, revealing its source, summary and verification results.

完整截圖 · 捲動以查看詳細內容

03

在脈絡中閱讀任一函式

開啟 getPrice(),查看它的作用、輸入與輸出、呼叫它的對象、它依賴的項目、適用的規則,以及它的驗證狀態。

Architecture · source and rules together

Architecture · source and rules together

Panolayer Studio source view showing a PATCH handler, its function summary, and a failed rule at line 65.

完整截圖 · 捲動以查看詳細內容

04

看清變更的影響範圍

將 getPrice() 從以分為單位改為以元為單位,地圖會顯示其影響範圍涵蓋產品頁、購物車與結帳流程,且這一切都在任何變更上線前就能看見。

Follow a component into its functions

Follow a component into its functions

The architecture map connects the UserSwitcher component to its pick function, alongside UserSwitcherProps and neighboring components.

完整截圖 · 捲動以查看詳細內容

05

你的 Agent 也能看到同一張地圖

Agent 可透過 MCP 工具查詢地圖中的結構、呼叫者與相依性,驗證機制則會對照地圖檢查其變更。

Panolayer Agent · answers grounded in your source

Panolayer Agent · answers grounded in your source

Panolayer Agent explains the posting workflow with references to the repository's routes, validation and data types.

完整截圖 · 捲動以查看詳細內容

活文件

與時俱進的文件

詢問程式碼庫的任何部分,即可取得根據架構撰寫的文件,其中的說法皆連結至原始碼。程式碼變更時可重新產生。

Living Documents 的運作方式

Living documents · source-linked context

A living document explaining a feature with links to source files and line numbers.

完整截圖 · 捲動以查看詳細內容

問題

還有其他問題?聯絡我們,我們會為你解答。

這份地圖是由 LLM 產生的嗎?

不是。結構是從原始碼解析而來。模型可以在你要求時補充白話說明,但絕不會決定結構。

不執行 agent 也能使用這份地圖嗎?

可以。它能獨立運作,幫你在不熟悉的程式碼中摸索方向。

支援哪些語言?

TypeScript、JavaScript、Python、Go、Rust、Java 等。動態呼叫與產生的程式碼較難追蹤,可能需要人工確認。完整清單請見文件。

適用於 monorepo 嗎?

適用。

在你的程式碼庫上試用 Panolayer。

免費開始使用 · 無需信用卡

Panolayer 如何處理你的程式碼

下一步:活文件