@dagrejs/dagre Documentation

repository·master·Indexed 26 days ago

https://github.com/dagrejs/dagre

A 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.

Tokens
1.2K
Snippets
1
Records
14
Agent score
89%

What's inside @dagrejs/dagre

  1. Overview of Dagre graph layout

    master
    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.
  2. Install @dagrejs/dagre via npm

    master
    To use the actively maintained version of Dagre, install the package from the @dagrejs organization. Note that while other versions may exist on NPM, only @dagrejs/dagre is receiving updates.
  3. Import the dagre library

    master
    You can import the entire dagre object as a default export, or import specific modules like graphlib, layout, and version individually. The library provides a central dagre object containing the core layout engine, graph manipulation utilities, and debugging tools.
  4. Configure layout execution with LayoutConfig

    master

    The LayoutConfig interface allows for advanced customization of the layout engine execution.

    Key properties:

    • customOrder: A function to provide a custom ordering of nodes. It receives the graph and an order function.
    • disableOptimalOrderHeuristic: Boolean to disable the optimal ordering heuristic.
    • constraints: An array of OrderConstraint objects (e.g., { left: 'nodeA', right: 'nodeB' }) to enforce specific node ordering.
  5. Configure graph layout with GraphLabel

    master

    The GraphLabel interface 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.
  6. Compute graph layout with layout()

    master

    The layout function is the primary entry point for computing node and edge positions in a graph. It takes a Graph object and an optional LayoutOptions object. 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 like rank, order, and points for 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.
  7. Use LayoutOptions for combined configuration

    master
    The LayoutOptions type is a combined interface that merges GraphLabel, NodeConfig, EdgeConfig, and LayoutConfig. This is the primary object used to pass all configuration settings to the layout engine.
  8. Define EdgeLabel properties for layout

    master

    The EdgeLabel interface contains properties used to describe and position edge labels and geometry.

    Key properties include:

    • points: An array of Point objects 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.
  9. Define NodeLabel properties for layout

    master

    The NodeLabel interface 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.
  10. Reference dagre core types

    master

    The 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';