createGraph
Create a graph from a config. Resolves defaults for all fields.
export function createGraph<N = any, E = any, G = any>(
config?: GraphConfig<N, E, G>,
): Graph<N, E, G>
Configuration for the graph. If omitted, creates an empty directed graph.Show GraphConfig properties
Graph identifier. Defaults to empty string.
type
'directed' | 'undirected'
Graph type. Defaults to 'directed'.
ID of the initial node. Defaults to null.
Array of node configurations. Defaults to empty array.
Array of edge configurations. Defaults to empty array.
Custom data attached to the graph.
direction
'up' | 'down' | 'left' | 'right'
Layout direction for visual graphs.
style
Record<string, string | number>
Custom style properties.
A fully-resolved graph object with all defaults applied.
Graph identifier (empty string if not provided).
type
'directed' | 'undirected'
Graph type.
ID of the initial node, or null if not set.
Custom data attached to the graph.
direction
'up' | 'down' | 'left' | 'right'
Layout direction (if provided in config).
style
Record<string, string | number>
Custom style properties (if provided in config).
Examples
const graph = createGraph();
// graph.id === ''
// graph.type === 'directed'
// graph.nodes === []
// graph.edges === []
createVisualGraph
Create a visual graph with required position/size on all nodes and edges.
export function createVisualGraph<N = any, E = any, G = any>(
config?: VisualGraphConfig<N, E, G>,
): VisualGraph<N, E, G>
config
VisualGraphConfig<N, E, G>
Configuration for the visual graph. Extends GraphConfig with visual-specific properties.Show VisualGraphConfig properties
Inherits all GraphConfig properties, plus:direction
'up' | 'down' | 'left' | 'right'
Layout direction. Defaults to 'down'.
Nodes with position/size properties (x, y, width, height).
Edges with position/size properties (x, y, width, height).
A visual graph with guaranteed position/size properties on all entities.Show VisualGraph properties
Array of nodes with required x, y, width, height properties (defaults to 0).
Array of edges with required x, y, width, height properties (defaults to 0).
direction
'up' | 'down' | 'left' | 'right'
Layout direction (defaults to ‘down’).
Examples
const graph = createVisualGraph({
nodes: [{ id: 'a', x: 0, y: 0, width: 100, height: 50 }],
edges: [{ id: 'e1', sourceId: 'a', targetId: 'a', x: 0, y: 0, width: 0, height: 0 }],
});
// graph.nodes[0].x === 0
// graph.direction === 'down'
GraphConfig
Input configuration type for creating graphs. All fields are optional and have sensible defaults.
export interface GraphConfig<
TNodeData = any,
TEdgeData = any,
TGraphData = any,
> {
id?: string;
type?: 'directed' | 'undirected';
initialNodeId?: string;
nodes?: NodeConfig<TNodeData>[];
edges?: EdgeConfig<TEdgeData>[];
data?: TGraphData;
direction?: 'up' | 'down' | 'left' | 'right';
style?: Record<string, string | number>;
}
Type Parameters
Type of data attached to nodes. Defaults to any.
Type of data attached to edges. Defaults to any.
Type of data attached to the graph. Defaults to any.
NodeConfig
Configuration type for creating or adding nodes.
export interface NodeConfig<TNodeData = any> {
id: string;
parentId?: string | null;
initialNodeId?: string;
label?: string;
data?: TNodeData;
x?: number;
y?: number;
width?: number;
height?: number;
shape?: string;
color?: string;
style?: Record<string, string | number>;
}
Unique node identifier. Must be a non-empty string.
ID of the parent node for hierarchical graphs. Set to null for top-level nodes.
ID of the initial child node (for compound state nodes).
Display label for the node. Defaults to empty string.
Custom data attached to the node.
X coordinate for visual positioning.
Y coordinate for visual positioning.
Visual shape identifier (e.g., ‘circle’, ‘rectangle’).
style
Record<string, string | number>
Custom style properties.
EdgeConfig
Configuration type for creating or adding edges.
export interface EdgeConfig<TEdgeData = any> {
id: string;
sourceId: string;
targetId: string;
label?: string;
data?: TEdgeData;
x?: number;
y?: number;
width?: number;
height?: number;
color?: string;
style?: Record<string, string | number>;
}
Unique edge identifier. Must be a non-empty string.
ID of the source node. Must be a non-empty string and reference an existing node.
ID of the target node. Must be a non-empty string and reference an existing node.
Display label for the edge. Defaults to empty string.
Custom data attached to the edge.
X coordinate for visual positioning.
Y coordinate for visual positioning.
style
Record<string, string | number>
Custom style properties.