Visualization Dashboard
Interactive 2D and 3D graph exploration with all 17 node types, 10 edge types, search, filtering, impact overlay, health stats, and query caching — powered by Cytoscape.js and Three.js.
Overview
Nomik includes a built-in visualization dashboard that renders your code knowledge graph as an interactive 2D or 3D graph. Launch it with:
nomik serveThis starts the MCP server and opens the dashboard at http://localhost:3333.
For the REST API only (no dashboard):
nomik dashboard # REST API on http://localhost:42422D Graph (Cytoscape.js)
The default view renders the graph using Cytoscape.js with four layout options:
| Layout | Algorithm | Best For |
|---|---|---|
| Modules | CoSE (Compound Spring Embedder) | General-purpose, shows clusters naturally |
| Flow | Breadthfirst | Hierarchical code (routes → controllers → services) |
| Hub | Concentric | Highlighting a central node and its dependencies |
| Circle | Circular | Even distribution, good for small graphs |
Adaptive Performance
The dashboard auto-detects graph size and adjusts rendering quality:
| Tier | Nodes | Adjustments |
|---|---|---|
| Small | < 100 | Full quality, all labels, all edges |
| Medium | 100–300 | Reduced layout iterations, smaller labels |
| Large | 300–1000 | Haystack edges, min-zoomed-font-size, fast CoSE layout (300 iterations) |
| Extreme | > 1000 | textureOnViewport, hideEdgesOnViewport, edge hover disabled |
Level-of-Detail (LOD)
When zoomed out below 0.6x, only File nodes and DEPENDS_ON edges are visible. Zooming in reveals all other node types and edge types. This eliminates visual clutter on large codebases.
Pagination
For large projects, the dashboard loads the top 500 files ranked by function count (importance-ranked), plus their children and inter-node edges. A status bar shows loadedFiles / totalFiles with a "Load More" option.
3D Graph (Three.js)
Toggle to 3D mode for a DNA/neural-network style visualization using 3d-force-graph (Three.js):
- Animated edge particles on
CALLSandDEPENDS_ONedges - Click-to-zoom on any node
- Auto-rotation for small/medium graphs (disabled for large)
- Adaptive quality — particle count, node resolution, and simulation ticks scale with graph size (thresholds at 300/800/1500 nodes)
- All 17 node types rendered with distinct colors matching the 2D view
Search
The search bar supports:
- Name search — type a function, class, or file name
- Ranked results — matches sorted by relevance (exact > starts-with > contains > path)
- Focus mode — centers and highlights the selected node
- Fit All mode — fits all matches in view
- Prev/Next navigation — cycle through multiple matches
- Clear on close — highlights are removed when closing search
Example: searching processPayment centers the graph on that function and highlights all its connections.
Filters
The filter panel lets you toggle visibility by node type, edge type, and directory layer. Only types with at least one instance in the current graph are shown.
Node Types (17)
| Node Type | Color | Shape |
|---|---|---|
File | Cyan | Round rectangle |
Function | Emerald | Circle |
Class | Purple | Diamond |
Route | Amber | Hexagon |
Variable | Blue | Round tag |
Event | Purple (light) | Star |
EnvVar | Slate | Round rectangle |
Module | Cyan (light) | Round rectangle |
DBTable | Orange | Barrel |
DBColumn | Orange (dark) | Circle |
ExternalAPI | Indigo | Pentagon |
CronJob | Lime | Octagon |
QueueJob | Fuchsia | Rhomboid |
Metric | Teal | Triangle |
Span | Sky | Round rectangle |
Topic | Violet | Concave hexagon |
SecurityIssue | Red | Vee |
Edge Types (10)
| Edge Type | Color | Style | Description |
|---|---|---|---|
CONTAINS | Slate | Solid | File contains a symbol |
CALLS | Amber | Solid | Function invocation |
DEPENDS_ON | Sky | Dashed | Inter-file dependency |
IMPORTS | Indigo | Dashed | File-to-file import |
EXPORTS | Violet | Dotted | Module export |
LISTENS_TO | Purple | Solid | Event subscription |
EXTENDS | Purple | Solid (backcurve arrow) | Class inheritance |
USES_ENV | Slate | Dotted | Env variable reference |
HAS_SECURITY_ISSUE | Red | Solid (thick) | Security vulnerability |
CALLS_EXTERNAL | Indigo | Solid | External API call |
Directory Layers
Files are grouped by top-level directory. Each directory gets a unique color. You can toggle entire directories on/off with "All" / "None" buttons.
Impact Overlay
Click any node to see its full impact highlighted across all edge types:
| Color | Meaning |
|---|---|
| Red glow | Source node (clicked) |
| Amber glow | Downstream — all nodes connected via outgoing edges |
| Blue glow | Upstream — all nodes connected via incoming edges |
| Faded | Unrelated nodes |
The impact overlay follows all edge types — CALLS, DEPENDS_ON, CONTAINS, EXTENDS, LISTENS_TO, USES_ENV, CALLS_EXTERNAL, HAS_SECURITY_ISSUE, and more.
Node Detail Panel
Click any node to open the side panel. The panel adapts to the node type and shows all relevant relationships:
- Properties — name, file path, start/end line, async, exported, language, method, route, url, schedule
- Calls — functions this node calls
- Called By — functions that call this node
- Extends — classes this node inherits from
- Extended By — classes that inherit from this node
- Listens To — events this node subscribes to
- Depends On — files/modules this node depends on
- Depended On By — files/modules that depend on this node
- Uses Env Vars — environment variables referenced
- Calls External — external API calls made
- Security Issues — security vulnerabilities linked to this node
- Contains — symbols defined in this file (for
Filenodes) - Contained In — the file containing this symbol
Each node type badge is color-coded to match the graph colors.
Stats Panel
The stats panel is a sidebar showing real-time graph metrics with expandable health sections:
Graph Counts
- Total nodes and edges
Node Type Breakdown
All non-zero node type counts are displayed: Files, Functions, Classes, Routes, Variables, Events, Env Vars, Modules, DB Tables, External APIs, Security Issues.
Health Metrics (expandable)
| Metric | Details |
|---|---|
| Dead code | Functions never called — click to expand full list with file paths |
| God objects | Functions with >15 unexpected cross-file dependencies — click to expand |
| God files | Files with >15 functions — shows function count and line count |
| Duplicates | Functions with identical body hash (≥3 lines) — shows all copies |
| Security issues | Count of security vulnerabilities (if any) |
Health Score
A composite score (0–100%) computed from:
| Factor | Penalty | Cap |
|---|---|---|
| Dead code | -1 per % of dead functions | -25 |
| God objects | -5 per god object | -20 |
| God files | -3 per god file | -15 |
| Duplicates | -2 per duplicate group | -10 |
| Security issues | -10 per issue | -30 |
Score ≥ 80% = Healthy (green), ≥ 50% = Fair (amber), < 50% = Needs attention (red).
Query Caching
All Neo4j queries are cached with a 60-second TTL to avoid redundant database round-trips when switching between 2D/3D modes or re-rendering. The cache is automatically invalidated when you switch projects.
Project Selector
If you have multiple projects, the project selector dropdown filters the graph to show only nodes and edges for the selected project. Switching projects clears the query cache and reloads all data.
REST API (14 Endpoints)
The nomik dashboard command starts a REST API on port 4242:
| Endpoint | Method | Description |
|---|---|---|
/api/stats | GET | Node/edge counts by type |
/api/health | GET | Dead code, god files, duplicates |
/api/onboard | GET | Full codebase briefing |
/api/rules | GET | Architecture rules evaluation |
/api/dead-code | GET | List of dead code functions |
/api/god-files | GET | List of god files |
/api/duplicates | GET | Duplicate function groups |
/api/communities | GET | Functional clusters |
/api/flows | GET | Execution flows from entry points |
/api/projects | GET | All projects |
/api/impact?symbol=X | GET | Impact analysis for symbol X |
/api/explain?symbol=X | GET | Full context for symbol X |
/api/test-impact?symbol=X | GET | Affected test files for symbol X |
/api/service-links | GET | Cross-service dependencies |
/api/search?q=X | GET | Search nodes by name |
CORS is enabled by default. No external dependencies — uses Node.js built-in http module.
Tech Stack
| Component | Library |
|---|---|
| 2D Graph | Cytoscape.js |
| 3D Graph | 3d-force-graph (Three.js) |
| UI Framework | React 19 + Vite |
| Styling | Tailwind CSS |
| Graph Database | neo4j-driver (direct Bolt connection) |
| Caching | In-memory 60s TTL query cache |
| State Management | React hooks |
Parser Extractors
Complete reference for all 37 extractors across 13 languages — with code examples showing exactly what Nomik detects.
Security
Nomik's security model — local-first architecture, threat model, parameterized queries, network isolation, role-scoped access, and built-in security scanning.