Merge pull request #6717 from mermaid-js/6633-Stacking-blocks-renders-unexpected-space

6633: Log warning for blocks exceeding column width

.changeset/ninety-roses-turn.md

@@ -0,0 +1,7 @@
+---
+'mermaid': patch
+---
+
+fix: log warning for blocks exceeding column width
+
+This update adds a validation check that logs a warning message when a block's width exceeds the defined column layout.

packages/mermaid/src/diagrams/block/blockDB.ts

@@ -92,7 +92,20 @@ export const setCssClass = function (itemIds: string, cssClassName: string) {
 const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
   const blockList = _blockList.flat();
   const children = [];
+  const columnSettingBlock = blockList.find((b) => b?.type === 'column-setting');
+  const column = columnSettingBlock?.columns ?? -1;
   for (const block of blockList) {
+    if (
+      typeof column === 'number' &&
+      column > 0 &&
+      block.type !== 'column-setting' &&
+      typeof block.widthInColumns === 'number' &&
+      block.widthInColumns > column
+    ) {
+      log.warn(
+        `Block ${block.id} width ${block.widthInColumns} exceeds configured column width ${column}`
+      );
+    }
     if (block.label) {
       block.label = sanitizeText(block.label);
     }

packages/mermaid/src/diagrams/block/parser/block.spec.ts

@@ -1,6 +1,7 @@
 // @ts-ignore: jison doesn't export types
 import block from './block.jison';
 import db from '../blockDB.js';
+import { log } from '../../../logger.js';
 
 describe('Block diagram', function () {
   describe('when parsing a block diagram graph it should handle > ', function () {
@@ -402,6 +403,25 @@ columns 1
       const B = blocks[0];
       expect(B.styles).toContain('fill:#f9F');
     });
+    it('should log a warning when block width exceeds column width', () => {
+      const str = `block-beta
+  columns 1
+  A:1
+  B:2
+  C:3
+  D:4
+  E:3
+  F:2
+  G:1`;
+
+      const logWarnSpy = vi.spyOn(log, 'warn').mockImplementation(() => undefined);
+
+      block.parse(str);
+
+      expect(logWarnSpy).toHaveBeenCalledWith('Block B width 2 exceeds configured column width 1');
+
+      logWarnSpy.mockRestore();
+    });
   });
 
   describe('prototype properties', function () {