mermaid-js/mermaid · error

style named is not supported.

Error message

style named ${key} is not supported.

What it means

Thrown by parseStyles when a style line's key is not one of the four supported properties (radius, color, stroke-color, stroke-width). Any unrecognized key aborts style parsing. The error message echoes the offending key name so the author can spot the typo or unsupported property.

Solutions

1. Use only the supported keys: radius, color, stroke-color, stroke-width.
2. Check for typos (e.g. 'colour' vs 'color').
3. Remove unsupported properties — quadrant points don't support arbitrary CSS.
4. Consult the quadrant-chart style docs for the current property list.

Example fix

// before
quadrantChart
  point [0.5, 0.5]: "Label" : {colour: #FFF}

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

const SUPPORTED_QUADRANT_STYLES = new Set(['radius', 'color', 'stroke-color', 'stroke-width']);

function validateStyleKeys(styles: string[]): string[] {
  return styles
    .map(s => s.trim().split(/\s*:\\s*/)[0])
    .filter(key => !SUPPORTED_QUADRANT_STYLES.has(key));
}

function isSupportedStyleKey(key: string): boolean {
  return new Set(['radius', 'color', 'stroke-color', 'stroke-width']).has(key);
}

try {
  await mermaid.render('g', diagramText);
} catch (e) {
  if (e instanceof Error && /style named .* is not supported/.test(e.message)) {
    showUserError('Only radius, color, stroke-color, and stroke-width are supported quadrant point styles.');
  } else throw e;
}

When it happens

Trigger: Writing a style with an unsupported property like 'fill: #FFF', 'opacity: 0.5', 'width: 10', or a typo like 'colour: #FFF'; any key outside the fixed allow-list.

Common situations: Author assumes general CSS properties work; typo in a supported key; copy-pasting styles from other diagram types that accept different properties.

Related errors

• value for is invalid, please use a valid number
• value for is invalid, please use a valid hex code
• value for is invalid, please use a valid number of pixels…
• " " has invalid value: . Negative values are not allowed in…
• No such shape: . Shape names should be lowercase.

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

Appendix: source

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

      }
      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)