diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts index d6e35ed15..27702bb32 100644 --- a/packages/mermaid/src/diagrams/block/blockDB.ts +++ b/packages/mermaid/src/diagrams/block/blockDB.ts @@ -92,7 +92,18 @@ 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 + ) { + throw new Error(`width of block ${block.id} is greater than the column width`); + } if (block.label) { block.label = sanitizeText(block.label); } diff --git a/packages/mermaid/src/diagrams/block/parser/block.spec.ts b/packages/mermaid/src/diagrams/block/parser/block.spec.ts index 4bf3290d8..b41abde45 100644 --- a/packages/mermaid/src/diagrams/block/parser/block.spec.ts +++ b/packages/mermaid/src/diagrams/block/parser/block.spec.ts @@ -402,6 +402,21 @@ columns 1 const B = blocks[0]; expect(B.styles).toContain('fill:#f9F'); }); + it('should throw error 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`; + + expect(() => block.parse(str)).toThrowError( + 'width of block B is greater than the column width' + ); + }); }); describe('prototype properties', function () {