From 04234d9f4d7b2f35b65aeb5a5f6a00a443b822e6 Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Wed, 25 Mar 2026 13:05:05 +0530 Subject: [PATCH 1/3] fix: ensure block arrow spans multiple columns when width in columns is set on-behalf-of: @Mermaid-Chart --- cypress/integration/rendering/block.spec.js | 21 +++++++++++++++++++ .../src/dagre-wrapper/blockArrowHelper.ts | 6 ++++-- packages/mermaid/src/dagre-wrapper/nodes.js | 7 +++++-- .../src/diagrams/block/renderHelpers.ts | 1 + 4 files changed, 31 insertions(+), 4 deletions(-) diff --git a/cypress/integration/rendering/block.spec.js b/cypress/integration/rendering/block.spec.js index 354eb35add4..695327a6ec2 100644 --- a/cypress/integration/rendering/block.spec.js +++ b/cypress/integration/rendering/block.spec.js @@ -442,6 +442,27 @@ describe('Block diagram', () => { block:group2:3 l m n o p q r end +`, + {} + ); + }); + + it('BL34: block arrow should span multiple columns when widthInColumns is set', () => { + imgSnapshotTest( + `block-beta +columns 10 + + arrow<["span 10"]>(x):10 + A + B + C + D + E + F + G + H + I + J `, {} ); diff --git a/packages/mermaid/src/dagre-wrapper/blockArrowHelper.ts b/packages/mermaid/src/dagre-wrapper/blockArrowHelper.ts index 848dc9fccca..6c2136c80b1 100644 --- a/packages/mermaid/src/dagre-wrapper/blockArrowHelper.ts +++ b/packages/mermaid/src/dagre-wrapper/blockArrowHelper.ts @@ -24,7 +24,8 @@ const expandAndDeduplicateDirections = (directions: Direction[]) => { export const getArrowPoints = ( duplicatedDirections: Direction[], bbox: { width: number; height: number }, - node: any + node: any, + totalWidth?: number ) => { // Expand and deduplicate the provided directions. // for instance: x, right => right, left @@ -38,7 +39,8 @@ export const getArrowPoints = ( // Midpoint calculation based on height. const midpoint = height / f; // Calculated width of the bounding box, accounting for additional width and node padding. - const width = bbox.width + 2 * midpoint + node.padding; + // When totalWidth is provided + const width = totalWidth ?? bbox.width + 2 * midpoint + node.padding; // Padding to use, half of the node padding. const padding = node.padding / 2; diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js index d16d7b8eb4e..982ebc5cb55 100644 --- a/packages/mermaid/src/dagre-wrapper/nodes.js +++ b/packages/mermaid/src/dagre-wrapper/nodes.js @@ -125,9 +125,12 @@ const block_arrow = async (parent, node) => { const f = 2; const h = bbox.height + 2 * node.padding; const m = h / f; - const w = bbox.width + 2 * m + node.padding; + const naturalW = bbox.width + 2 * m + node.padding; + // Only use the layout-computed width when the block explicitly spans multiple columns + const isSpanning = node.positioned && (node.widthInColumns ?? 1) > 1 && node.width > naturalW; + const w = isSpanning ? node.width : naturalW; - const points = getArrowPoints(node.directions, bbox, node); + const points = getArrowPoints(node.directions, bbox, node, w); const blockArrow = insertPolygonShape(shapeSvg, w, h, points); blockArrow.attr('style', node.style); diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts index 87766ccb82e..3f7437af712 100644 --- a/packages/mermaid/src/diagrams/block/renderHelpers.ts +++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts @@ -112,6 +112,7 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) { intersect: undefined, type: vertex.type, padding: padding ?? getConfig()?.block?.padding ?? 0, + widthInColumns: vertex.widthInColumns ?? 1, }; return node; } From 5144ed4b138ae0f4836bab4c163c575e0a767dd3 Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Wed, 25 Mar 2026 13:53:00 +0530 Subject: [PATCH 2/3] chore:add changeset on-behalf-of: @Mermaid-Chart --- .changeset/fruity-ghosts-watch.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fruity-ghosts-watch.md diff --git a/.changeset/fruity-ghosts-watch.md b/.changeset/fruity-ghosts-watch.md new file mode 100644 index 00000000000..fa42639c159 --- /dev/null +++ b/.changeset/fruity-ghosts-watch.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: Arrow blocks in block-beta diagrams not spanning the specified number of columns when using :n syntax. From 4a88ea66739cfe35a527a94bad0ba330c5f9614e Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Wed, 8 Apr 2026 14:38:52 +0000 Subject: [PATCH 3/3] [autofix.ci] apply automated fixes --- cypress/integration/rendering/block.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/integration/rendering/block.spec.js b/cypress/integration/rendering/block.spec.js index 8e498efd858..7ffc0758447 100644 --- a/cypress/integration/rendering/block.spec.js +++ b/cypress/integration/rendering/block.spec.js @@ -479,7 +479,7 @@ columns 10 {} ); }); - + it('BL35: mixed column spans should not shrink column widths (issue #7503)', () => { imgSnapshotTest( `block-beta