marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-14 22:09:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fixed linting issues in markdown file

Browse Source
This commit is contained in:
Knut Sveidqvist
2025-05-12 18:27:40 +02:00
parent f338802642
commit ed7bab76f2
3 changed files with 248 additions and 110 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:274](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L274)
Defined in: [packages/mermaid/src/defaultConfig.ts:285](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L285)

353
docs/syntax/treemap.md
View File

@@ -1,121 +1,221 @@
# Treemap Diagrams
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/treemap.md](../../packages/mermaid/src/docs/syntax/treemap.md).
> A treemap diagram displays hierarchical data as a set of nested rectangles.
# Treemap Diagram
Treemap diagrams are useful for visualizing hierarchical structures where the size of each rectangle can represent a quantitative value.
> A treemap diagram displays hierarchical data as a set of nested rectangles. Each branch of the tree is represented by a rectangle, which is then tiled with smaller rectangles representing sub-branches.
> **Warning**
> This is a new diagram type in Mermaid. Its syntax may evolve in future versions.
## Introduction
Treemap diagrams are an effective way to visualize hierarchical data and show proportions between categories and subcategories. The size of each rectangle is proportional to the value it represents, making it easy to compare different parts of a hierarchy.
Treemap diagrams are particularly useful for:
- Visualizing hierarchical data structures
- Comparing proportions between categories
- Displaying large amounts of hierarchical data in a limited space
- Identifying patterns and outliers in hierarchical data
## 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
"Section 1"
"Leaf 1.1": 12
"Section 1.2"
"Leaf 1.2.1": 12
"Section 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
### Node Definition
Nodes in a treemap are defined using the following syntax:
- **Section/Parent nodes**: Defined with quoted text `"Section Name"`
- **Leaf nodes with values**: Defined with quoted text followed by a colon and value `"Leaf Name": value`
- **Hierarchy**: Created using indentation (spaces or tabs)
- **Styling**: Nodes can be styled using the `:::class` syntax
## Examples
### Basic Treemap
```mermaid
```mermaid-example
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
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
```
### 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
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
```
### Project Resource Allocation
### Hierarchical Treemap
```mermaid-example
treemap
"Products"
"Electronics"
"Phones": 50
"Computers": 30
"Accessories": 20
"Clothing"
"Men's": 40
"Women's": 40
```
```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
"Products"
"Electronics"
"Phones": 50
"Computers": 30
"Accessories": 20
"Clothing"
"Men's": 40
"Women's": 40
```
## Configuration
### Treemap with Styling
You can configure the appearance of treemap diagrams in your Mermaid configuration:
```mermaid-example
treemap
"Section 1"
"Leaf 1.1": 12
"Section 1.2":::class1
"Leaf 1.2.1": 12
"Section 2"
"Leaf 2.1": 20:::class1
"Leaf 2.2": 25
"Leaf 2.3": 12
```javascript
mermaid.initialize({
treemap: {
useMaxWidth: true,
padding: 10,
showValues: true,
nodeWidth: 100,
nodeHeight: 40,
borderWidth: 1,
valueFontSize: 12,
labelFontSize: 14,
valueFormat: ','
}
});
classDef class1 fill:red,color:blue,stroke:#FFD600;
```
Key configuration options:
```mermaid
treemap
"Section 1"
"Leaf 1.1": 12
"Section 1.2":::class1
"Leaf 1.2.1": 12
"Section 2"
"Leaf 2.1": 20:::class1
"Leaf 2.2": 25
"Leaf 2.3": 12
| 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) | ',' |
classDef class1 fill:red,color:blue,stroke:#FFD600;
```
## Value Formatting
## Styling and Configuration
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.
Treemap diagrams can be customized using Mermaid's styling and configuration options.
### Using classDef for Styling
You can define custom styles for nodes using the `classDef` syntax, which is a standard feature across many Mermaid diagram types:
```mermaid-example
treemap
"Main"
"A": 20
"B":::important
"B1": 10
"B2": 15
"C": 5
classDef important fill:#f96,stroke:#333,stroke-width:2px;
```
```mermaid
treemap
"Main"
"A": 20
"B":::important
"B1": 10
"B2": 15
"C": 5
classDef important fill:#f96,stroke:#333,stroke-width:2px;
```
### Theme Configuration
You can customize the colors of your treemap using the theme configuration:
```mermaid-example
%%{init: {'theme': 'forest'}}%%
treemap
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
```
```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}}}%%
treemap
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
```
## Advanced Features
### Value Formatting
Values in treemap diagrams can be formatted to display in different ways 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.
Some common format patterns:
Common format patterns:
- `,` - Thousands separator (default)
- `$` - Add dollar sign
- `.1f` - Show one decimal place
@@ -128,44 +228,79 @@ The treemap diagram supports both standard D3 format specifiers and some common
Example with currency formatting:
```mermaid-example
%%{init: {'treemap': {'valueFormat': '$0,0'}}}%%
treemap
"Budget"
"Operations"
"Salaries": 700000
"Equipment": 200000
"Supplies": 100000
"Marketing"
"Advertising": 400000
"Events": 100000
```
```mermaid
%%{init: {'treemap': {'valueFormat': '$0,0'}}}%%
treemap
Budget
Development
Frontend: 250000
Backend: 350000
Marketing
Digital: 150000
Print: 50000
"Budget"
"Operations"
"Salaries": 700000
"Equipment": 200000
"Supplies": 100000
"Marketing"
"Advertising": 400000
"Events": 100000
```
Example with percentage formatting:
```mermaid-example
%%{init: {'treemap': {'valueFormat': '.1%'}}}%%
treemap
"Market Share"
"Company A": 0.35
"Company B": 0.25
"Company C": 0.15
"Others": 0.25
```
```mermaid
%%{init: {'treemap': {'valueFormat': '.1%'}}}%%
treemap
Market Share
Company A: 0.35
Company B: 0.25
Company C: 0.15
Others: 0.25
"Market Share"
"Company A": 0.35
"Company B": 0.25
"Company C": 0.15
"Others": 0.25
```
## Notes and Limitations
## Common Use Cases
- 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
Treemap diagrams are commonly used for:
## Styling
1. **Financial Data**: Visualizing budget allocations, market shares, or portfolio compositions
2. **File System Analysis**: Showing disk space usage by folders and files
3. **Population Demographics**: Displaying population distribution across regions and subregions
4. **Product Hierarchies**: Visualizing product categories and their sales volumes
5. **Organizational Structures**: Representing departments and team sizes in a company
You can style the different elements of the treemap using CSS. The key classes are:
## Limitations
- `.treemapNode` - All nodes
- `.treemapSection` - Non-leaf nodes
- `.treemapLeaf` - Leaf nodes
- `.treemapLabel` - Node labels
- `.treemapValue` - Node values
- `.treemapTitle` - Diagram title
- Treemap diagrams work best when the data has a natural hierarchy
- Very small values may be difficult to see or label in a treemap diagram
- Deep hierarchies (many levels) can be challenging to represent clearly
- Treemap diagrams are not well suited for representing data with negative values
## Related Diagrams
If treemap diagrams don't suit your needs, consider these alternatives:
- **Pie Charts**: For simple proportion comparisons without hierarchy
- **Sunburst Diagrams**: For hierarchical data with a radial layout (yet to be released in Mermaid).
- **Sankey Diagrams**: For flow-based hierarchical data
## Notes
The treemap diagram implementation in Mermaid is designed to be simple to use while providing powerful visualization capabilities. As this is a newer diagram type, feedback and feature requests are welcome through the Mermaid GitHub repository.

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

@@ -16,6 +16,7 @@ This is a new diagram type in Mermaid. Its syntax may evolve in future versions.
Treemap diagrams are an effective way to visualize hierarchical data and show proportions between categories and subcategories. The size of each rectangle is proportional to the value it represents, making it easy to compare different parts of a hierarchy.
Treemap diagrams are particularly useful for:
- Visualizing hierarchical data structures
- Comparing proportions between categories
- Displaying large amounts of hierarchical data in a limited space
@@ -144,6 +145,7 @@ treemap
Values in treemap diagrams can be formatted to display in different ways 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.
Some common format patterns:
- `,` - Thousands separator (default)
- `$` - Add dollar sign
- `.1f` - Show one decimal place
@@ -201,6 +203,7 @@ Treemap diagrams are commonly used for:
## Related Diagrams
If treemap diagrams don't suit your needs, consider these alternatives:
- **Pie Charts**: For simple proportion comparisons without hierarchy
- **Sunburst Diagrams**: For hierarchical data with a radial layout (yet to be released in Mermaid).
- **Sankey Diagrams**: For flow-based hierarchical data