Automatically rearrange node positions

[gitHoussem]

Hello,

Is there a function or a way to automatically rearrange nodes so that they don't overlap with each other?
(Example of layout like hierarchical ordering (top-down) or star ordering or just random ordering that avoid overlaps of nodes and tries to overlap edges)

Thank you very much ! This project is honestly really awesome.

[bcakmakoglu]

No, there is no built-in layouting.
You can use any layouting algorithm you want yourself to get this functionality.
There's stuff like dagrejs, elkjs, d3-hierarchy.

The repo has an example for dagre right here.

[FelipeSD]

I've found dagree to fit best for the app here I'd like to share the solution

bun add dagre
bun add -D @types/dagre

import dagre from 'dagre'
import { Node, Edge } from '@vue-flow/core'

export interface DagreLayoutOptions {
  rankdir?: 'TB' | 'BT' | 'LR' | 'RL' // Direction: Top-Bottom, Bottom-Top, Left-Right, Right-Left
  nodesep?: number // Node spacing
  ranksep?: number // Layer spacing
  edgesep?: number // Edge spacing
}

export class DagreLayoutUtil {
  private graph: dagre.graphlib.Graph

  constructor(options: DagreLayoutOptions = {}) {
    this.graph = new dagre.graphlib.Graph()
    this.graph.setGraph({
      rankdir: options.rankdir || 'TB', // Default: Top-Bottom
      nodesep: options.nodesep || 50,
      ranksep: options.ranksep || 100,
      edgesep: options.edgesep || 10,
    })
    this.graph.setDefaultEdgeLabel(() => ({}))
  }

  applyLayout(nodes: Node[], edges: Edge[]): Node[] {
    nodes.forEach((node) => {
      const width = node.width || 150
      const height = node.height || 50
      this.graph.setNode(node.id, { width, height })
    })

    edges.forEach((edge) => {
      this.graph.setEdge(edge.source, edge.target)
    })

    dagre.layout(this.graph)

    return nodes.map((node) => {
      const dagreNode = this.graph.node(node.id)
      return {
        ...node,
        position: {
          x: dagreNode.x - (node.width || 150) / 2,
          y: dagreNode.y - (node.height || 50) / 2,
        },
      }
    })
  }
}

Example of usage:

import { ref } from 'vue'
import { DagreLayoutUtil } from './DagreLayoutUtil'
import { MarkerType, VueFlow, useVueFlow, type Edge, type Node } from '@vue-flow/core'

const nodes = ref<Node[]>([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 0 }, class: 'light' },
  { id: '2', type: 'output', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
  { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
  { id: '4', label: 'Node 4', position: { x: 150, y: 200 }, class: 'light' },
  { id: '5', type: 'output', label: 'Node 5', position: { x: 300, y: 300 }, class: 'light' }
])

const edges = ref<Edge[]>([
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e1-3', label: 'edge with arrowhead', source: '1', target: '3', markerEnd: MarkerType.ArrowClosed },
  { id: 'e4-5', type: 'step', label: 'step-edge', source: '4', target: '5', style: { stroke: 'orange' }, labelBgStyle: { fill: 'orange' } },
  { id: 'e3-4', type: 'smoothstep', label: 'smoothstep-edge', source: '3', target: '4' }
])

const layoutUtil = new DagreLayoutUtil({ rankdir: 'TB, nodesep: 60, ranksep: 120 })

function applyLayout() {
  nodes.value = layoutUtil.applyLayout(nodes.value, edges.value)
}

Result

Before	After calling applyLayout

[gitHoussem]

Hey @FelipeSD thank you very much for the detailed (and so well written answer).
I appreciate the effort as much as the solution to the problem

[janheussner]

Thank you for this great example. I was struggeling with the *sep. Would be very nice to add the sep definitions to the example in the docs :)