How the Domain View Works in Understand-Anything: A Technical Deep Dive

The Domain View provides a two-level interactive graph that lets users explore business-domain concepts through an overview of domain clusters and a detailed drill-down into flows and steps, powered by React-Flow and the ELK layout engine.

The Domain View is a specialized visualization component in the Understand-Anything dashboard that separates business-domain logic from structural codebase views. Located in understand-anything-plugin/packages/dashboard/src/components/DomainGraphView.tsx, this feature enables developers to navigate complex domain relationships through an interactive knowledge graph interface.

Data Source and Graph Structure

The Domain View consumes a KnowledgeGraph object containing nodes of type "domain", "flow", and "step", connected by edges of type "contains_flow", "flow_step", and "cross_domain". These type definitions reside in @understand-anything/core/types.

The graph data originates from either a persistent file at .understand-anything/domain-graph.json or is generated on-the-fly by the /understand-domain skill. This dual-source approach ensures the visualization can display both cached domain analyses and real-time generated insights.

Two-Level Navigation Architecture

The implementation supports a fluid navigation pattern between high-level domain mapping and granular process inspection.

Overview Mode: Domain Clusters

When no domain is selected, the DomainGraphViewInner component invokes buildDomainOverview to aggregate each business domain into a single cluster node. These clusters are rendered by the DomainClusterNode component found in understand-anything-plugin/packages/dashboard/src/components/DomainClusterNode.tsx.

Each cluster node displays the domain label, a summary description, associated entities, and a flow count. This aggregation provides immediate cross-domain insights without overwhelming the user with implementation details.

Detail Mode: Flows and Steps

Double-clicking a domain cluster triggers the store's navigateToDomain action, setting activeDomainId in the dashboard state. The component then switches to detail mode and calls buildDomainDetail, which expands the selected domain into its constituent flows and steps.

In this mode, the view renders individual FlowNode and StepNode components, drawing edges that represent step ordering (flow_step) and flow-to-step relationships. This drill-down allows detailed analysis of a single domain's business processes.

Layout and Rendering Pipeline

The raw node and edge data flows through an automated layout pipeline before rendering. The applyElkLayout function processes the graph using the ELK (Eclipse Layout Kernel) engine with a left-to-right direction configuration ("elk.direction": "RIGHT").

The layout calculation runs asynchronously within a useEffect hook. Once complete, mergeElkPositions integrates the calculated coordinates back into the React-Flow graph structure, ensuring aesthetically pleasing, hierarchical arrangements that minimize edge crossings.

Interaction Flow and State Management

All UI state for the Domain View lives in the Zustand-based dashboard store (useDashboardStore in understand-anything-plugin/packages/dashboard/src/store.ts).

The interaction model distinguishes between selection and expansion:

• Single click on a domain cluster calls selectNode(data.domainId), highlighting the node via the selectedNodeId state slice.
• Double click invokes navigateToDomain(data.domainId), transitioning the view from overview to detail mode by setting activeDomainId.

When viewing a specific domain, a "Back to domains" button appears. Clicking this button calls clearActiveDomain(), which resets activeDomainId to null and returns the visualization to the overview layout.

// Domain cluster node handling selection and navigation
function DomainClusterNode({ data }: NodeProps<DomainClusterFlowNode>) {
  const navigateToDomain = useDashboardStore(s => s.navigateToDomain);
  const selectNode = useDashboardStore(s => s.selectNode);
  const isSelected = useDashboardStore(s => s.selectedNodeId) === data.domainId;

  return (
    <div
      className={isSelected ? "border-accent bg-accent/10" : "border-accent/40"}
      onClick={() => selectNode(data.domainId)}
      onDoubleClick={() => navigateToDomain(data.domainId)}
    >
      {/* Domain label, summary, and flow count UI */}
    </div>
  );
}

// Back button implementation for returning to overview
{activeDomainId && (
  <button
    onClick={() => clearActiveDomain()}
    className="px-3 py-1.5 text-xs rounded-lg bg-elevated"
  >
    {t.domainView.backToDomains}
  </button>
)}

Summary

• The Domain View in DomainGraphView.tsx provides a dedicated business-domain visualization separate from structural code views.
• It operates in two modes: an overview showing domain clusters via buildDomainOverview, and a detail view exposing flows and steps via buildDomainDetail.
• Navigation relies on Zustand actions navigateToDomain and clearActiveDomain, with interactions handled in DomainClusterNode.tsx.
• The ELK layout engine (applyElkLayout) automatically positions nodes left-to-right, with positions merged via mergeElkPositions.
• Data sources include .understand-anything/domain-graph.json or real-time generation from the /understand-domain skill.

Frequently Asked Questions

What data format powers the Domain View?

The view consumes a KnowledgeGraph structure containing nodes typed as "domain", "flow", and "step", with edges defining "contains_flow", "flow_step", and "cross_domain" relationships. These types are defined in @understand-anything/core/types, and the data persists to .understand-anything/domain-graph.json or generates dynamically through the domain analyzer agent.

How does the layout engine position nodes in the Domain View?

The system uses the ELK (Eclipse Layout Kernel) engine via the applyElkLayout helper, configured with "elk.direction": "RIGHT" for left-to-right hierarchical arrangement. The layout runs asynchronously in a useEffect hook, and resulting coordinates merge back into the React-Flow graph through mergeElkPositions.

Can I navigate back to the overview after drilling into a specific domain?

Yes. When activeDomainId is set in the dashboard store, a "Back to domains" button appears in the UI. Clicking it invokes clearActiveDomain(), which resets the active domain state and triggers a return to the overview visualization built by buildDomainOverview.

Where is the domain graph data stored in the Understand-Anything project?

Persistent domain graphs reside in .understand-anything/domain-graph.json at the project root. The visualization logic lives in understand-anything-plugin/packages/dashboard/src/components/DomainGraphView.tsx, with state management handled in understand-anything-plugin/packages/dashboard/src/store.ts.

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