Yfiles Graphbuilder
npx machina-cli add skill yWorks/yfiles-for-html-claude-plugin/yfiles-graphbuilder --openclawBuild Graphs from Data
Convert business data into graph visualizations using the GraphBuilder API.
Before Building
Always query the yFiles MCP for current API:
yfiles:yfiles_get_symbol_details(name="GraphBuilder")
yfiles:yfiles_search_documentation(query="GraphBuilder tutorial")
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()
Key Concepts
- Data stays in tags: Original data objects are stored in
element.tagafter build - ID mapping: Use field name strings or accessor functions for
id,sourceId,targetId - Build order: Groups → nodes → edges (groups must exist before their children)
- Provider functions: Compute styles, labels, and layouts from data at build time
- updateGraph(): Incrementally updates an existing graph instead of rebuilding from scratch
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
Apply a layout to position the nodes:
/yfiles-layout
Additional Resources
references/patterns.md— Node/edge creation, custom styles from data, labels, node positioning, updating graphsreferences/advanced.md— Group nodes, ports and bends,TreeBuilder,AdjacencyGraphBuilderreferences/examples.md— Complete working code examples
Source
git clone https://github.com/yWorks/yfiles-for-html-claude-plugin/blob/main/skills/yfiles-graphbuilder/SKILL.mdView on GitHub Overview
YFiles GraphBuilder converts business data into graph visualizations. It builds graphs from datasets by mapping data fields to node and edge IDs, supports grouping, and enables styling and layouts through provider functions. Data objects stay accessible via node/edge tags, and you can incrementally update graphs with updateGraph.
How This Skill Works
You first verify the current GraphBuilder API via MCP, then instantiate GraphBuilder with your graph. Use createNodesSource and createEdgesSource to bind data to node and edge IDs (with id, sourceId, targetId), and call buildGraph. After building, apply a layout and avoid mutating readonly properties directly; use graph methods instead. You can later update an existing graph with updateGraph instead of rebuilding from scratch.
When to Use It
- Build a graph from arrays of nodes and edges data (data-to-graph).
- Import JSON data into a yFiles graph for visualization.
- Create nodes from data and connect edges using id/sourceId/targetId mappings.
- Incrementally update an existing graph when the underlying data changes (updateGraph).
- Group nodes and apply layouts that respect hierarchical relationships (Groups → Nodes → Edges).
Quick Start
- Step 1: Import GraphBuilder from '@yfiles/yfiles' and create a GraphBuilder instance with your graph.
- Step 2: builder.createNodesSource({ data: nodesData, id: 'id' }); builder.createEdgesSource({ data: edgesData, id: 'id', sourceId: 'source', targetId: 'target' })
- Step 3: builder.buildGraph(); then apply a layout (e.g., via /yfiles-layout) to position nodes.
Best Practices
- Query yFiles MCP for the current API before building (GraphBuilder availability, methods, and constraints).
- Use string field names or accessor functions for id, sourceId, and targetId to map data cleanly.
- Keep the original data objects in node.tag/edge.tag to preserve data context.
- Follow the build order: Groups first, then Nodes, then Edges.
- Use provider functions to compute styles, labels, and layouts from data at build time and avoid direct assignment to readonly properties.
Example Use Cases
- Customer network: nodes represent customers, edges reflect purchases or relationships.
- Supply chain map: group departments or regions and connect suppliers to products.
- Organizational social graph: employees as nodes with edges for collaboration, grouped by department.
- IT infrastructure: servers/services as nodes with environment-based grouping (dev/stage/prod).
- Financial relationships: firms linked by ownership or transaction edges.
