mermaid-js/mermaid · error · InvalidStyleError

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

Error message

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

What it means

Thrown by parseStyles when a style line has key 'color' but its value fails validateHexCode. The validator returns true (invalid) when the value does NOT match an optional '#' followed by exactly 3 or 6 hex digits. So values like 'red', '#12', '#GGGGGG', or 'fff ' (trailing space) all trip the guard. The InvalidStyleError message asks for a valid hex code.

Source

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

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

View on GitHub (pinned to d93e9c88c0)

Solutions

1. Use a 3- or 6-digit hex code with an optional leading '#', e.g. 'color: #FF0000' or 'color: F00'.
2. Convert named colors to hex before rendering.
3. Strip trailing/leading whitespace from the value.
4. Avoid 8-digit alpha hex; use 6-digit and set opacity another way if supported.

Example fix

// before
quadrantChart
  point [0.5, 0.5]: "Label" : {color: red}

// after
quadrantChart
  point [0.5, 0.5]: "Label" : {color: #FF0000}

function validateHex(value: string): boolean {
  return /^#?([\dA-Fa-f]{6}|[\dA-Fa-f]{3})$/.test(value.trim());
}

function isValidHexCode(value: string): boolean {
  return /^#?([\dA-Fa-f]{6}|[\dA-Fa-f]{3})$/.test(value.trim());
}

try {
  await mermaid.render('g', diagramText);
} catch (e) {
  if (e instanceof Error && /value for color .* please use a valid hex code/.test(e.message)) {
    showUserError('Quadrant point color must be a 3- or 6-digit hex code (e.g. #FF0000). Named colors are not accepted.');
  } else throw e;
}

When it happens

Trigger: Writing 'color: red' (named color), 'color: #1234' (4 digits), 'color: fff' with stray whitespace, or any non-hex color string.

Common situations: Author assumes CSS named colors (red, blue) are accepted; copy-pasting 8-digit RGBA hex (#RRGGBBAA) which the 3/6-digit regex rejects; trailing whitespace breaking the match.

Related errors

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