@dagrejs/dagre Documentation
repository·master·Indexed 26 days ago
https://github.com/dagrejs/dagreA JavaScript library for laying out directed graphs on the client-side. It automates the positioning of nodes and edges to create readable visualizations. The library includes a core layout engine, graph manipulation utilities via graphlib, and configurable options for rank direction, node/edge separation, and ranking algorithms.
What's inside @dagrejs/dagre
- Dagre is a JavaScript library designed to facilitate the layout of directed graphs on the client-side. It provides automated positioning for nodes and edges in a directed graph structure.
Install @dagrejs/dagre via npm
masterTo use the actively maintained version of Dagre, install the package from the@dagrejsorganization. Note that while other versions may exist on NPM, only@dagrejs/dagreis receiving updates.Import the dagre library
masterYou can import the entiredagreobject as a default export, or import specific modules likegraphlib,layout, andversionindividually. The library provides a centraldagreobject containing the core layout engine, graph manipulation utilities, and debugging tools.Configure layout execution with LayoutConfig
masterThe
LayoutConfiginterface allows for advanced customization of the layout engine execution.Key properties:
customOrder: A function to provide a custom ordering of nodes. It receives thegraphand anorderfunction.disableOptimalOrderHeuristic: Boolean to disable the optimal ordering heuristic.constraints: An array ofOrderConstraintobjects (e.g.,{ left: 'nodeA', right: 'nodeB' }) to enforce specific node ordering.
Configure edge properties with EdgeConfig
masterUseEdgeConfigto specify properties for edges, such as length, weight, and label positioning.Configure node dimensions with NodeConfig
masterUseNodeConfigto specify the dimensions of individual nodes during the layout process.Configure graph layout with GraphLabel
masterThe
GraphLabelinterface defines the layout configuration for the entire graph. Use these properties to control direction, spacing, and ranking algorithms.Key properties:
rankdir: Direction of the graph ('TB'(top-to-bottom),'BT'(bottom-to-top),'LR'(left-to-right), or'RL'(right-to-left)).nodesep: Separation between nodes.edgesep: Separation between edges.ranksep: Separation between ranks.compound: Boolean to enable/disable compound graph layout.ranker: The algorithm used to assign ranks ('network-simplex','tight-tree', or'longest-path').acyclicer: Set to'greedy'to enable the acyclic graph heuristic.
Compute graph layout with layout()
masterThe
layoutfunction is the primary entry point for computing node and edge positions in a graph. It takes aGraphobject and an optionalLayoutOptionsobject. The function performs the layout calculations and updates the input graph with the computed coordinates (x,y), dimensions (width,height), and other layout-related attributes likerank,order, andpointsfor edges.Attributes updated in the input graph:
- Nodes:
x,y,order,rank, and (if the node has children)width,height. - Edges:
points(array of coordinates), and (if the edge has an explicit position)x,y. - Graph:
width,height.
Layout Options:
debugTiming: A boolean that, when true, enables timing instrumentation for the layout process steps.
- Nodes:
Use LayoutOptions for combined configuration
masterTheLayoutOptionstype is a combined interface that mergesGraphLabel,NodeConfig,EdgeConfig, andLayoutConfig. This is the primary object used to pass all configuration settings to the layout engine.Define EdgeLabel properties for layout
masterThe
EdgeLabelinterface contains properties used to describe and position edge labels and geometry.Key properties include:
points: An array ofPointobjects defining the edge path.width,height: Dimensions of the edge label.labelpos: Position of the label ('l','c', or'r').reversed: Boolean indicating if the edge direction is reversed for labeling.
Define NodeLabel properties for layout
masterThe
NodeLabelinterface contains the geometric and metadata properties used by the layout engine for each node. While many properties are used internally or by the engine to store results, they are part of the node's label definition.Key properties include:
width,height: Dimensions of the node.x,y: Calculated coordinates.rank: The rank assigned to the node.shape: The visual shape of the node.label: The text label for the node.padding,paddingX,paddingY: Spacing around the label.
Reference dagre core types
masterThe library exports several types for defining graph structures, layout configurations, and constraints. Use these for type-safe implementations of custom weight functions or rankers.
export type { GraphLabel, NodeConfig, EdgeConfig, LayoutConfig, LayoutOptions, NodeLabel, EdgeLabel, Point, OrderConstraint, WeightFunction, RankerFunction, Edge } from './lib/types';