Build Graphs from Data

Converts business data into graph visualizations using GraphBuilder API.

Quick Start

import { GraphBuilder } from '@yfiles/yfiles'

const builder = new GraphBuilder(graph)
builder.createNodesSource({ data: nodesData, id: 'id' })
builder.createEdgesSource({
  data: edgesData,
  id: 'id',
  sourceId: 'source',
  targetId: 'target'
})
builder.buildGraph()

Before Building

Always query yFiles MCP for current API:

yfiles:yfiles_get_symbol_details(name="GraphBuilder")
yfiles:yfiles_search_documentation(query="GraphBuilder tutorial")

Common Patterns

See patterns.md for:

• •Basic node/edge creation
• •Custom styles from data
• •Labels from data
• •Node positioning
• •Updating existing graphs

Advanced Features

See advanced.md for:

• •Group nodes (hierarchical graphs)
• •Ports and bends
• •TreeBuilder (for tree data)
• •AdjacencyGraphBuilder (for adjacency lists)

Complete Examples

See examples.md for full working code.

Key Concepts

• •Data stays in tags: Original data stored in element .tag property
• •ID mapping: Use field names or functions for IDs
• •Build order: Groups before nodes, nodes before edges
• •Provider functions: For computed values (styles, labels, layouts)
• •updateGraph(): Updates existing graph instead of rebuilding

Important: Never directly assign to readonly properties like node.layout, edge.sourceNode, or edge.targetNode. Use IGraph methods instead (e.g., graph.setNodeLayout(), graph.setEdgePorts()). The @yfiles/eslint-plugin rule @yfiles/suggest-setter-methods warns about these mistakes.

After Building

Graph likely needs layout:

/yfiles-layout

MCP Tools

• •yfiles:yfiles_get_symbol_details(name="GraphBuilder") - Full API
• •yfiles:yfiles_search_documentation(query="GraphBuilder") - Tutorials
• •yfiles:yfiles_get_symbol_details(name="TreeBuilder") - For tree data
• •yfiles:yfiles_get_symbol_details(name="AdjacencyGraphBuilder") - For adjacency data