marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-17 15:29:25 +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
> >
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
%%{init: {'treemap': {'valueFormat': '$0,0'}}}%% ---
config:
treemap:
valueFormat: '$0,0'
---
treemap treemap
"Budget" "Budget"
"Operations" "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> <p>This is a demo of the new treemap diagram type in Mermaid.</p>
<h2>Basic Treemap Example</h2> <h2>Basic Treemap Example</h2>
<pre><code> <pre class="mermaid">
treemap treemap
"Root" "Root"
"Branch 1" "Branch 1"
"Leaf 1.1": 10 "Leaf 1.1": 10
"Leaf 1.2": 15 "Leaf 1.2": 15
"Branch 2" "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.2": 25
"Leaf 2.3": 30 "Leaf 2.3": 30
</code></pre> </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>
<h2>Technology Stack Treemap Example</h2> <h2>Technology Stack Treemap Example</h2>
<pre><code> <pre class="mermaid">
treemap treemap
Technology Stack "Technology Stack"
Frontend "Frontend"
React: 35 "React": 35
CSS: 15 "CSS": 15
HTML: 10 "HTML": 10
Backend "Backend"
Node.js: 25 "Node.js": 25
Express: 10 "Express": 10
MongoDB: 15 "MongoDB": 15
DevOps "DevOps"
Docker: 10 "Docker": 10
Kubernetes: 15 "Kubernetes": 15
CI/CD: 5 "CI/CD": 5
</code></pre> </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>
<script type="module"> <script type="module">
import mermaid from '../dist/mermaid.esm.min.mjs'; import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ mermaid.initialize({
startOnLoad: true, theme: 'forest',
theme: 'default', logLevel: 1,
securityLevel: 'loose', securityLevel: 'loose',
treemap: {
useMaxWidth: true,
padding: 15,
showValues: true,
},
}); });
</script> </script>
</body> </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: You can customize the colors of your treemap using the theme configuration:
```mermaid-example ```mermaid-example
%%{init: {'theme': 'forest'}}%% ---
config:
theme: 'forest'
---
treemap treemap
"Category A" "Category A"
"Item A1": 10 "Item A1": 10
@@ -172,33 +175,10 @@ treemap
``` ```
```mermaid ```mermaid
%%{init: {'theme': 'forest'}}%% ---
treemap config:
"Category A" theme: 'forest'
"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 treemap
"Category A" "Category A"
"Item A1": 10 "Item A1": 10
@@ -213,7 +193,11 @@ treemap
You can adjust the padding around the treemap diagram using the `diagramPadding` configuration option: You can adjust the padding around the treemap diagram using the `diagramPadding` configuration option:
```mermaid-example ```mermaid-example
%%{init: {'treemap': {'diagramPadding': 20}}}%% ---
config:
treemap:
diagramPadding: 200
---
treemap treemap
"Category A" "Category A"
"Item A1": 10 "Item A1": 10
@@ -224,7 +208,11 @@ treemap
``` ```
```mermaid ```mermaid
%%{init: {'treemap': {'diagramPadding': 20}}}%% ---
config:
treemap:
diagramPadding: 200
---
treemap treemap
"Category A" "Category A"
"Item A1": 10 "Item A1": 10
@@ -272,7 +260,11 @@ The treemap diagram supports both standard D3 format specifiers and some common
Example with currency formatting: Example with currency formatting:
```mermaid-example ```mermaid-example
%%{init: {'treemap': {'valueFormat': '$0,0'}}}%% ---
config:
treemap:
valueFormat: '$0,0'
---
treemap treemap
"Budget" "Budget"
"Operations" "Operations"
@@ -285,7 +277,11 @@ treemap
``` ```
```mermaid ```mermaid
%%{init: {'treemap': {'valueFormat': '$0,0'}}}%% ---
config:
treemap:
valueFormat: '$0,0'
---
treemap treemap
"Budget" "Budget"
"Operations" "Operations"
@@ -300,7 +296,11 @@ treemap
Example with percentage formatting: Example with percentage formatting:
```mermaid-example ```mermaid-example
%%{init: {'treemap': {'valueFormat': '.1%'}}}%% ---
config:
treemap:
valueFormat: '$.1%'
---
treemap treemap
"Market Share" "Market Share"
"Company A": 0.35 "Company A": 0.35
@@ -310,7 +310,11 @@ treemap
``` ```
```mermaid ```mermaid
%%{init: {'treemap': {'valueFormat': '.1%'}}}%% ---
config:
treemap:
valueFormat: '$.1%'
---
treemap treemap
"Market Share" "Market Share"
"Company A": 0.35 "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: You can customize the colors of your treemap using the theme configuration:
```mermaid-example ```mermaid-example
%%{init: {'theme': 'forest'}}%% ---
treemap config:
"Category A" theme: 'forest'
"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 treemap
"Category A" "Category A"
"Item A1": 10 "Item A1": 10
@@ -143,7 +131,11 @@ treemap
You can adjust the padding around the treemap diagram using the `diagramPadding` configuration option: You can adjust the padding around the treemap diagram using the `diagramPadding` configuration option:
```mermaid-example ```mermaid-example
%%{init: {'treemap': {'diagramPadding': 20}}}%% ---
config:
treemap:
diagramPadding: 200
---
treemap treemap
"Category A" "Category A"
"Item A1": 10 "Item A1": 10
@@ -191,7 +183,11 @@ The treemap diagram supports both standard D3 format specifiers and some common
Example with currency formatting: Example with currency formatting:
```mermaid-example ```mermaid-example
%%{init: {'treemap': {'valueFormat': '$0,0'}}}%% ---
config:
treemap:
valueFormat: '$0,0'
---
treemap treemap
"Budget" "Budget"
"Operations" "Operations"
@@ -206,7 +202,11 @@ treemap
Example with percentage formatting: Example with percentage formatting:
```mermaid-example ```mermaid-example
%%{init: {'treemap': {'valueFormat': '.1%'}}}%% ---
config:
treemap:
valueFormat: '$.1%'
---
treemap treemap
"Market Share" "Market Share"
"Company A": 0.35 "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 { 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'; import type { TreemapServices } from './module.js';
/** /**
@@ -13,9 +13,7 @@ export function registerValidationChecks(services: TreemapServices) {
// but the type system is having trouble with it // but the type system is having trouble with it
const checks: ValidationChecks<MermaidAstType> = { const checks: ValidationChecks<MermaidAstType> = {
TreemapDoc: validator.checkSingleRoot.bind(validator), TreemapDoc: validator.checkSingleRoot.bind(validator),
TreemapRow: (node: TreemapRow, accept: ValidationAcceptor) => { // Remove unused validation for TreemapRow
validator.checkSingleRootRow(node, accept);
},
}; };
registry.register(checks, validator); registry.register(checks, validator);
} }
@@ -25,33 +23,19 @@ export function registerValidationChecks(services: TreemapServices) {
* Implementation of custom validations. * Implementation of custom validations.
*/ */
export class TreemapValidator { 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. * Validates that a treemap has only one root node.
* A root node is defined as a node that has no indentation. * A root node is defined as a node that has no indentation.
*/ */
checkSingleRoot(doc: TreemapDoc, accept: ValidationAcceptor): void { checkSingleRoot(doc: TreemapDoc, accept: ValidationAcceptor): void {
// eslint-disable-next-line no-console
console.debug('CHECKING SINGLE ROOT');
let rootNodeIndentation; let rootNodeIndentation;
for (const row of doc.TreemapRows) { for (const row of doc.TreemapRows) {
// Skip non-node items (e.g., class decorations, icon decorations) // Skip non-node items or items without a type
if ( if (!row.item) {
!row.item ||
row.item.$type === 'ClassDecoration' ||
row.item.$type === 'IconDecoration'
) {
continue; continue;
} }
if ( if (
rootNodeIndentation === undefined && // Check if this is a root node (no indentation) rootNodeIndentation === undefined && // Check if this is a root node (no indentation)
row.indent === undefined row.indent === undefined