From 63827db60dfda29099e540f848f774e21de84e3d Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 15 May 2025 10:59:47 +0200 Subject: [PATCH] Added padding as configuration --- .../defaultConfig/variables/configKeys.md | 2 +- docs/syntax/treemap.md | 43 +++++++++++++++++++ packages/mermaid/src/defaultConfig.ts | 1 + .../mermaid/src/diagrams/treemap/renderer.ts | 5 +-- .../mermaid/src/diagrams/treemap/types.ts | 1 + packages/mermaid/src/docs/syntax/treemap.md | 32 ++++++++++++++ 6 files changed, 80 insertions(+), 4 deletions(-) diff --git a/docs/config/setup/defaultConfig/variables/configKeys.md b/docs/config/setup/defaultConfig/variables/configKeys.md index 98f738815..222111bd5 100644 --- a/docs/config/setup/defaultConfig/variables/configKeys.md +++ b/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) diff --git a/docs/syntax/treemap.md b/docs/syntax/treemap.md index 855668c84..cb90d6143 100644 --- a/docs/syntax/treemap.md +++ b/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 diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index 4d306a89e..468f8e192 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -265,6 +265,7 @@ const config: RequiredDeep = { treemap: { useMaxWidth: true, padding: 10, + diagramPadding: 8, showValues: true, nodeWidth: 100, nodeHeight: 40, diff --git a/packages/mermaid/src/diagrams/treemap/renderer.ts b/packages/mermaid/src/diagrams/treemap/renderer.ts index 08e7c8f2c..57de7e5f9 100644 --- a/packages/mermaid/src/diagrams/treemap/renderer.ts +++ b/packages/mermaid/src/diagrams/treemap/renderer.ts @@ -512,9 +512,8 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { } }); } - const padding = 8; - // const padding = config.treemap.diagramPadding ?? 8; - setupViewPortForSVG(svg, padding, 'flowchart', config?.useMaxWidth || false); + const diagramPadding = config.diagramPadding ?? 8; + setupViewPortForSVG(svg, diagramPadding, 'flowchart', config?.useMaxWidth || false); }; const getClasses = function ( diff --git a/packages/mermaid/src/diagrams/treemap/types.ts b/packages/mermaid/src/diagrams/treemap/types.ts index d15915b80..c1a095a14 100644 --- a/packages/mermaid/src/diagrams/treemap/types.ts +++ b/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; diff --git a/packages/mermaid/src/docs/syntax/treemap.md b/packages/mermaid/src/docs/syntax/treemap.md index e5a220a0d..6e9d16045 100644 --- a/packages/mermaid/src/docs/syntax/treemap.md +++ b/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