mermaid-js/mermaid · error · InvalidStyleError

value for ${style} ${value} is invalid, please use a valid n

Error message

value for ${style} ${value} is invalid, please use a valid number

What it means

Thrown by parseStyles in the quadrant-chart db when a style line has key 'radius' but its value fails validateNumber (the regex /^\d+$/). The InvalidStyleError carries the offending value and tells the caller a valid number is expected. Radius must be a plain non-negative integer string like '5' — decimals, units, hex, or empty strings are rejected.

Source

Thrown at packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts:70

function setXAxisRightText(textObj: LexTextObj) {
  quadrantBuilder.setData({ xAxisRightText: textSanitizer(textObj.text) });
}

function setYAxisTopText(textObj: LexTextObj) {
  quadrantBuilder.setData({ yAxisTopText: textSanitizer(textObj.text) });
}

function setYAxisBottomText(textObj: LexTextObj) {
  quadrantBuilder.setData({ yAxisBottomText: textSanitizer(textObj.text) });
}

function parseStyles(styles: string[]): StylesObject {
  const stylesObject: StylesObject = {};
  for (const style of styles) {
    const [key, value] = style.trim().split(/\s*:\s*/);
    if (key === 'radius') {
      if (validateNumber(value)) {
        throw new InvalidStyleError(key, value, 'number');
      }
      stylesObject.radius = parseInt(value);
    } else if (key === 'color') {
      if (validateHexCode(value)) {
        throw new InvalidStyleError(key, value, 'hex code');
      }
      stylesObject.color = value;
    } else if (key === 'stroke-color') {
      if (validateHexCode(value)) {
        throw new InvalidStyleError(key, value, 'hex code');
      }
      stylesObject.strokeColor = value;
    } else if (key === 'stroke-width') {
      if (validateSizeInPixels(value)) {
        throw new InvalidStyleError(key, value, 'number of pixels (eg. 10px)');
      }
      stylesObject.strokeWidth = value;
    } else {

View on GitHub (pinned to d93e9c88c0)

Solutions

1. Use a plain integer for radius, e.g. 'radius: 5'.
2. Remove any unit suffix (px) or decimal point.
3. Check the style string for stray characters and trim whitespace.
4. Validate style values against /^\d+$/ before passing them to mermaid.

Example fix

// before
quadrantChart
  point [0.5, 0.5]: "Label" : {radius: 5.5px}

// after
quadrantChart
  point [0.5, 0.5]: "Label" : {radius: 5}

function validateRadius(value: string): boolean {
  return /^\d+$/.test(value.trim());
}

function isValidRadiusString(value: string): boolean {
  return /^\d+$/.test(value.trim());
}

try {
  await mermaid.render('g', diagramText);
} catch (e) {
  if (e instanceof Error && /value for radius .* please use a valid number/.test(e.message)) {
    showUserError('Quadrant point radius must be a plain integer (e.g. 5), no units or decimals.');
  } else throw e;
}

When it happens

Trigger: Writing quadrant point styles like 'radius: 5.5' (decimal), 'radius: 5px' (unit), 'radius: five' (word), or 'radius:' (empty); any value not matching a pure digit string.

Common situations: Author assumes pixels/decimals are allowed because other style keys accept units; copy-pasting CSS-like values; trailing whitespace or units slipping in from a template.

Related errors

• value for ${style} ${value} is invalid, please use a valid h
• value for ${style} ${value} is invalid, please use a valid n
• style named ${key} is not supported.
• No such shape: ${doc.shape}. Shape names should be lowercase
• Packet block ${start} - ${end} is invalid. End must be great

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