mermaid-js/mermaid · error

style named ${key} 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.

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)

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