@polygonschmied/stellar-graphs

Relationship graphs for Stellar DS — D3-powered layouts rendered through the shared @polygonschmied/stellar-viz-core look and feel, so they match the charts and diagrams and follow the active theme (light / dark / high-contrast) and palette automatically.

• DependencyGraph — force-directed node-link graph (d3-force). Takes the generic VizGraph (nodes + edges); node.group maps onto the shared categorical palette. The simulation is pre-run a fixed number of ticks, so layouts are deterministic and visual snapshots stay stable.
• StructureTree — tidy hierarchy layout (d3-hierarchy tree). Takes a VizTreeNode (nested children); ideal for module/ownership structures.
• Treemap — space-filling rectangles sized by value (d3-hierarchy treemap). Takes a VizTreeNode; group colours cells categorically.
• CirclePack — nested circles sized by value (d3-hierarchy pack), with optional overlay links between leaves.

Interaction: pan/zoom everywhere, node dragging on the force graph. All colours resolve from the Stellar viz tokens via useVizTheme — no hardcoded values.

import { DependencyGraph } from "@polygonschmied/stellar-graphs";

<DependencyGraph
  data={{
    nodes: [
      { id: "app", label: "app", group: "app" },
      { id: "core", label: "core", group: "lib" },
      { id: "tokens", label: "tokens", group: "lib" },
    ],
    edges: [
      { source: "app", target: "core" },
      { source: "core", target: "tokens" },
    ],
  }}
/>;

Peer requirements: React 18+, @polygonschmied/stellar-tokens styles loaded once in the app (import "@polygonschmied/stellar-tokens/styles.css").