ERD diagrams with many tables (e.g., MySQL's performance_schema with 80+ tables) rendered as tightly packed circles at all zoom levels, making them difficult to read and arrange.

Root Cause

The initial circular layout radius calculation in GraphLayout.createCircle() was undersized:

// Old: insufficient spacing
const radius = (nodeCount * nodeRadius) / (2 * Math.PI) + nodeRadius;

This formula used maximum node radius without accounting for actual node dimensions or adequate spacing between nodes.

Changes

• Calculate radius based on total perimeter needed for all nodes
• Use average node diameter instead of maximum radius
• Apply adaptive multiplier: 1.5× for >20 nodes, 1.2× otherwise
• Increase margin allocation from implicit 2× to 4× NODE_MARGIN

// New: proper spacing calculation
const avgNodeDiameter = _.mean(circleSortedNodes.map(x => x.radius * 2)) || 0;
const totalPerimeter = nodeCount * (avgNodeDiameter + NODE_MARGIN * 4);
const radiusMultiplier = nodeCount > 20 ? 1.5 : 1.2;
const radius = Math.max(
  (totalPerimeter / (2 * Math.PI)) * radiusMultiplier,
  nodeRadius * 3
);

The larger initial radius gives the springy force-directed algorithm sufficient space to distribute nodes into more readable layouts.

• Fixes BUG: ERD diagram always auto arrange as a circle #884

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.