mermaid-js/mermaid · error · Error

No such shape: ${node.shape}. Please check your syntax.

Error message

No such shape: ${node.shape}. Please check your syntax.

What it means

Thrown by insertNode when node.shape is falsy or has no matching entry in the `shapes` map (built in shapes.ts from shortNames/aliases/internalAliases plus undocumented shapes). The rect branch above normalizes 'rect' to 'roundedRect'/'squareRect', so anything else that isn't a registered shape id falls through to this throw.

Source

Thrown at packages/mermaid/src/rendering-util/rendering-elements/nodes.ts:34

  node: NonClusterNode,
  renderOptions: ShapeRenderOptions
) {
  let newEl: NodeElement | undefined;
  let el;

  //special check for rect shape (with or without rounded corners)
  if (node.shape === 'rect') {
    if (node.rx && node.ry) {
      node.shape = 'roundedRect';
    } else {
      node.shape = 'squareRect';
    }
  }

  const shapeHandler = node.shape ? shapes[node.shape] : undefined;

  if (!shapeHandler) {
    throw new Error(`No such shape: ${node.shape}. Please check your syntax.`);
  }

  if (node.link) {
    // Add link when appropriate
    let target;
    if (renderOptions.config.securityLevel === 'sandbox') {
      target = '_top';
    } else if (node.linkTarget) {
      target = node.linkTarget || '_blank';
    }
    newEl = elem
      .insert<SVGAElement>('svg:a')
      .attr('xlink:href', node.link)
      .attr('target', target ?? null);
    el = await shapeHandler(newEl, node, renderOptions);
  } else {
    el = await shapeHandler(elem, node, renderOptions);
    newEl = el;

View on GitHub (pinned to d93e9c88c0)

Solutions

1. Use a supported shape id (see shapes.ts): e.g. 'roundedRect', 'squareRect', 'circle', 'stadium', 'cylinder', 'hexagon', 'bow-rect', 'note', 'question', etc.
2. Ensure the diagram-db layer always assigns a known shape (default to a rectangle variant if unspecified).
3. For custom shapes, register them in the shapes map before rendering.
4. Validate with isValidShape(node.shape) (exported from shapes.ts) before insertNode.

Example fix

// before
node.shape = 'box'; // not a registered shape id
// after
node.shape = 'squareRect'; // or 'roundedRect'

import { isValidShape } from './shapes.js';
if (!isValidShape(node.shape)) throw new Error(`unsupported node shape: ${node.shape}`);

function isValidNodeShape(s: unknown, shapes: Record<string, unknown>): boolean { return typeof s === 'string' && s in shapes; }

try { await insertNode(elem, node, opts); } catch (e) { if (/No such shape/.test(String(e))) { node.shape = 'squareRect'; insertNode(elem, node, opts); } else throw e; }

When it happens

Trigger: A node whose shape is undefined/null (e.g. a diagram-db bug that didn't assign a shape), or a typoed/unsupported shape string like 'Rect' (case), 'box', 'roundrect', or a shape removed in the current version. The lookup is `shapes[node.shape]`; if it returns undefined, this fires.

Common situations: Custom node construction that omits shape, a downgrade/upgrade where a shape alias was renamed or removed (the shapes.ts alias lists evolve), or user-facing syntax that maps to a shape id no longer present. Also from diagrams that set shape from config without validating against the supported set.

Related errors

• No nodes found in layout data
• Nodes array is required in layout data
• The given radii are too small to create an arc between the p
• No nodes available to create tree
• Layout data is required

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