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

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

6
cypress/platform/knsv2.html
View File

@@ -147,7 +147,11 @@ classDef class1 fill:red,color:blue,stroke:#FFD600;
</pre
>
<pre id="diagram4" class="mermaid">
%%{init: {'treemap': {'valueFormat': '$0,0'}}}%%
---
config:
treemap:
valueFormat: '$0,0'
---
treemap
"Budget"
"Operations"

57
demos/treemap.html
View File

@@ -31,55 +31,44 @@
<p>This is a demo of the new treemap diagram type in Mermaid.</p>
<h2>Basic Treemap Example</h2>
<pre><code>
<pre class="mermaid">
treemap
"Root"
"Branch 1"
"Leaf 1.1": 10
"Leaf 1.2": 15
"Branch 2"
"Leaf 2.1": 20
"Branch 2.1"
"Leaf 2.1.1": 20
"Leaf 2.1.2": 25
"Leaf 2.2": 25
"Leaf 2.3": 30
</code></pre>
<div class="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
</div>
</pre>
<h2>Technology Stack Treemap Example</h2>
<pre><code>
<pre class="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
</code></pre>
<div class="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
</div>
"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
</pre>
<script type="module">
import mermaid from '../dist/mermaid.esm.min.mjs';
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
startOnLoad: true,
theme: 'default',
theme: 'forest',
logLevel: 1,
securityLevel: 'loose',
treemap: {
useMaxWidth: true,
padding: 15,
showValues: true,
},
});
</script>
</body>

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

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

@@ -113,22 +113,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'}}%%
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}}}%%
---
config:
theme: 'forest'
---
treemap
"Category A"
"Item A1": 10
@@ -143,7 +131,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
@@ -191,7 +183,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"
@@ -206,7 +202,11 @@ treemap
Example with percentage formatting:
```mermaid-example
%%{init: {'treemap': {'valueFormat': '.1%'}}}%%
---
config:
treemap:
valueFormat: '$.1%'
---
treemap
"Market Share"
"Company A": 0.35

26
packages/parser/src/language/treemap/treemap-validator.ts
View File

@@ -1,5 +1,5 @@
import type { ValidationAcceptor, ValidationChecks } from 'langium';
import type { MermaidAstType, TreemapDoc, TreemapRow } from '../generated/ast.js';
import type { MermaidAstType, TreemapDoc } from '../generated/ast.js';
import type { TreemapServices } from './module.js';
/**
@@ -13,9 +13,7 @@ export function registerValidationChecks(services: TreemapServices) {
// but the type system is having trouble with it
const checks: ValidationChecks<MermaidAstType> = {
TreemapDoc: validator.checkSingleRoot.bind(validator),
TreemapRow: (node: TreemapRow, accept: ValidationAcceptor) => {
validator.checkSingleRootRow(node, accept);
},
// Remove unused validation for TreemapRow
};
registry.register(checks, validator);
}
@@ -25,33 +23,19 @@ export function registerValidationChecks(services: TreemapServices) {
* Implementation of custom validations.
*/
export class TreemapValidator {
constructor() {
// eslint-disable-next-line no-console
console.debug('TreemapValidator constructor');
}
checkSingleRootRow(_node: TreemapRow, _accept: ValidationAcceptor): void {
// eslint-disable-next-line no-console
console.debug('CHECKING SINGLE ROOT Row');
}
/**
* Validates that a treemap has only one root node.
* A root node is defined as a node that has no indentation.
*/
checkSingleRoot(doc: TreemapDoc, accept: ValidationAcceptor): void {
// eslint-disable-next-line no-console
console.debug('CHECKING SINGLE ROOT');
let rootNodeIndentation;
for (const row of doc.TreemapRows) {
// Skip non-node items (e.g., class decorations, icon decorations)
if (
!row.item ||
row.item.$type === 'ClassDecoration' ||
row.item.$type === 'IconDecoration'
) {
// Skip non-node items or items without a type
if (!row.item) {
continue;
}
if (
rootNodeIndentation === undefined && // Check if this is a root node (no indentation)
row.indent === undefined