graph-viewer

Name: graph-viewer
Availability: InStock
Author: Cognite

Embed interactive CDF data model graphs in React-based apps.

5|1|Updated Mar 4, 2026

Search Tags:#react #interactive #visualization #graph #data-model #relationship #cdf

Ready to run

npx skills add https://github.com/cognitedata/builder-skills --skill graph-viewer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: graph-viewer
Source: https://github.com/cognitedata/builder-skills/tree/main/skills/graph-viewer
Command: npx skills add https://github.com/cognitedata/builder-skills --skill graph-viewer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires reagraph, @cognite/sdk, @cognite/dune, lucide-react, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enables embedding an interactive, richly visual graph of data model instances and their relationships into a Flows app, simplifying complex data understanding.

Core Features & Use Cases

Graph Embedding: Allows users to embed graph visualizations of CDF models within their applications.
Data Relationship Exploration: Users can explore nodes, relations, and reverse links to understand data structure.
Use Case: Data engineers can visualize equipment and asset relationships directly in dashboards to troubleshoot or plan maintenance workflows.

Quick Start

Use the graph viewer skill to embed an interactive data relationship graph showing process assets.

Frequently Asked Questions about graph-viewer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I visualize CDF data models as interactive graphs in a React app?▼

You can visualize CDF data models as interactive graphs in a React app by embedding a graph viewer component that renders nodes and their connections dynamically. This simplifies complex data relationship understanding for analysis.

Does the interactive graph viewer support exploring reverse links and data relationships?▼

Yes, the interactive graph viewer supports exploring data relationships, allowing users to navigate nodes, relations, and reverse links to understand the underlying data structure of CDF models.

What dependencies do I need to render and interact with CDF data model graphs?▼

To render and interact with CDF data model graphs, you need dependencies including reagraph for rendering, @cognite/sdk for API access, @cognite/dune for authentication, and lucide-react for UI elements.

Can I embed interactive CDF data model visualizations directly into dashboards?▼

Yes, you can embed interactive CDF data model visualizations directly into dashboards. Data engineers can visualize equipment and asset relationships for troubleshooting or planning maintenance workflows.

What is the best way to analyze complex CDF data relationships visually?▼

The best way to analyze complex CDF data relationships visually is by embedding an interactive graph visualization into your Flows app, which simplifies comprehending data model instances and their connections.

Why does the graph viewer require @cognite/dune and @cognite/sdk?▼

The graph viewer requires @cognite/sdk for CDF API access to fetch data model instances and @cognite/dune to handle user authentication, ensuring secure and authorized data retrieval for graph rendering.