mermaid-js/mermaid · error · Error

Groups within groups are not allowed in Kanban diagrams

Error message

Groups within groups are not allowed in Kanban diagrams

What it means

Thrown by the kanban renderer while laying out items inside a section: an item whose parentId matches the section has isGroup === true. The code comment explicitly says 'this should never happen' — kanban sections are the only grouping level allowed, and nested groups (a group inside a section item) are structurally unsupported. Reaching this throw means the db produced a node tree the renderer cannot lay out.

Source

Thrown at packages/mermaid/src/diagrams/kanban/kanbanRenderer.ts:76

    // Todo, use theme variable THEME_COLOR_LIMIT instead of 10
    section.cssClasses = section.cssClasses + ' section-' + cnt;
    const sectionObj = await insertCluster(sectionsElem, section);
    maxLabelHeight = Math.max(maxLabelHeight, sectionObj?.labelBBox?.height);
    sectionObjects.push(sectionObj);
  }
  let i = 0;
  for (const section of sections) {
    const sectionObj = sectionObjects[i];
    i = i + 1;
    const WIDTH = conf?.kanban?.sectionWidth || 200;
    const top = (-WIDTH * 3) / 2 + maxLabelHeight;
    let y = top;
    const sectionItems = data4Layout.nodes.filter((node) => node.parentId === section.id);
    for (const item of sectionItems) {
      if (item.isGroup) {
        // Kanban diagrams should not have groups within groups
        // this should never happen
        throw new Error('Groups within groups are not allowed in Kanban diagrams');
      }
      item.x = section.x;
      item.width = WIDTH - 1.5 * padding;
      const nodeEl = await insertNode(nodesElem, item, { config: conf });
      const bbox = nodeEl.node()!.getBBox();
      item.y = y + bbox.height / 2;
      await positionNode(item);
      y = item.y + bbox.height / 2 + padding / 2;
    }
    const rect = sectionObj.cluster.select('rect');
    const height = Math.max(y - top + 3 * padding, 50) + (maxLabelHeight - 25);
    rect.attr('height', height);
  }

  // Setup the view box and size of the svg element
  setupGraphViewbox(
    undefined,
    svg,

View on GitHub (pinned to d93e9c88c0)

Solutions

  1. If you construct kanban nodes programmatically, ensure no child of a section has isGroup set to true — only sections are groups.
  2. If this occurs with plain text input, report it upstream as a parser bug with the reproducing diagram.
  3. Upgrade mermaid to the latest version.
  4. Inspect the parsed node tree (log data4Layout.nodes) to find which item wrongly has isGroup === true and fix its source.
Defensive patterns

Strategy: try-catch

Type guard

function noNestedGroups(nodes: {id:string;parentId?:string;isGroup:boolean}[], sections: {id:string}[]): boolean {
  const sectionIds = new Set(sections.map(s => s.id));
  return nodes.every(n => !n.isGroup || sectionIds.has(n.parentId ?? ''));
}

Try / catch

try {
  await mermaid.render('g', diagramText);
} catch (e) {
  if (e instanceof Error && /Groups within groups are not allowed/.test(e.message)) {
    showUserError('Internal kanban structure error: a section item is marked as a group. Report this if using standard syntax.');
  } else {
    throw e;
  }
}

Prevention

When it happens

Trigger: Programmatically constructing a kanban db where a section's child is marked isGroup; a parser bug that sets isGroup on a leaf item; tampering with the parsed node objects between parse and render.

Common situations: Not reachable through normal kanban text syntax — the grammar does not let users declare nested groups; appears only with custom/programmatic diagram construction, internal bugs, or forked parser changes.

Related errors


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