skills.rest
cognitedata
cognitedataOFFICIAL
Explore all skills by this author โ†’
WebsiteGitHub

graph-viewer

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
One-click install
npx skills add https://github.com/cognitedata/builder-skills --skill graph-viewer
Or copy as Structured Prompt for Agentโ–ผ
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.

Related Skills

Explore More Software Engineering Skillsโ†’
cognitedatacognitedata
5

setup-flows-auth

Automate Cognite Flows authentication setup in React apps with Vite configuration.

Official
Intermediate
Nero-kkNero-kk

wiki-export

Export Obsidian wiki knowledge graphs to graph.json, graph.graphml, cypher.txt, and graph.html.

Community
Advanced
iredrion-imgiredrion-img

wms-component-generator

Create and modify React UI components with Tailwind CSS and Recharts.

Community
Intermediate
cognitedatacognitedata
5

integrate-file-viewer

Automate CogniteFileViewer setup for PDF, image, and text previews in Flows applications.

Official
Intermediate