From 878e77acabdb06a5e7343241afe1ffa96ecf668d Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Tue, 20 May 2025 12:56:31 +0200
Subject: [PATCH] Updates after review comments

---
 cypress/platform/knsv2.html                   |  6 +-
 demos/treemap.html                            | 57 ++++++---------
 docs/syntax/treemap.md                        | 72 ++++++++++---------
 packages/mermaid/src/docs/syntax/treemap.md   | 38 +++++-----
 .../src/language/treemap/treemap-validator.ts | 26 ++-----
 5 files changed, 90 insertions(+), 109 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 88fcc8f15..24ad332e6 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -147,7 +147,11 @@ classDef class1   fill:red,color:blue,stroke:#FFD600;
 </pre
     >
     <pre id="diagram4" class="mermaid">
-%%{init: {'treemap': {'valueFormat': '$0,0'}}}%%
+---
+config:
+  treemap:
+    valueFormat: '$0,0'
+---
 treemap
 "Budget"
     "Operations"
diff --git a/demos/treemap.html b/demos/treemap.html
index 5d51dbe37..0f4867606 100644
--- a/demos/treemap.html
+++ b/demos/treemap.html
@@ -31,55 +31,44 @@
     <p>This is a demo of the new treemap diagram type in Mermaid.</p>
 
     <h2>Basic Treemap Example</h2>
-    <pre><code>
+    <pre class="mermaid">
 treemap
     "Root"
         "Branch 1"
             "Leaf 1.1": 10
             "Leaf 1.2": 15
         "Branch 2"
-            "Leaf 2.1": 20
+            "Branch 2.1"
+                "Leaf 2.1.1": 20
+                "Leaf 2.1.2": 25
             "Leaf 2.2": 25
             "Leaf 2.3": 30
-    </code></pre>
-    <div class="mermaid">
-      treemap Root Branch 1 Leaf 1.1: 10 Leaf 1.2: 15 Branch 2 Leaf 2.1: 20 Leaf 2.2: 25 Leaf 2.3:
-      30
-    </div>
+    </pre>
 
     <h2>Technology Stack Treemap Example</h2>
-    <pre><code>
+    <pre class="mermaid">
 treemap
-    Technology Stack
-        Frontend
-            React: 35
-            CSS: 15
-            HTML: 10
-        Backend
-            Node.js: 25
-            Express: 10
-            MongoDB: 15
-        DevOps
-            Docker: 10
-            Kubernetes: 15
-            CI/CD: 5
-    </code></pre>
-    <div class="mermaid">
-      treemap Technology Stack Frontend React: 35 CSS: 15 HTML: 10 Backend Node.js: 25 Express: 10
-      MongoDB: 15 DevOps Docker: 10 Kubernetes: 15 CI/CD: 5
-    </div>
+    "Technology Stack"
+        "Frontend"
+            "React": 35
+            "CSS": 15
+            "HTML": 10
+        "Backend"
+            "Node.js": 25
+            "Express": 10
+            "MongoDB": 15
+        "DevOps"
+            "Docker": 10
+            "Kubernetes": 15
+            "CI/CD": 5
+    </pre>
 
     <script type="module">
-      import mermaid from '../dist/mermaid.esm.min.mjs';
+      import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
-        startOnLoad: true,
-        theme: 'default',
+        theme: 'forest',
+        logLevel: 1,
         securityLevel: 'loose',
-        treemap: {
-          useMaxWidth: true,
-          padding: 15,
-          showValues: true,
-        },
       });
     </script>
   </body>
diff --git a/docs/syntax/treemap.md b/docs/syntax/treemap.md
index cb90d6143..ee8daec61 100644
--- a/docs/syntax/treemap.md
+++ b/docs/syntax/treemap.md
@@ -161,7 +161,10 @@ classDef important fill:#f96,stroke:#333,stroke-width:2px;
 You can customize the colors of your treemap using the theme configuration:
 
 ```mermaid-example
-%%{init: {'theme': 'forest'}}%%
+---
+config:
+    theme: 'forest'
+---
 treemap
 "Category A"
     "Item A1": 10
@@ -172,33 +175,10 @@ treemap
 ```
 
 ```mermaid
-%%{init: {'theme': 'forest'}}%%
-treemap
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-```
-
-### Directives
-
-You can use directives to customize the appearance of your treemap:
-
-```mermaid-example
-%%{init: {'treemap': {'useWidth': true, 'useHeight': true}}}%%
-treemap
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-```
-
-```mermaid
-%%{init: {'treemap': {'useWidth': true, 'useHeight': true}}}%%
+---
+config:
+    theme: 'forest'
+---
 treemap
 "Category A"
     "Item A1": 10
@@ -213,7 +193,11 @@ treemap
 You can adjust the padding around the treemap diagram using the `diagramPadding` configuration option:
 
 ```mermaid-example
-%%{init: {'treemap': {'diagramPadding': 20}}}%%
+---
+config:
+  treemap:
+    diagramPadding: 200
+---
 treemap
 "Category A"
     "Item A1": 10
@@ -224,7 +208,11 @@ treemap
 ```
 
 ```mermaid
-%%{init: {'treemap': {'diagramPadding': 20}}}%%
+---
+config:
+  treemap:
+    diagramPadding: 200
+---
 treemap
 "Category A"
     "Item A1": 10
@@ -272,7 +260,11 @@ The treemap diagram supports both standard D3 format specifiers and some common
 Example with currency formatting:
 
 ```mermaid-example
-%%{init: {'treemap': {'valueFormat': '$0,0'}}}%%
+---
+config:
+  treemap:
+    valueFormat: '$0,0'
+---
 treemap
 "Budget"
     "Operations"
@@ -285,7 +277,11 @@ treemap
 ```
 
 ```mermaid
-%%{init: {'treemap': {'valueFormat': '$0,0'}}}%%
+---
+config:
+  treemap:
+    valueFormat: '$0,0'
+---
 treemap
 "Budget"
     "Operations"
@@ -300,7 +296,11 @@ treemap
 Example with percentage formatting:
 
 ```mermaid-example
-%%{init: {'treemap': {'valueFormat': '.1%'}}}%%
+---
+config:
+  treemap:
+    valueFormat: '$.1%'
+---
 treemap
 "Market Share"
     "Company A": 0.35
@@ -310,7 +310,11 @@ treemap
 ```
 
 ```mermaid
-%%{init: {'treemap': {'valueFormat': '.1%'}}}%%
+---
+config:
+  treemap:
+    valueFormat: '$.1%'
+---
 treemap
 "Market Share"
     "Company A": 0.35
diff --git a/packages/mermaid/src/docs/syntax/treemap.md b/packages/mermaid/src/docs/syntax/treemap.md
index 6e9d16045..2b4a49780 100644
--- a/packages/mermaid/src/docs/syntax/treemap.md
+++ b/packages/mermaid/src/docs/syntax/treemap.md
@@ -113,22 +113,10 @@ classDef important fill:#f96,stroke:#333,stroke-width:2px;
 You can customize the colors of your treemap using the theme configuration:
 
 ```mermaid-example
-%%{init: {'theme': 'forest'}}%%
-treemap
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-```
-
-### Directives
-
-You can use directives to customize the appearance of your treemap:
-
-```mermaid-example
-%%{init: {'treemap': {'useWidth': true, 'useHeight': true}}}%%
+---
+config:
+    theme: 'forest'
+---
 treemap
 "Category A"
     "Item A1": 10
@@ -143,7 +131,11 @@ treemap
 You can adjust the padding around the treemap diagram using the `diagramPadding` configuration option:
 
 ```mermaid-example
-%%{init: {'treemap': {'diagramPadding': 20}}}%%
+---
+config:
+  treemap:
+    diagramPadding: 200
+---
 treemap
 "Category A"
     "Item A1": 10
@@ -191,7 +183,11 @@ The treemap diagram supports both standard D3 format specifiers and some common
 Example with currency formatting:
 
 ```mermaid-example
-%%{init: {'treemap': {'valueFormat': '$0,0'}}}%%
+---
+config:
+  treemap:
+    valueFormat: '$0,0'
+---
 treemap
 "Budget"
     "Operations"
@@ -206,7 +202,11 @@ treemap
 Example with percentage formatting:
 
 ```mermaid-example
-%%{init: {'treemap': {'valueFormat': '.1%'}}}%%
+---
+config:
+  treemap:
+    valueFormat: '$.1%'
+---
 treemap
 "Market Share"
     "Company A": 0.35
diff --git a/packages/parser/src/language/treemap/treemap-validator.ts b/packages/parser/src/language/treemap/treemap-validator.ts
index 898222753..9a9e5c469 100644
--- a/packages/parser/src/language/treemap/treemap-validator.ts
+++ b/packages/parser/src/language/treemap/treemap-validator.ts
@@ -1,5 +1,5 @@
 import type { ValidationAcceptor, ValidationChecks } from 'langium';
-import type { MermaidAstType, TreemapDoc, TreemapRow } from '../generated/ast.js';
+import type { MermaidAstType, TreemapDoc } from '../generated/ast.js';
 import type { TreemapServices } from './module.js';
 
 /**
@@ -13,9 +13,7 @@ export function registerValidationChecks(services: TreemapServices) {
     // but the type system is having trouble with it
     const checks: ValidationChecks<MermaidAstType> = {
       TreemapDoc: validator.checkSingleRoot.bind(validator),
-      TreemapRow: (node: TreemapRow, accept: ValidationAcceptor) => {
-        validator.checkSingleRootRow(node, accept);
-      },
+      // Remove unused validation for TreemapRow
     };
     registry.register(checks, validator);
   }
@@ -25,33 +23,19 @@ export function registerValidationChecks(services: TreemapServices) {
  * Implementation of custom validations.
  */
 export class TreemapValidator {
-  constructor() {
-    // eslint-disable-next-line no-console
-    console.debug('TreemapValidator constructor');
-  }
-  checkSingleRootRow(_node: TreemapRow, _accept: ValidationAcceptor): void {
-    // eslint-disable-next-line no-console
-    console.debug('CHECKING SINGLE ROOT Row');
-  }
-
   /**
    * Validates that a treemap has only one root node.
    * A root node is defined as a node that has no indentation.
    */
   checkSingleRoot(doc: TreemapDoc, accept: ValidationAcceptor): void {
-    // eslint-disable-next-line no-console
-    console.debug('CHECKING SINGLE ROOT');
     let rootNodeIndentation;
 
     for (const row of doc.TreemapRows) {
-      // Skip non-node items (e.g., class decorations, icon decorations)
-      if (
-        !row.item ||
-        row.item.$type === 'ClassDecoration' ||
-        row.item.$type === 'IconDecoration'
-      ) {
+      // Skip non-node items or items without a type
+      if (!row.item) {
         continue;
       }
+
       if (
         rootNodeIndentation === undefined && // Check if this is a root node (no indentation)
         row.indent === undefined