Added padding as configuration

docs/config/setup/defaultConfig/variables/configKeys.md

@@ -12,4 +12,4 @@
 
 > `const` **configKeys**: `Set`<`string`>
 
-Defined in: [packages/mermaid/src/defaultConfig.ts:289](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L289)
+Defined in: [packages/mermaid/src/defaultConfig.ts:290](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L290)

docs/syntax/treemap.md

@@ -208,6 +208,49 @@ treemap
     "Item B2": 25
 ```
 
+### Diagram Padding
+
+You can adjust the padding around the treemap diagram using the `diagramPadding` configuration option:
+
+```mermaid-example
+%%{init: {'treemap': {'diagramPadding': 20}}}%%
+treemap
+"Category A"
+    "Item A1": 10
+    "Item A2": 20
+"Category B"
+    "Item B1": 15
+    "Item B2": 25
+```
+
+```mermaid
+%%{init: {'treemap': {'diagramPadding': 20}}}%%
+treemap
+"Category A"
+    "Item A1": 10
+    "Item A2": 20
+"Category B"
+    "Item B1": 15
+    "Item B2": 25
+```
+
+## Configuration Options
+
+The treemap diagram supports the following configuration options:
+
+| Option         | Description                                                                 | Default |
+| -------------- | --------------------------------------------------------------------------- | ------- |
+| useMaxWidth    | When true, the diagram width is set to 100% and scales with available space | true    |
+| padding        | Internal padding between nodes                                              | 10      |
+| diagramPadding | Padding around the entire diagram                                           | 8       |
+| showValues     | Whether to show values in the treemap                                       | true    |
+| nodeWidth      | Width of nodes                                                              | 100     |
+| nodeHeight     | Height of nodes                                                             | 40      |
+| borderWidth    | Width of borders                                                            | 1       |
+| valueFontSize  | Font size for values                                                        | 12      |
+| labelFontSize  | Font size for labels                                                        | 14      |
+| valueFormat    | Format for values (see Value Formatting section)                            | ','     |
+
 ## Advanced Features
 
 ### Value Formatting

packages/mermaid/src/defaultConfig.ts

@@ -265,6 +265,7 @@ const config: RequiredDeep<MermaidConfig> = {
   treemap: {
     useMaxWidth: true,
     padding: 10,
+    diagramPadding: 8,
     showValues: true,
     nodeWidth: 100,
     nodeHeight: 40,

packages/mermaid/src/diagrams/treemap/renderer.ts

@@ -512,9 +512,8 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
       }
     });
   }
-  const padding = 8;
+  const diagramPadding = config.diagramPadding ?? 8;
-  // const padding = config.treemap.diagramPadding ?? 8;
+  setupViewPortForSVG(svg, diagramPadding, 'flowchart', config?.useMaxWidth || false);
-  setupViewPortForSVG(svg, padding, 'flowchart', config?.useMaxWidth || false);
 };
 
 const getClasses = function (

packages/mermaid/src/diagrams/treemap/types.ts

@@ -67,6 +67,7 @@ export interface TreemapAst {
 // Define the TreemapDiagramConfig interface
 export interface TreemapDiagramConfig extends BaseDiagramConfig {
   padding?: number;
+  diagramPadding?: number;
   showValues?: boolean;
   nodeWidth?: number;
   nodeHeight?: number;

packages/mermaid/src/docs/syntax/treemap.md

@@ -138,6 +138,38 @@ treemap
     "Item B2": 25
 ```
 
+### Diagram Padding
+
+You can adjust the padding around the treemap diagram using the `diagramPadding` configuration option:
+
+```mermaid-example
+%%{init: {'treemap': {'diagramPadding': 20}}}%%
+treemap
+"Category A"
+    "Item A1": 10
+    "Item A2": 20
+"Category B"
+    "Item B1": 15
+    "Item B2": 25
+```
+
+## Configuration Options
+
+The treemap diagram supports the following configuration options:
+
+| Option         | Description                                                                 | Default |
+| -------------- | --------------------------------------------------------------------------- | ------- |
+| useMaxWidth    | When true, the diagram width is set to 100% and scales with available space | true    |
+| padding        | Internal padding between nodes                                              | 10      |
+| diagramPadding | Padding around the entire diagram                                           | 8       |
+| showValues     | Whether to show values in the treemap                                       | true    |
+| nodeWidth      | Width of nodes                                                              | 100     |
+| nodeHeight     | Height of nodes                                                             | 40      |
+| borderWidth    | Width of borders                                                            | 1       |
+| valueFontSize  | Font size for values                                                        | 12      |
+| labelFontSize  | Font size for labels                                                        | 14      |
+| valueFormat    | Format for values (see Value Formatting section)                            | ','     |
+
 ## Advanced Features
 
 ### Value Formatting