Radial Node Arranger: Building Circular Graph Layouts with ReactFlow

Arranging nodes in a readable, visually appealing way is one of the hardest challenges in graph visualization. Most flow tools default to left-to-right or top-down layouts — but for relationship maps, org charts, and dependency trees, a radial (circular) layout is far more natural and intuitive.

Radial Node Arranger is a premium ReactFlow example that solves this problem with a built-in circular layout engine, automatically distributing nodes from a central root outward in elegant radial patterns.

What Is a Radial Layout?

A radial layout places a root node at the center of the canvas and positions all connected nodes in concentric circles radiating outward. Each layer of connected nodes occupies a ring at a greater radius than the previous one.

This approach is ideal when you want to:

• Emphasise a central entity surrounded by related nodes
• Visualise hierarchical trees without the rigidity of top-down layouts
• Show relationship distance through circular proximity

Key Features

Automatic Node Positioning

The layout engine calculates optimal (x, y) positions for every node based on its depth from the root and its sibling count. No manual dragging required.

Hierarchical Tree Support

The engine supports multi-level hierarchies. Parent-child relationships are respected, with child nodes always appearing on a ring outside their parent's ring.

Zoom & Pan Controls

Standard ReactFlow viewport controls are included, allowing users to explore large graphs with dozens of nodes without losing context.

Custom Node Styles

Each node is styled to reflect its depth and role in the hierarchy, giving instant visual clarity to the graph's structure.

Export to JSON

The final graph state — including positions — can be serialised and exported to JSON for persistence or sharing.

Architecture Overview

import ReactFlow, { useNodesState, useEdgesState } from '@xyflow/react';
import { radialLayout } from './layout/radialLayout';

const initialNodes = buildGraphFromData(rawData);
const { nodes, edges } = radialLayout(initialNodes);

const RadialCanvas = () => {
  const [nodes, setNodes, onNodesChange] = useNodesState(nodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(edges);

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      fitView
    />
  );
};

The radialLayout function is the heart of this example. It performs a breadth-first traversal of the graph starting from the root node, assigning each node an angle and radius based on its position in the BFS queue.

The Layout Algorithm

export function radialLayout(nodes: Node[], edges: Edge[]) {
  const adjacency = buildAdjacencyList(edges);
  const levels: string[][] = getBFSLevels(nodes[0].id, adjacency);
  
  return levels.flatMap((level, depth) =>
    level.map((nodeId, index) => {
      const angle = (2 * Math.PI * index) / level.length;
      const radius = (depth + 1) * RING_SPACING;
      return {
        id: nodeId,
        position: {
          x: Math.cos(angle) * radius,
          y: Math.sin(angle) * radius,
        },
      };
    })
  );
}

Use Cases

Getting Started

The source code includes:

• radialLayout.ts — the core layout algorithm
• GraphCanvas.tsx — the main ReactFlow canvas component
• CustomNode.tsx — styled node component with depth-aware styling
• controls/ — toolbar with reset and fit-view controls

After purchase, you'll receive the full TypeScript source code with setup instructions. The project runs with npm install && npm run dev and requires no external graph libraries — only ReactFlow.

Why Buy vs Build?

Implementing a radial layout from scratch involves non-trivial graph traversal, angle calculation, collision avoidance, and React state management. This ready-to-use implementation saves you days of work and gives you a solid, production-tested foundation to customise for your specific use case.

Get instant access to the Radial Node Arranger source code and start building beautiful circular graphs today.