Dependency Tree
Untangle complex dependency chains in your software projects. This showcase visualizes npm package dependencies as an interactive tree, revealing circular references, version conflicts, and the critical paths that determine your bundle size.
Features Used
About This Showcase
Modern software projects often depend on hundreds or even thousands of packages, forming complex dependency trees that are difficult to reason about. Understanding these dependency relationships is critical for security auditing, bundle optimization, and resolving version conflicts. This showcase demonstrates how TopoKit's tree layout can make dependency graphs immediately comprehensible.
The visualization parses a real package-lock.json file and renders the dependency tree using a left-to-right Reingold-Tilford layout. Each node represents a package, colored by its depth level in the tree. Production dependencies use solid edges while dev dependencies use dashed lines, making it easy to distinguish between the two. Packages with known vulnerabilities are highlighted with red badges showing the severity level.
Circular dependencies -- the bane of many projects -- are automatically detected and highlighted with red dashed edges and a warning indicator. Critical paths that contribute the most to total bundle size are highlighted in amber, helping developers identify which dependency chains to optimize. Clicking any node expands or collapses its subtree, allowing focused exploration of specific branches without losing the overall context.
Technical Details
Configuration Example
This example shows the tree layout configuration with circular dependency detection and critical path highlighting.
import {'{'} create {'}'} from '@topokit/renderer-canvas';
const graph = create(document.getElementById('container'), {'{'}
nodes: depData.packages,
edges: depData.dependencies,
// Tree layout, left-to-right
layout: {'{'}
type: 'tree',
direction: 'LR',
levelSeparation: 180,
nodeSeparation: 30,
{'}'},
// Style by dependency type
edgeStyle: (edge) => ({'{'}
stroke: edge.data.circular ? '#EF4444' :
edge.data.critical ? '#F59E0B' : '#475569',
dashArray: edge.data.dev ? [4, 3] : null,
width: edge.data.critical ? 2.5 : 1,
{'}'}),
// Vulnerability badges
nodeStyle: (node) => ({'{'}
label: `${'$'}{node.data.name}@${'{'}node.data.version${'}'}`,
badge: node.data.vulnerability ? {'{'}
color: '#EF4444',
text: node.data.vulnerability.severity,
{'}'} : null,
{'}'}),
search: {'{'} enabled: true, fields: ['name'] {'}'},
theme: 'dark',
{'}'});Building dev tooling or a build-system viewer?
Read the full dependency graph use case for cycle detection, critical paths, and prod/dev/peer filtering, or talk to sales.