Graph Viewer

Copies a React hook and WebGL graph renderer into your Flows app so you can visualize CDF data model instances with their relations. You call useGraphViewer with a space, model ID, and instance, then drop the GraphCanvas component into a sized container. It fetches direct relations and optionally reverse relations through the Cognite SDK, rendering nodes and edges with reagraph. The main gotcha is cost: each expansion can fire multiple CDF queries, so the docs push you to whitelist only the relation properties you need and cap the connection limit. Good for embedding knowledge graphs in Dune apps, not for generic diagrams or non-CDF data.

skills.sh installs: 1.9K
GitHub stars: 6
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add cognitedata/builder-skills --skill graph-viewer --agent claude-code

Installs into .claude/skills of the current project.

Files

Graph Viewer

Use This When

The user wants to embed an interactive graph of a CDF data model — nodes, direct relations, edges, and reverse relations — inside a Flows app.

Do not use this skill for static diagrams, pure dataflow visualizations, or non-CDF graphs.

Prerequisites

The app is wrapped in @cognite/dune's <DuneProvider> so useDune() returns an authenticated SDK.
The target data model exists in CDF and you know its space, externalId, and version.
The app uses React 18+ and TypeScript.