From bf7c532e430bbae5f94d7fc98dac12390bc72706 Mon Sep 17 00:00:00 2001 From: omkarht Date: Wed, 19 Nov 2025 19:46:35 +0530 Subject: [PATCH 1/3] 7167 : fix classDef style application for treemap diagramtype on-behalf-of: @Mermaid-Chart --- packages/mermaid/src/diagrams/treemap/parser.ts | 4 ++-- packages/mermaid/src/diagrams/treemap/utils.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mermaid/src/diagrams/treemap/parser.ts b/packages/mermaid/src/diagrams/treemap/parser.ts index 4d71ff470..9bf4c5b10 100644 --- a/packages/mermaid/src/diagrams/treemap/parser.ts +++ b/packages/mermaid/src/diagrams/treemap/parser.ts @@ -21,7 +21,7 @@ const populate = (ast: TreemapAst, db: TreemapDB) => { type: string; value?: number; classSelector?: string; - cssCompiledStyles?: string; + cssCompiledStyles?: string[]; }[] = []; // Extract classes and styles from the treemap @@ -44,7 +44,7 @@ const populate = (ast: TreemapAst, db: TreemapDB) => { // Get styles as a string if they exist const styles = item.classSelector ? db.getStylesForClass(item.classSelector) : []; - const cssCompiledStyles = styles.length > 0 ? styles.join(';') : undefined; + const cssCompiledStyles = styles.length > 0 ? styles : undefined; const itemData = { level, diff --git a/packages/mermaid/src/diagrams/treemap/utils.ts b/packages/mermaid/src/diagrams/treemap/utils.ts index e7e7fcc5c..07c7b0140 100644 --- a/packages/mermaid/src/diagrams/treemap/utils.ts +++ b/packages/mermaid/src/diagrams/treemap/utils.ts @@ -12,7 +12,7 @@ export function buildHierarchy( type: string; value?: number; classSelector?: string; - cssCompiledStyles?: string; + cssCompiledStyles?: string[]; }[] ): TreemapNode[] { if (!items.length) { @@ -29,7 +29,7 @@ export function buildHierarchy( }; node.classSelector = item?.classSelector; if (item?.cssCompiledStyles) { - node.cssCompiledStyles = [item.cssCompiledStyles]; + node.cssCompiledStyles = item.cssCompiledStyles; } if (item.type === 'Leaf' && item.value !== undefined) { From 96ca7c090f28eea458027e6871903d789575cfa1 Mon Sep 17 00:00:00 2001 From: omkarht Date: Thu, 20 Nov 2025 12:43:56 +0530 Subject: [PATCH 2/3] chore : add changeset for classDef style application on-behalf-of: @Mermaid-Chart --- .changeset/chatty-insects-dream.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/chatty-insects-dream.md diff --git a/.changeset/chatty-insects-dream.md b/.changeset/chatty-insects-dream.md new file mode 100644 index 000000000..a35ed5786 --- /dev/null +++ b/.changeset/chatty-insects-dream.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix(treemap): Fixed treemap classDef style application to properly apply user-defined styles From 8d1cdc41c28c4cbd7b5ae428e6b8ce1f479c86ee Mon Sep 17 00:00:00 2001 From: omkarht Date: Thu, 27 Nov 2025 12:22:54 +0530 Subject: [PATCH 3/3] test: enhance treemap tests with classDef styling scenarios on-behalf-of: @Mermaid-Chart --- cypress/integration/rendering/treemap.spec.ts | 91 ++++++++++++++++++- 1 file changed, 90 insertions(+), 1 deletion(-) diff --git a/cypress/integration/rendering/treemap.spec.ts b/cypress/integration/rendering/treemap.spec.ts index 92fcb5808..f1869fbbf 100644 --- a/cypress/integration/rendering/treemap.spec.ts +++ b/cypress/integration/rendering/treemap.spec.ts @@ -327,8 +327,97 @@ classDef sales fill:#c3a66b,stroke:#333; {} ); }); + + it('12: should apply classDef fill color to leaf nodes', () => { + imgSnapshotTest( + `treemap-beta +"Root" + "Item A": 30:::redClass + "Item B": 20 + "Item C": 25:::blueClass + +classDef redClass fill:#ff0000; +classDef blueClass fill:#0000ff; + `, + {} + ); + }); + + it('13: should apply classDef stroke styles to sections', () => { + imgSnapshotTest( + `treemap-beta + %% This is a comment + "Category A":::thickBorder + "Item A1": 10 + "Item A2": 20 + %% Another comment + "Category B":::dashedBorder + "Item B1": 15 + "Item B2": 25 + +classDef thickBorder stroke:red,stroke-width:8px; +classDef dashedBorder stroke:black,stroke-dasharray:5,stroke-width:8px; + `, + {} + ); + }); + + it('14: should apply classDef color to text labels', () => { + imgSnapshotTest( + `treemap-beta +"Products" + "Electronics":::whiteText + "Phones": 40 + "Laptops": 30 + "Furniture":::darkText + "Chairs": 25 + "Tables": 20 + +classDef whiteText fill:#2c3e50,color:#ffffff; +classDef darkText fill:#ecf0f1,color:#000000; + `, + {} + ); + }); + + it('15: should apply multiple classDef properties simultaneously', () => { + imgSnapshotTest( + `treemap-beta +"Budget" + "Critical":::critical + "Server Costs": 50000 + "Salaries": 80000 + "Normal":::normal + "Office Supplies": 5000 + "Marketing": 15000 +classDef critical fill:#e74c3c,color:#fff,stroke:#c0392b,stroke-width:3px; +classDef normal fill:#3498db,color:#fff,stroke:#2980b9,stroke-width:1px; + `, + {} + ); + }); + + it('16: should handle classDef on nested sections and leaves', () => { + imgSnapshotTest( + `treemap-beta +"Company" + "Engineering":::engSection + "Frontend": 30:::highlight + "Backend": 40 + "DevOps": 20:::highlight + "Sales" + "Direct": 35 + "Channel": 25:::highlight + +classDef engSection fill:#9b59b6,stroke:#8e44ad,stroke-width:2px; +classDef highlight fill:#f39c12,color:#000,stroke:#e67e22,stroke-width:2px; + `, + {} + ); + }); + /* - it.skip('12: should render a treemap with title', () => { + it.skip('17: should render a treemap with title', () => { imgSnapshotTest( ` treemap-beta