xyflow-tree

🌳 XYFlow Tree

Beautiful tree layouts for XYFlow, made simple.

Transform your hierarchical data into stunning, interactive trees with automatic positioning and intelligent layout algorithms. Perfect for family trees, organizational charts, decision trees, and any hierarchical visualization.

✨ Features

• 🎯 Automatic Layout - No manual positioning needed, just provide your data
• 🔄 Multi-Directional - Support for ancestors, descendants, and side relationships
• 🎨 Highly Customizable - Configure spacing, dimensions, and layout behavior
• ⚡ TypeScript First - Full type safety with excellent IntelliSense
• 🪶 Lightweight - Minimal dependencies, maximum performance
• 🔗 XYFlow Native - Seamlessly integrates with @xyflow/react

🚀 Quick Start

import { treeLayout } from "xyflow-tree";

const nodes = [
  { id: "root", data: { name: "CEO" } },
  { id: "child1", data: { name: "CTO" } },
  { id: "child2", data: { name: "CFO" } },
];

const edges = [
  { id: "e1", source: "root", target: "child1", direction: "child" },
  { id: "e2", source: "root", target: "child2", direction: "child" },
];

// Generate positioned nodes and edges
const { nodes: layoutNodes, edges: layoutEdges } = treeLayout(nodes, edges);

🎨 Examples

👨‍👩‍👧‍👦 Family Tree Example

Create beautiful family trees with multi-generational support:

import { treeLayout } from "xyflow-tree";

// Define family members
const familyMembers = [
  {
    id: "john",
    data: {
      id: "john",
      name: "John Smith",
      birthYear: 1980,
      gender: "male",
      isRoot: true,
    },
  },
  {
    id: "mary",
    data: {
      id: "mary",
      name: "Mary Smith",
      birthYear: 1982,
      gender: "female",
    },
  },
  {
    id: "robert_sr",
    data: {
      id: "robert_sr",
      name: "Robert Smith Sr.",
      birthYear: 1950,
      gender: "male",
    },
  },
  {
    id: "susan",
    data: {
      id: "susan",
      name: "Susan Smith",
      birthYear: 1952,
      gender: "female",
    },
  },
  {
    id: "alice",
    data: {
      id: "alice",
      name: "Alice Smith",
      birthYear: 2008,
      gender: "female",
    },
  },
];

// Define relationships
const relationships = [
  {
    id: "e1",
    source: "john",
    target: "robert_sr",
    data: { direction: "parent" },
  },
  { id: "e2", source: "john", target: "susan", data: { direction: "parent" } },
  {
    id: "e3",
    source: "john",
    target: "mary",
    data: { direction: "side_after" },
  },
  { id: "e4", source: "john", target: "alice", data: { direction: "child" } },
];

// Generate the family tree layout
const familyLayout = treeLayout(familyMembers, relationships, {
  nodeGenerationSeparation: 120,
  nodeSiblingsSeparation: 100,
  defaultNodeWidth: 180,
  defaultNodeHeight: 80,
});

🏢 Organizational Chart

const orgLayout = treeLayout(employees, reportingLines, {
  defaultNodeWidth: 200,
  defaultNodeHeight: 80,
  nodeGenerationSeparation: 100,
});

⚙️ Configuration

Customize your tree layout with these options:

interface TreeLayoutOptions {
  defaultNodeWidth?: number; // Default: 250
  defaultNodeHeight?: number; // Default: 100
  nodeSiblingsSeparation?: number; // Default: 80
  nodeSidesSeparation?: number; // Default: 60
  nodeGenerationSeparation?: number; // Default: 80
}

🌲 Relationship Types

XYFlow Tree supports four types of relationships:

• child - Parent → Child relationships (downward)
• parent - Child → Parent relationships (upward)
• side_before - Sibling relationships (left side)
• side_after - Sibling relationships (right side)

🛠️ Utility Functions

import {
  getChildTreeId,
  getParentTreeId,
  getSideAfterTreeId,
  getSideBeforeTreeId,
  getNodeCenterX,
  getNodeCenterY,
} from "xyflow-tree";

📖 Full Documentation

For complete examples, advanced usage, and API reference, visit our documentation.

📄 License

MIT © CodeLedge

Built with ❤️