marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added padding as configuration

Browse Source
This commit is contained in:
Knut Sveidqvist
2025-05-15 10:59:47 +02:00
parent 41108358f6
commit 63827db60d
6 changed files with 80 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/config/setup/defaultConfig/variables/configKeys.md
View File

@@ -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)

43
docs/syntax/treemap.md
View File

@@ -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

1
packages/mermaid/src/defaultConfig.ts
View File

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

5
packages/mermaid/src/diagrams/treemap/renderer.ts
View File

@@ -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 (

1
packages/mermaid/src/diagrams/treemap/types.ts
View File

@@ -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;

32
packages/mermaid/src/docs/syntax/treemap.md
View File

@@ -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