Code Map

Navigate your entire codebase as a live, zoomable dependency graph. Every file is a node. Every import is an edge. Color-coded by health score so you can spot problem areas instantly.

How it works

Mapnostics builds a directed acyclic graph (DAG) from every static import and export in your repository. The graph is re-computed after every re-index — so as your codebase evolves, the map stays accurate. Each node is annotated with its health score, primary technology type, dead code flags, and zombie code instances.

Nodes — one per file, sized by import count (more connections = larger node).
Edges — directed from importer to imported, showing the dependency flow.
Clusters — related files group together automatically by directory.
Color — health score determines color: green (healthy), amber (at risk), red (critical).

Live demo

Watch the graph build node by node. Click any node to inspect its health score, type, and imports. The detail panel updates instantly with no layout shift.

mapnostics.com/repo/mapnostics-app/code-map

Code Map

mapnostics-app · live dependency graph · 7 files

+−⊡

TSX

App.tsx

health 100

TSX

Router.tsx

health 90

TS

Auth.tsx

health 98

TSX

Dashboard.tsx

health 85

TSX

Dead.tsx

health 72

TS

Impact.tsx

health 95

TSX

Reports.tsx

health 88

Click a node to inspect

SELECTED

—.tsx

— · health 0

Navigating the map

Zoom and pan

Use the + / − controls or your mouse wheel to zoom. Click and drag to pan. Double-click a node to center it.

Selecting nodes

Click any node to open the detail panel — health score, file type, list of imports, and outgoing dependency count. Click again to deselect.

Filtering

Use the filter bar to isolate specific file types (TSX, TS, CSS), health ranges, or directories. Combine with Dead Code filters to highlight deletion candidates in the graph.

NOTE

Large repositories (1000+ files) render the Code Map in clustered mode by default — one node per directory, expandable on click. This keeps the graph readable for monorepos.

Node colors

Green (health 90–100) — well-maintained, low coupling, no issues flagged.
Amber (health 70–89) — some dead code, larger than ideal file size, or low test coverage.
Red (health 0–69) — significant issues: dead code, secrets, zombie code, or very high coupling.

TIP

Use the Code Map to spot "hub" files — nodes with many incoming edges. These are your highest-risk files to touch. Always run the Impact Simulator before editing a hub file.