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 of pixels (eg. 10px)

What it means

Thrown by parseStyles when a style line has key 'stroke-width' and its value fails validateSizeInPixels, which requires the exact pattern /^\d+px$/ — one or more digits followed immediately by 'px'. Values like '2', '2.5px', '2 px' (space), '2em', or '2PX' (case) are all rejected. The InvalidStyleError message explicitly requests a pixel value like '10px'.

Source

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

    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 {
      throw new Error(`style named ${key} is not supported.`);
    }
  }
  return stylesObject;
}

function addPoint(textObj: LexTextObj, className: string, x: number, y: number, styles: string[]) {
  const stylesObject = parseStyles(styles);
  quadrantBuilder.addPoints([
    {
      x,
      y,
      text: textSanitizer(textObj.text),
      className,
      ...stylesObject,

View on GitHub (pinned to d93e9c88c0)

Solutions

1. Write the value as digits immediately followed by 'px', lowercase, e.g. 'stroke-width: 2px'.
2. Use an integer pixel value — decimals are rejected.
3. Remove any space between the number and 'px'.
4. Ensure lowercase 'px'; 'PX' fails the regex.

Example fix

// before
quadrantChart
  point [0.5, 0.5]: "Label" : {stroke-width: 2}

// after
quadrantChart
  point [0.5, 0.5]: "Label" : {stroke-width: 2px}

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

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

try {
  await mermaid.render('g', diagramText);
} catch (e) {
  if (e instanceof Error && /value for stroke-width .* number of pixels/.test(e.message)) {
    showUserError('Quadrant stroke-width must be an integer followed by px, e.g. 2px.');
  } else throw e;
}

When it happens

Trigger: Writing 'stroke-width: 2' (missing px), 'stroke-width: 2.5px' (decimal), 'stroke-width: 2 px' (space), 'stroke-width: 2em' (wrong unit), or 'stroke-width: 2PX' (uppercase).

Common situations: Author omits the 'px' unit assuming a bare number works (common since CSS sometimes allows unitless); using decimals for sub-pixel widths; copy-pasting CSS with different units or casing.

Related errors

• value for ${style} ${value} is invalid, please use a valid n
• value for ${style} ${value} is invalid, please use a valid h
• 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/daea95f38bd05f19. Report an issue: GitHub.