mermaid-js/mermaid · error · Error

The given radii are too small to create an arc between the p

Error message

The given radii are too small to create an arc between the points.

What it means

Thrown by generateArcPoints in the bow-tie-rect shape when, after scaling the half-chord by the radii to the unit circle, the resulting distance exceeds 1. Geometrically this means the two endpoints are farther apart than the ellipse's radii can span, so no ellipse arc can connect them. It's a degenerate-geometry guard, not a user-syntax error.

Source

Thrown at packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts:38

  const midY = (y1 + y2) / 2;

  // Calculate the angle of the line connecting the points
  const angle = Math.atan2(y2 - y1, x2 - x1);

  // Calculate transformed coordinates for the ellipse
  const dx = (x2 - x1) / 2;
  const dy = (y2 - y1) / 2;

  // Scale to unit circle
  const transformedX = dx / rx;
  const transformedY = dy / ry;

  // Calculate the distance between points on the unit circle
  const distance = Math.sqrt(transformedX ** 2 + transformedY ** 2);

  // Check if the ellipse can be drawn with the given radii
  if (distance > 1) {
    throw new Error('The given radii are too small to create an arc between the points.');
  }

  // Calculate the distance from the midpoint to the center of the ellipse
  const scaledCenterDistance = Math.sqrt(1 - distance ** 2);

  // Calculate the center of the ellipse
  const centerX = midX + scaledCenterDistance * ry * Math.sin(angle) * (clockwise ? -1 : 1);
  const centerY = midY - scaledCenterDistance * rx * Math.cos(angle) * (clockwise ? -1 : 1);

  // Calculate the start and end angles on the ellipse
  const startAngle = Math.atan2((y1 - centerY) / ry, (x1 - centerX) / rx);
  const endAngle = Math.atan2((y2 - centerY) / ry, (x2 - centerX) / rx);

  // Adjust angles for clockwise/counterclockwise
  let angleRange = endAngle - startAngle;
  if (clockwise && angleRange < 0) {
    angleRange += 2 * Math.PI;
  }

View on GitHub (pinned to d93e9c88c0)

Solutions

Give the bow-tie node a non-empty label or an explicit height/width so totalHeight is large enough that the computed radii exceed the chord.
If overriding node dimensions, ensure height > 0 and width > 0 with reasonable padding.
Switch the node to a different shape (e.g. cylinder/stored-data alias) if minimal sizing is unavoidable.
Reproduce by logging rx, ry, and the chord to confirm which dimension collapsed.

Example fix

// before
A[""]:::bowTieRect // empty label → tiny bbox → degenerate radii
// after
A["Stored Data"]:::bowTieRect // label gives bbox height, radii scale up

Defensive patterns

Strategy: validation

Validate before calling

function canDrawArc(x1: number, y1: number, x2: number, y2: number, rx: number, ry: number): boolean {
  const dx = (x2 - x1) / 2, dy = (y2 - y1) / 2;
  return Math.sqrt((dx / rx) ** 2 + (dy / ry) ** 2) <= 1;
}
if (!canDrawArc(...points, rx, ry)) node.label = node.label || ' ';
// or pick a different shape

Type guard

function hasNonZeroSize(node: { width?: number; height?: number; label?: string }): boolean { return (node.width ?? 0) > 0 || (node.height ?? 0) > 0 || (node.label?.length ?? 0) > 0; }

Try / catch

try { await bowTieRect(parent, node); } catch (e) { if (/radii are too small/.test(String(e))) { node.shape = 'squareRect'; /* re-render */ } else throw e; }

Prevention

Give bow-tie/stored-data nodes a non-empty label or explicit dimensions.
Avoid zero-height/zero-width node overrides.
Validate computed rx/ry against the chord before drawing.

When it happens

Trigger: Computed bow-tie rect geometry where rx/ry (derived from totalHeight via calcEllipseRadius) are too small for the chord between the two arc endpoints. Because rx = ry/(2.5 + totalHeight/50) and ry = totalHeight/2, a very small or zero totalHeight (e.g. node.height=0 and an empty label bbox) makes the radii tiny relative to the half-height chord, pushing distance > 1.

Common situations: A bow-tie/stored-data node with an empty label and no explicit height/width (bbox collapses to ~0), an extremely small font, or a node whose dimensions were overridden to near-zero. Also a handDrawn vs neo look path with mismatched padding. This is internal geometry, so end-users usually trigger it via a minimal/empty bow-rect node.

Related errors

AI-assisted analysis of mermaid-js/mermaid@d93e9c88c0 (2026-08-12). Data as JSON: /api/errors/1adbba8af57b1fc7. Report an issue: GitHub.