Dagre Layout Integration

Functional Overview

This example demonstrates integration of Dagre (directed graph) layout algorithm with relation-graph. Dagre specializes in hierarchical layouts for directed acyclic graphs (DAGs), making it ideal for flowcharts, state machines, and dependency graphs.

Implementation of Key Features

Dagre Integration

import dagre from 'dagre';

const applyDagreLayout = () => {
    const g = new dagre.graphlib.Graph();
    g.setGraph({ rankdir: 'TB', nodesep: 50, edgesep: 10, ranksep: 50 });

    // Add nodes to dagre graph
    graphInstance.getNodes().forEach(node => {
        g.setNode(node.id, { width: node.width, height: node.height });
    });

    // Add edges to dagre graph
    graphInstance.getLines().forEach(line => {
        g.setEdge(line.from, line.to);
    });

    // Calculate layout
    dagre.layout(g);

    // Apply calculated positions
    g.nodes().forEach(nodeId => {
        const node = g.node(nodeId);
        graphInstance.updateNode(nodeId, {
            x: node.x,
            y: node.y
        });
    });
};

Hierarchical Organization

const layoutOptions = {
    rankdir: 'TB',  // Top-to-Bottom
    nodesep: 70,    // Space between nodes at same rank
    ranksep: 100,   // Space between ranks
    edgesep: 10     // Space between parallel edges
};

Creative Use Cases

Flowcharts: Professional diagram layouts.

State Machines: Clear state transition visualization.

Build Systems: Dependency graph visualization.

Pipelining: Data flow and processing stages.

Organization Charts: Clean hierarchical structures.