diff --git a/.changeset/wide-lines-trade.md b/.changeset/wide-lines-trade.md new file mode 100644 index 000000000..1df76a81f --- /dev/null +++ b/.changeset/wide-lines-trade.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: Mindmap rendering issue when the number of Level 2 nodes exceeds 11 diff --git a/cypress/integration/rendering/mindmap.spec.ts b/cypress/integration/rendering/mindmap.spec.ts index e0409ed46..98ca8a6c9 100644 --- a/cypress/integration/rendering/mindmap.spec.ts +++ b/cypress/integration/rendering/mindmap.spec.ts @@ -247,5 +247,31 @@ root ); }); }); + describe('Level 2 nodes exceeding 11', () => { + it('should render all Level 2 nodes correctly when there are more than 11', () => { + imgSnapshotTest( + `mindmap +root + Node1 + Node2 + Node3 + Node4 + Node5 + Node6 + Node7 + Node8 + Node9 + Node10 + Node11 + Node12 + Node13 + Node14 + Node15`, + {}, + undefined, + shouldHaveRoot + ); + }); + }); /* The end */ }); diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.getData.test.ts b/packages/mermaid/src/diagrams/mindmap/mindmapDb.getData.test.ts index 7c10c0104..a72122143 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.getData.test.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.getData.test.ts @@ -293,5 +293,37 @@ describe('MindmapDb getData function', () => { expect(edgeA1_aaa.section).toBe(1); expect(edgeA_a2.section).toBe(2); }); + + it('should wrap section numbers when there are more than 11 level 2 nodes', () => { + db.addNode(0, 'root', 'Example', 0); + + for (let i = 1; i <= 15; i++) { + db.addNode(1, `child${i}`, `${i}`, 0); + } + + const result = db.getData(); + + expect(result.nodes).toHaveLength(16); + + const child1 = result.nodes.find((n) => n.label === '1') as MindmapLayoutNode; + const child11 = result.nodes.find((n) => n.label === '11') as MindmapLayoutNode; + const child12 = result.nodes.find((n) => n.label === '12') as MindmapLayoutNode; + const child13 = result.nodes.find((n) => n.label === '13') as MindmapLayoutNode; + const child14 = result.nodes.find((n) => n.label === '14') as MindmapLayoutNode; + const child15 = result.nodes.find((n) => n.label === '15') as MindmapLayoutNode; + + expect(child1.section).toBe(0); + expect(child11.section).toBe(10); + + expect(child12.section).toBe(0); + expect(child13.section).toBe(1); + expect(child14.section).toBe(2); + expect(child15.section).toBe(3); + + expect(child12.cssClasses).toBe('mindmap-node section-0'); + expect(child13.cssClasses).toBe('mindmap-node section-1'); + expect(child14.cssClasses).toBe('mindmap-node section-2'); + expect(child15.cssClasses).toBe('mindmap-node section-3'); + }); }); }); diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts index a86c3fdc5..07f945d61 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts @@ -7,6 +7,7 @@ import type { MindmapNode } from './mindmapTypes.js'; import defaultConfig from '../../defaultConfig.js'; import type { LayoutData, Node, Edge } from '../../rendering-util/types.js'; import { getUserDefinedConfig } from '../../config.js'; +import { MAX_SECTIONS } from './svgDraw.js'; // Extend Node type for mindmap-specific properties export type MindmapLayoutNode = Node & { @@ -203,7 +204,7 @@ export class MindmapDB { // For other nodes, inherit parent's section number if (node.children) { for (const [index, child] of node.children.entries()) { - const childSectionNumber = node.level === 0 ? index : sectionNumber; + const childSectionNumber = node.level === 0 ? index % (MAX_SECTIONS - 1) : sectionNumber; this.assignSections(child, childSectionNumber); } } diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts index 8aee82e30..bf8ee81b3 100644 --- a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts +++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts @@ -5,7 +5,7 @@ import { parseFontSize } from '../../utils.js'; import type { MermaidConfig } from '../../config.type.js'; import type { MindmapDB } from './mindmapDb.js'; -const MAX_SECTIONS = 12; +export const MAX_SECTIONS = 12; type ShapeFunction = ( db: MindmapDB,