mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-01 14:46:41 +02:00
172 lines
4.6 KiB
Markdown
172 lines
4.6 KiB
Markdown
# Treemap Diagrams
|
|
|
|
> A treemap diagram displays hierarchical data as a set of nested rectangles.
|
|
|
|
Treemap diagrams are useful for visualizing hierarchical structures where the size of each rectangle can represent a quantitative value.
|
|
|
|
## Syntax
|
|
|
|
The syntax for creating a treemap is straightforward. It uses indentation to define the hierarchy and allows you to specify values for the leaf nodes.
|
|
|
|
```
|
|
treemap
|
|
Root
|
|
Branch 1
|
|
Leaf 1.1: 10
|
|
Leaf 1.2: 15
|
|
Branch 2
|
|
Leaf 2.1: 20
|
|
Leaf 2.2: 25
|
|
```
|
|
|
|
In the example above:
|
|
- `Root` is the top-level node
|
|
- `Branch 1` and `Branch 2` are children of `Root`
|
|
- The leaf nodes (`Leaf 1.1`, etc.) have values specified after a colon
|
|
|
|
## Examples
|
|
|
|
### Basic Treemap
|
|
|
|
```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
|
|
```
|
|
|
|
### Technology Stack Treemap
|
|
|
|
```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
|
|
```
|
|
|
|
### Project Resource Allocation
|
|
|
|
```mermaid
|
|
treemap
|
|
Project Resources
|
|
Development
|
|
Frontend: 20
|
|
Backend: 25
|
|
Database: 15
|
|
Testing
|
|
Unit Tests: 10
|
|
Integration Tests: 15
|
|
E2E Tests: 10
|
|
Deployment
|
|
Staging: 5
|
|
Production: 10
|
|
```
|
|
|
|
## Configuration
|
|
|
|
You can configure the appearance of treemap diagrams in your Mermaid configuration:
|
|
|
|
```javascript
|
|
mermaid.initialize({
|
|
treemap: {
|
|
useMaxWidth: true,
|
|
padding: 10,
|
|
showValues: true,
|
|
nodeWidth: 100,
|
|
nodeHeight: 40,
|
|
borderWidth: 1,
|
|
valueFontSize: 12,
|
|
labelFontSize: 14,
|
|
valueFormat: ','
|
|
}
|
|
});
|
|
```
|
|
|
|
Key configuration options:
|
|
|
|
| Parameter | Description | Default |
|
|
|--------------|--------------------------------------------|---------|
|
|
| useMaxWidth | Use available width to scale the diagram | true |
|
|
| padding | Padding between nodes | 10 |
|
|
| showValues | Show values in leaf nodes | true |
|
|
| nodeWidth | Default width of nodes | 100 |
|
|
| nodeHeight | Default height of nodes | 40 |
|
|
| borderWidth | Width of node borders | 1 |
|
|
| valueFontSize| Font size for values | 12 |
|
|
| labelFontSize| Font size for node labels | 14 |
|
|
| valueFormat | Format string for values (D3 format) | ',' |
|
|
|
|
## Value Formatting
|
|
|
|
You can customize how values are displayed in the treemap using the `valueFormat` configuration option. This option primarily uses [D3's format specifiers](https://github.com/d3/d3-format#locale_format) to control how numbers are displayed, with some additional special cases for common formats.
|
|
|
|
Common format patterns:
|
|
- `,` - Thousands separator (default)
|
|
- `$` - Add dollar sign
|
|
- `.1f` - Show one decimal place
|
|
- `.1%` - Show as percentage with one decimal place
|
|
- `$0,0` - Dollar sign with thousands separator
|
|
- `$.2f` - Dollar sign with 2 decimal places
|
|
- `$,.2f` - Dollar sign with thousands separator and 2 decimal places
|
|
|
|
The treemap diagram supports both standard D3 format specifiers and some common currency formats that combine the dollar sign with other formatting options.
|
|
|
|
Example with currency formatting:
|
|
|
|
```mermaid
|
|
%%{init: {'treemap': {'valueFormat': '$0,0'}}}%%
|
|
treemap
|
|
Budget
|
|
Development
|
|
Frontend: 250000
|
|
Backend: 350000
|
|
Marketing
|
|
Digital: 150000
|
|
Print: 50000
|
|
```
|
|
|
|
Example with percentage formatting:
|
|
|
|
```mermaid
|
|
%%{init: {'treemap': {'valueFormat': '.1%'}}}%%
|
|
treemap
|
|
Market Share
|
|
Company A: 0.35
|
|
Company B: 0.25
|
|
Company C: 0.15
|
|
Others: 0.25
|
|
```
|
|
|
|
## Notes and Limitations
|
|
|
|
- The treemap diagram is designed for hierarchical visualization only
|
|
- Deep hierarchies may result in very small rectangles that are difficult to read
|
|
- For best results, limit your hierarchy to 3-4 levels
|
|
- Values should be provided only for leaf nodes
|
|
|
|
## Styling
|
|
|
|
You can style the different elements of the treemap using CSS. The key classes are:
|
|
|
|
- `.treemapNode` - All nodes
|
|
- `.treemapSection` - Non-leaf nodes
|
|
- `.treemapLeaf` - Leaf nodes
|
|
- `.treemapLabel` - Node labels
|
|
- `.treemapValue` - Node values
|
|
- `.treemapTitle` - Diagram title
|