Skip to main content
The overlay system allows you to layer additional data on top of the base code graph.

​
How Overlays Work

Overlays add attributes to existing nodes. The visualization then uses these attributes to modify the display.
1

Base Graph

Your code structure with nodes and edges
2

Apply Overlay

Plugin writes attributes to nodes
3

Visualize

Frontend maps attributes to colors/sizes/badges

​
Attribute Prefixes

Each overlay uses a unique prefix to avoid conflicts:
PrefixPluginExample Attributes
git:Git Activitygit:churn, git:authors
coverage:Test Coveragecoverage:percent, coverage:lines
complexity:Complexitycomplexity:cyclomatic
ownership:Code Ownershipownership:team
layout:Layout (built-in)layout:x, layout:y, layout:z

​
Overlay Types

TypeEffectBest For
ColorNode fill colorContinuous metrics (coverage %)
SizeNode radiusMagnitude (lines of code)
BadgeIcon/labelCategories (team, status)
EdgeColorEdge colorCall frequency
EdgeWidthEdge thicknessRelationship strength

​
Overlay Definition

new OverlayDefinition
{
    Id = "line-coverage",
    Name = "Line Coverage",
    Type = OverlayType.Color,
    Attribute = "coverage:percent",
    Legend = new GradientLegend
    {
        Stops = new[]
        {
            new LegendStop(0, "#ef4444"),
            new LegendStop(100, "#22c55e")
        }
    }
}

​
API Flow

1

List Overlays

GET /api/overlays - Returns all plugins
2

Apply

POST /api/overlays/git-activity/apply - Writes attributes
3

Fetch Graph

GET /api/graph - Nodes include overlay attributes
4

Remove

DELETE /api/overlays/git-activity/apply - Removes attributes

​
Single Source of Truth

Overlay configuration lives in code, not in config files:

Do

  • Plugin defines overlays in C# code
  • API exposes overlay definitions
  • Frontend fetches dynamically

Don't

  • JSON config files
  • Render config in database
  • Hardcoded colors in frontend

​
Built-in Overlays

​
Git Activity

AttributeDescription
git:churnNumber of changes
git:authorsUnique contributors
git:lastModifiedLast change date

​
Test Coverage

AttributeDescription
coverage:percentLine coverage %
coverage:linesCovered lines
coverage:branchesBranch coverage %

​
Complexity

AttributeDescription
complexity:cyclomaticCyclomatic complexity
complexity:cognitiveCognitive complexity