# How 26 Edge Types and Weight Conventions Influence Knowledge Graph Visualization in Understand Anything

> Discover how Understand Anything uses 26 edge types and weight conventions to shape knowledge graph visualizations. Learn how line thickness, opacity, and layout adapt to reveal graded hierarchies.

- Repository: [Yuxiang Lin/Understand-Anything](https://github.com/Lum1104/Understand-Anything)
- Tags: deep-dive
- Published: 2026-05-31

---

**The Understand Anything project encodes relationships between nodes using 26 canonical edge types organized into five visual categories, where each edge's floating-point weight between 0 and 1 directly controls line thickness, opacity, and layout physics to create a graded visual hierarchy.**

The Understand Anything repository implements a sophisticated knowledge graph engine that transforms raw code relationships into interactive visualizations. At the heart of this system are **26 distinct edge types**—declared in the `EdgeType` union within [`understand-anything-plugin/packages/core/src/types.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/core/src/types.ts)—that classify everything from function imports to domain-specific flows. Each relationship carries a numeric **weight** property that drives the rendering pipeline in [`KnowledgeGraphView.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/KnowledgeGraphView.tsx), determining how strongly connections appear in the UI.

## Semantic Categorization of the 26 Edge Types

Rather than rendering all edges identically, the dashboard maps each canonical type to a visual category via [`understand-anything-plugin/packages/dashboard/src/utils/filters.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/utils/filters.ts). This categorization determines stroke patterns, color palettes, and base opacity levels.

### Structural Relationships

Core code architecture edges—including `imports`, `calls`, `contains`, `exports`, and `tested_by`—are drawn with **solid lines**. The `weight` value directly modulates stroke thickness, making high-weight structural dependencies immediately prominent.

### Reference and Dependency Edges

Edges indicating weaker coupling, such as `depends_on`, `uses`, `reads_from`, and `writes_to`, render with lighter strokes and reduced opacity. While visually subtler, the `weight` still controls the intensity of the connection, ensuring weaker but important dependencies remain perceptible.

### Inheritance and Extension Hierarchies

Types like `inherits`, `implements`, and `extends` appear with **dashed strokes** to distinguish hierarchical relationships from direct structural ones. The dash length and intensity scale with the edge weight, creating visual rhythm that indicates confidence in the inheritance chain.

### Domain-Specific Connections

The business-domain extension adds types like `contains_flow`, `flow_step`, and `cross_domain`. These render in distinctive amber tones with curved path geometries, visually separating domain logic flows from raw code structure.

### Knowledge-Base Relationships

Knowledge extensions introduce `documents`, `describes`, and `relates_to` edges. These appear in softer colors with gentle curves, indicating non-code provenance and documentation links rather than executable relationships.

## Weight Conventions and Visual Encoding

Every edge object stores a `weight` property as a floating-point number between 0 and 1. The rendering engine in [`KnowledgeGraphView.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/KnowledgeGraphView.tsx) maps these values to specific visual parameters:

- **0.8 – 1.0**: Strong, direct relationships (e.g., a function calling another it directly imports) render with thick strokes (~3px) and full opacity (1.0).
- **0.5 – 0.79**: Moderate relevance (e.g., a file containing a rarely used class) displays with medium thickness (~2px) and ~0.7 opacity.
- **< 0.5**: Weak or inferred relationships (e.g., heuristic "may use" edges) appear as thin lines (~1px) with reduced opacity (~0.4).

### Edge Aggregation and Maximum Weight Dominance

When multiple parallel edges connect identical source and target nodes, [`understand-anything-plugin/packages/dashboard/src/utils/edgeAggregation.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/utils/edgeAggregation.ts) groups them into a single visual edge. The utility stores the `count` of distinct types and a `types` set, but computes the representative `weight` as the **maximum weight** among the grouped edges. This ensures the strongest relationship dominates the visual appearance, while tooltips preserve the full semantic context.

```typescript
import { aggregateContainerEdges } from "@understand-anything/dashboard/utils/edgeAggregation";

const rawEdges = [
  {
    source: "file:src/index.ts",
    target: "file:src/service.ts",
    type: "imports",
    direction: "forward",
    weight: 0.9,  // Strong relationship
  },
  {
    source: "file:src/util.ts",
    target: "file:src/db.ts",
    type: "depends_on",
    direction: "forward",
    weight: 0.3,  // Weak link
  }
];

const aggregated = aggregateContainerEdges(rawEdges);
// Visual weight takes the maximum: 0.9 for the first, 0.3 for the second

```

## Impact on Layout Algorithms and Interaction

The weight system influences graph behavior beyond static rendering.

### Force-Directed Layout Physics

The force-directed layout engine treats higher-weight edges as stronger springs, exerting greater pull between connected nodes. This physical simulation clusters heavily-weighted import chains and call graphs tightly together, naturally surfacing the main code flow while pushing weaker, peripheral connections toward the periphery.

### Interactive Filtering Interface

The sidebar filtering UI leverages the category mappings from [`filters.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/filters.ts) to enable rapid visual decluttering. Users can toggle entire relationship categories (e.g., hiding all `depends_on` edges) or apply weight thresholds, dynamically simplifying the graph without losing structural integrity.

### Information-Rich Edge Tooltips

Hover interactions reveal aggregated metadata including the parallel edge `count`, the complete set of `types` connecting the nodes, and individual weight values. This contextual data explains why specific connections appear thicker or more opaque, bridging the gap between visual encoding and underlying code semantics.

## Summary

- The **26 canonical edge types** defined in [`understand-anything-plugin/packages/core/src/types.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/core/src/types.ts) provide typed semantics for code relationships ranging from imports to domain flows.
- **Five visual categories** in [`understand-anything-plugin/packages/dashboard/src/utils/filters.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/utils/filters.ts) determine base rendering styles: solid lines for structure, dashes for inheritance, and distinct colors for domain-specific flows.
- **Weight values** between 0 and 1 control stroke thickness, opacity levels, and layout physics intensity, creating immediate visual hierarchies.
- **Edge aggregation** uses maximum weight selection to ensure dominant relationships control the visual representation of parallel connections.
- **Force-directed layouts** treat higher weights as stronger springs, automatically clustering semantically important code regions.

## Frequently Asked Questions

### What are the 26 edge types in Understand Anything?

The 26 edge types are canonical relationship identifiers defined in the `EdgeType` union within [`understand-anything-plugin/packages/core/src/types.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/core/src/types.ts). They include structural types like `imports`, `calls`, `contains`, and `inherits`, alongside domain-specific extensions such as `cross_domain` and knowledge-base types like `documents`. The complete enumeration is documented in [`understand-anything-plugin/agents/graph-reviewer.md`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/agents/graph-reviewer.md).

### How does edge weight affect knowledge graph visualization?

Edge weight—a floating-point value between 0 and 1—directly controls three visual properties: stroke thickness (higher weights produce thicker lines), opacity (stronger edges are more opaque), and layout physics (higher weights create stronger spring forces). Weights below 0.5 render as thin, faint lines, while weights above 0.8 appear as thick, fully opaque connections.

### Where does the system categorize edge types for visualization?

The categorization logic resides in [`understand-anything-plugin/packages/dashboard/src/utils/filters.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/utils/filters.ts), which maps each of the 26 canonical types into five visual categories: Structural, Reference/Dependency, Inheritance/Extension, Domain-specific, and Knowledge-specific. [`KnowledgeGraphView.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/KnowledgeGraphView.tsx) consumes this mapping to apply appropriate stroke patterns and colors.

### How does Understand Anything handle multiple edges between the same nodes?

The `aggregateContainerEdges` function in [`understand-anything-plugin/packages/dashboard/src/utils/edgeAggregation.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/utils/edgeAggregation.ts) groups parallel edges by source-target pairs. It preserves metadata including a `count` of distinct types and a `types` set, but calculates the visual weight as the maximum value among grouped edges. This ensures the strongest relationship dominates the rendered appearance while tooltips reveal the full underlying complexity.