Skip to content

codegarden13/js-dependency-graph

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

58 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NodeAnalyzer

Interactive Architecture & Dependency Visualization for Complex JavaScript & TypeScript Systems.

Why

Large and long-lived codebases tend to lose architectural transparency over time.
Dependencies grow implicitly, complexity increases, and structural risks remain hidden.

NodeAnalyzer makes architecture visible again — supporting informed technical decision-making, refactoring strategy, and risk assessment.

screenshot


Value Proposition

NodeAnalyzer helps technical leaders and teams:

  • Understand dependency structures instead of assumed ones
  • Detect architectural hotspots and complexity clusters
  • Make refactoring decisions based on structural data
  • Reduce onboarding time for new developers
  • Create a shared architectural understanding across teams

Example Use Cases
(Developers, teams, CTO, Tech Lead)

Devteam Leader / You ?

Scenario: Everyone wants a (Live) dashboard about the current status of the teams projects - including structure, done and missing documentation and more. If someone from the team changes something in the common (remote) project, it gets visible for everybody. To see urgent ToDos, take this livechart: chart MRI

CTO / Tech Lead Perspective

Scenario:
A product team plans a major feature extension in a 4+ year old codebase. Delivery pressure is high, but architectural side effects are unclear.

Questions typically raised:

  • Which modules are central and highly coupled?
  • Where are complexity hotspots that may slow down development?
  • Which parts of the system are safe to modify?
  • How will this change affect cross-team ownership boundaries?

How NodeAnalyzer supports the decision:

  • Visualizes real dependency structures instead of assumed ones
  • Highlights structural hotspots before changes are implemented
  • Provides measurable complexity indicators (LOC, basic metrics)
  • Creates a shared architectural view for technical discussions

Result: architectural decisions are based on structural data, not intuition.


Purpose:
Helps teams - evaluate architectural structure, detect structural risks and understand dependency complexity in existing codebases.

AST-based (Babel) static analysis engine for JavaScript and TypeScript systems, designed for engineering teams who require architectural clarity:

  • Architectural transparency
  • Shared system understanding
  • Documentation support
  • Structural risk visibility

The tool focuses on static structure, not runtime behavior. It supports:

  • Onboarding
  • Refactoring decisions
  • Risk analysis
  • Technical debt visibility
  • Cross-team understanding

It does not replace documentation — it supports it by exposing structural reality. It does not replace your tools. I just try to adopt features from payed tools like CodesScene to me personal needs and to my NodeAnalyzer learning journey


Features:
Automated structural analysis, dependency graph generation, complexity metrics and architectural hotspot detection.

NodeAnalyzer analyzes JavaScript / TypeScript applications from their entrypoint and generates a D3-based interactive architecture graph containing:

  • Project structure with Modules, Functions, File header comments
  • Import / dependency relationships
  • Heuristic asset detection (HTML, CSS, JSON, CSV, etc.), rendered README.md files (README discovery per folder)
  • LOC and basic complexity metrics

Key capabilities:

  • Automated dependency graph generation
  • Structural complexity evaluation
  • Identification of architectural hotspots
  • Asset and documentation linkage
  • JSON export for further processing or integration

Physical location of analyzed projects is irrelevant. Targets are defined centrally via configuration.


Output:
Structured JSON file (tmp) for the current interactive graph.
app/public/output/code-structure.json

Example:

{
  "meta": { "entry": "app/index.js" },
  "nodes": [...],
  "links": [...]
}
  • nodes → files, functions, assets
  • links / edges → dependency relationships

Tech Stack and Architecture
  • Node.js
  • Express
  • D3.js (Graph Rendering)
  • realtime JSON about architecture model of the targeted app

Architecture

NodeAnalyzer follows a layered architecture:

  • Static analysis module
  • Graph transformation layer
  • Interactive visualization layer
  • JSON export service

Projects Configuration:
app/config/apps.json.

Each target contains:

  • id
  • name
  • rootDir
  • url (optional)

apps.json may reside locally or on a shared team location.


Installation
Local setup for analysis and visualization.

Requirements:

  • Node.js (>= 18 recommended)
  • npm

Install dependencies once:

npm install

Start the server locally:

node app/server.js

Open in browser:

http://localhost:3003

About

Interactive static analysis on dependency graphs of JS/Typescript applications. (Code to analyze code).

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors