Adding treemap

2025-09-07 09:36:41 +02:00 · 2025-05-07 18:16:00 +02:00
parent 40eb0cc240
commit e0a075ecca
14 changed files with 705 additions and 5 deletions
--- a/docs/syntax/treemap.md
+++ b/docs/syntax/treemap.md
@@ -0,0 +1,128 @@
+# 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
+  }
+});
+```
+
+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      |
+
+## 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