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

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—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, 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. 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 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 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.

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 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 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 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. 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.

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, which maps each of the 26 canonical types into five visual categories: Structural, Reference/Dependency, Inheritance/Extension, Domain-specific, and Knowledge-specific. 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}