marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-20 07:49:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

Updates after review comments

Browse Source
This commit is contained in:
Knut Sveidqvist
2025-05-20 12:56:31 +02:00
parent 63827db60d
commit 878e77acab
5 changed files with 90 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
docs/syntax/treemap.md
View File

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