🌳 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

``ts
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

$3

Create beautiful family trees with multi-generational support:

!Family Tree Example

`ts
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,
});
`

$3

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

⚙️ Configuration

Customize your tree layout with these options:

`ts
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

`ts
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 ❤️