Merge branch 'develop' of https://github.com/mermaid-js/mermaid into knsv/mindmap-refactoring

This commit is contained in:
darshanr0107
2025-07-30 14:59:39 +05:30
232 changed files with 11821 additions and 4576 deletions

View File

@@ -384,4 +384,17 @@ describe('Block diagram', () => {
{}
);
});
it('BL30: block should overflow if too wide for columns', () => {
imgSnapshotTest(
`block-beta
columns 2
fit:2
overflow:3
short:1
also_overflow:2
`,
{}
);
});
});

View File

@@ -1113,4 +1113,24 @@ end
);
});
});
it('6617: Per Link Curve Styling using edge Ids', () => {
imgSnapshotTest(
`flowchart TD
A e1@-->B e5@--> E
E e7@--> D
B e3@-->D
A e2@-->C e4@-->D
C e6@--> F
F e8@--> D
e1@{ curve: natural }
e2@{ curve: stepAfter }
e3@{ curve: monotoneY }
e4@{ curve: bumpY }
e5@{ curve: linear }
e6@{ curve: catmullRom }
e7@{ curve: cardinal }
`
);
});
});

View File

@@ -1,7 +1,7 @@
import { imgSnapshotTest } from '../../helpers/util';
describe('packet structure', () => {
it('should render a simple packet diagram', () => {
it('should render a simple packet-beta diagram', () => {
imgSnapshotTest(
`packet-beta
title Hello world
@@ -10,9 +10,18 @@ describe('packet structure', () => {
);
});
it('should render a simple packet diagram', () => {
imgSnapshotTest(
`packet
title Hello world
0-10: "hello"
`
);
});
it('should render a simple packet diagram without ranges', () => {
imgSnapshotTest(
`packet-beta
`packet
0: "h"
1: "i"
`
@@ -21,7 +30,7 @@ describe('packet structure', () => {
it('should render a complex packet diagram', () => {
imgSnapshotTest(
`packet-beta
`packet
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
@@ -52,7 +61,7 @@ describe('packet structure', () => {
packet:
showBits: false
---
packet-beta
packet
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"

View File

@@ -161,4 +161,68 @@ describe('Timeline diagram', () => {
{}
);
});
it('11: should render timeline with many stacked events and proper timeline line length', () => {
imgSnapshotTest(
`timeline
title Medical Device Lifecycle
section Pre-Development
Quality Management System : Regulatory Compliance : Risk Management
section Development
Management Responsibility : Planning Activities : Human Resources
Resource Management : Management Reviews : Infrastructure
section Post-Development
Product Realization Activities : Planning Activities : Customer-related Processes
Post-Production Activities : Feedback : Complaints : Adverse Events
: Research and Development : Purchasing Activities
: Production Activities : Installation Activities
: Servicing Activities : Post-Market Surveillance
`,
{}
);
});
it('12: should render timeline with proper vertical line lengths for all columns', () => {
imgSnapshotTest(
`---
config:
theme: base
themeVariables:
fontFamily: Fira Sans
fontSize: 17px
cScale0: '#b3cde0'
cScale1: '#f49090'
cScale2: '#85d5b8'
---
timeline
title Medical Device Lifecycle
section Planning
Quality Management System (4): Regulatory Compliance (4.1.1)
: Risk Management (4.1.2)
Management Resposibility (5): Planning Activities (5.4)
: Management Reviews (5.6)
Resource Management (6): Human Resources (6.2)
: Infrastructure (6.3)
section Realization
Research and Development (7.3): RnD Planning (7.3.2)
: Inputs (7.3.3)
: Outputs (7.3.4)
: Review (7.3.5)
: Verification (7.3.6)
: Validation (7.3.7)
Purchasing (7.4): Purchasing Process (7.4.1)
: Purchasing Information (7.4.2)
Production (7.5): Production Activities (7.5.1)
: Production Feedback (8.2.1)
Installation (7.5.3): Installation Activities (7.5.3)
Servicing (7.5.4): Servicing Activities (7.5.4)
section Post-Production
Post-Market Activities (8): Feedback (8.2.1)
: Complaints (8.2.2)
: Adverse Events (8.2.3)
`,
{}
);
});
});

View File

@@ -0,0 +1,382 @@
import { imgSnapshotTest } from '../../helpers/util.ts';
describe('Treemap Diagram', () => {
it('1: should render a basic treemap', () => {
imgSnapshotTest(
`treemap-beta
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
it('2: should render a hierarchical treemap', () => {
imgSnapshotTest(
`treemap-beta
"Products"
"Electronics"
"Phones": 50
"Computers": 30
"Accessories": 20
"Clothing"
"Men's"
"Shirts": 10
"Pants": 15
"Women's"
"Dresses": 20
"Skirts": 10
`,
{}
);
});
it('3: should render a treemap with styling using classDef', () => {
imgSnapshotTest(
`treemap-beta
"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
classDef class1 fill:red,color:blue,stroke:#FFD600;
`,
{}
);
});
it('4: should handle long text that wraps', () => {
imgSnapshotTest(
`treemap-beta
"Main Category"
"This is a very long item name that should wrap to the next line when rendered in the treemap diagram": 50
"Short item": 20
`,
{}
);
});
it('5: should render with a forest theme', () => {
imgSnapshotTest(
`---
config:
theme: forest
---
treemap-beta
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
it('6: should handle multiple levels of nesting', () => {
imgSnapshotTest(
`treemap-beta
"Level 1"
"Level 2A"
"Level 3A": 10
"Level 3B": 15
"Level 2B"
"Level 3C": 20
"Level 3D"
"Level 4A": 5
"Level 4B": 5
`,
{}
);
});
it('7: should handle classDef with multiple styles', () => {
imgSnapshotTest(
`treemap-beta
"Main"
"A": 20
"B":::important
"B1": 10
"B2": 15
"C": 5:::secondary
classDef important fill:#f96,stroke:#333,stroke-width:2px;
classDef secondary fill:#6cf,stroke:#333,stroke-dasharray:5 5;
`,
{}
);
});
it('8: should handle dollar value formatting with thousands separator', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: "$0,0"
---
treemap
"Budget"
"Operations"
"Salaries": 700000
"Equipment": 200000
"Supplies": 100000
"Marketing"
"Advertising": 400000
"Events": 100000
`,
{}
);
});
it('8a: should handle percentage formatting', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: ".1%"
---
treemap-beta
"Market Share"
"Company A": 0.35
"Company B": 0.25
"Company C": 0.15
"Others": 0.25
`,
{}
);
});
it('8b: should handle decimal formatting', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: ".2f"
---
treemap-beta
"Metrics"
"Conversion Rate": 0.0567
"Bounce Rate": 0.6723
"Click-through Rate": 0.1289
"Engagement": 0.4521
`,
{}
);
});
it('8c: should handle dollar sign with decimal places', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: "$.2f"
---
treemap-beta
"Product Prices"
"Basic": 19.99
"Standard": 49.99
"Premium": 99.99
"Enterprise": 199.99
`,
{}
);
});
it('8d: should handle dollar sign with thousands separator and decimal places', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: "$,.2f"
---
treemap-beta
"Revenue"
"Q1": 1250345.75
"Q2": 1645789.25
"Q3": 1845123.50
"Q4": 2145678.75
`,
{}
);
});
it('8e: should handle simple thousands separator', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: ","
---
treemap-beta
"User Counts"
"Active Users": 1250345
"New Signups": 45789
"Churned": 12350
"Converted": 78975
`,
{}
);
});
it('8f: should handle valueFormat set via directive with dollar and thousands separator', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: "$,.0f"
---
treemap-beta
"Sales by Region"
"North": 1234567
"South": 7654321
"East": 4567890
"West": 9876543
`,
{}
);
});
it('8g: should handle scientific notation format', () => {
imgSnapshotTest(
`---
config:
treemap:
valueFormat: ".2e"
---
treemap-beta
"Scientific Values"
"Value 1": 1234567
"Value 2": 0.0000123
"Value 3": 1000000000
`,
{}
);
});
it('9: should handle a complex example with multiple features', () => {
imgSnapshotTest(
`---
config:
theme: dark
treemap:
valueFormat: "$0,0"
---
treemap-beta
"Company Budget"
"Engineering":::engineering
"Frontend": 300000
"Backend": 400000
"DevOps": 200000
"Marketing":::marketing
"Digital": 250000
"Print": 100000
"Events": 150000
"Sales":::sales
"Direct": 500000
"Channel": 300000
classDef engineering fill:#6b9bc3,stroke:#333;
classDef marketing fill:#c36b9b,stroke:#333;
classDef sales fill:#c3a66b,stroke:#333;
`,
{}
);
});
it('10: should render the example from documentation', () => {
imgSnapshotTest(
`
treemap-beta
"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
classDef class1 fill:red,color:blue,stroke:#FFD600;
`,
{}
);
});
it('11: should handle comments', () => {
imgSnapshotTest(
`
treemap-beta
%% This is a comment
"Category A"
"Item A1": 10
"Item A2": 20
%% Another comment
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
/*
it.skip('12: should render a treemap with title', () => {
imgSnapshotTest(
`
treemap-beta
title Treemap with Title
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
it.skip('13: should render a treemap with accessibility attributes', () => {
imgSnapshotTest(
`
treemap-beta
accTitle: Accessible Treemap Title
accDescr: This is a description of the treemap for accessibility purposes
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
it.skip('14: should render a treemap with title and accessibility attributes', () => {
imgSnapshotTest(
`
treemap
title Treemap with Title and Accessibility
accTitle: Accessible Treemap Title
accDescr: This is a description of the treemap for accessibility purposes
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
`,
{}
);
});
*/
});

View File

@@ -32,8 +32,26 @@
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
rel="stylesheet"
/>
<style>
.recursive-mermaid {
font-family: 'Recursive', sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-variation-settings:
'slnt' 0,
'CASL' 0,
'CRSV' 0.5,
'MONO' 0;
}
body {
/* background: rgb(221, 208, 208); */
/* background: #333; */
@@ -45,7 +63,9 @@
h1 {
color: grey;
}
.mermaid {
border: 1px solid red;
}
.mermaid2 {
display: none;
}
@@ -83,6 +103,11 @@
width: 100%;
}
.class2 {
fill: red;
fill-opacity: 1;
}
/* tspan {
font-size: 6px !important;
} */
@@ -176,6 +201,50 @@
</pre>
<pre id="diagram4" class="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
classDef class1 fill:red,color:blue,stroke:#FFD600;
</pre
>
<pre id="diagram4" class="mermaid2">
---
config:
treemap:
valueFormat: '$0,0'
---
treemap
"Budget"
"Operations"
"Salaries": 7000
"Equipment": 2000
"Supplies": 1000
"Marketing"
"Advertising": 4000
"Events": 1000
</pre
>
<pre id="diagram4" class="mermaid">
treemap
title Accessible Treemap Title
"Category A"
"Item A1": 10
"Item A2": 20
"Category B"
"Item B1": 15
"Item B2": 25
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
layout: tidy-tree
@@ -191,7 +260,7 @@
</pre>
<pre id="diagram4" class="mermaid">
<pre id="diagram4" class="mermaid2">
---
config:
layout: tidy-tree
@@ -683,7 +752,7 @@ kanban
alert('It worked');
}
await mermaid.initialize({
// theme: 'base',
// theme: 'forest',
// theme: 'default',
// theme: 'forest',
// handDrawnSeed: 12,
@@ -694,11 +763,7 @@ kanban
// layout: 'fixed',
// htmlLabels: false,
flowchart: { titleTopMargin: 10 },
// fontFamily: 'Caveat',
// fontFamily: 'Kalam',
// fontFamily: 'courier',
fontFamily: 'arial',
fontFamily: "'Recursive', sans-serif",
sequence: {
actorFontFamily: 'courier',
noteFontFamily: 'courier',

View File

@@ -2,35 +2,35 @@
"durations": [
{
"spec": "cypress/integration/other/configuration.spec.js",
"duration": 6130
"duration": 5672
},
{
"spec": "cypress/integration/other/external-diagrams.spec.js",
"duration": 1974
"duration": 1990
},
{
"spec": "cypress/integration/other/ghsa.spec.js",
"duration": 3308
"duration": 3186
},
{
"spec": "cypress/integration/other/iife.spec.js",
"duration": 1877
"duration": 1948
},
{
"spec": "cypress/integration/other/interaction.spec.js",
"duration": 10902
"duration": 11938
},
{
"spec": "cypress/integration/other/rerender.spec.js",
"duration": 1836
"duration": 1932
},
{
"spec": "cypress/integration/other/xss.spec.js",
"duration": 26467
"duration": 27237
},
{
"spec": "cypress/integration/rendering/appli.spec.js",
"duration": 3129
"duration": 3170
},
{
"spec": "cypress/integration/rendering/architecture.spec.ts",
@@ -38,147 +38,147 @@
},
{
"spec": "cypress/integration/rendering/block.spec.js",
"duration": 16230
"duration": 17390
},
{
"spec": "cypress/integration/rendering/c4.spec.js",
"duration": 5231
"duration": 5296
},
{
"spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
"duration": 38113
"duration": 39004
},
{
"spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
"duration": 36423
"duration": 37653
},
{
"spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
"duration": 22509
"duration": 23278
},
{
"spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
"duration": 34933
"duration": 36645
},
{
"spec": "cypress/integration/rendering/classDiagram.spec.js",
"duration": 14681
"duration": 15418
},
{
"spec": "cypress/integration/rendering/conf-and-directives.spec.js",
"duration": 8877
"duration": 9684
},
{
"spec": "cypress/integration/rendering/current.spec.js",
"duration": 2517
"duration": 2570
},
{
"spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
"duration": 81226
"duration": 84687
},
{
"spec": "cypress/integration/rendering/erDiagram.spec.js",
"duration": 14211
"duration": 14819
},
{
"spec": "cypress/integration/rendering/errorDiagram.spec.js",
"duration": 3355
"duration": 3371
},
{
"spec": "cypress/integration/rendering/flowchart-elk.spec.js",
"duration": 38857
"duration": 39925
},
{
"spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
"duration": 28570
"duration": 34694
},
{
"spec": "cypress/integration/rendering/flowchart-icon.spec.js",
"duration": 6902
"duration": 7137
},
{
"spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
"duration": 23075
"duration": 24740
},
{
"spec": "cypress/integration/rendering/flowchart-v2.spec.js",
"duration": 40514
"duration": 42077
},
{
"spec": "cypress/integration/rendering/flowchart.spec.js",
"duration": 28611
"duration": 30642
},
{
"spec": "cypress/integration/rendering/gantt.spec.js",
"duration": 16605
"duration": 18085
},
{
"spec": "cypress/integration/rendering/gitGraph.spec.js",
"duration": 47636
"duration": 50107
},
{
"spec": "cypress/integration/rendering/iconShape.spec.ts",
"duration": 262219
"duration": 276279
},
{
"spec": "cypress/integration/rendering/imageShape.spec.ts",
"duration": 54111
"duration": 56505
},
{
"spec": "cypress/integration/rendering/info.spec.ts",
"duration": 3006
"duration": 3036
},
{
"spec": "cypress/integration/rendering/journey.spec.js",
"duration": 6858
"duration": 6889
},
{
"spec": "cypress/integration/rendering/kanban.spec.ts",
"duration": 7281
"duration": 7353
},
{
"spec": "cypress/integration/rendering/katex.spec.js",
"duration": 3579
"duration": 3580
},
{
"spec": "cypress/integration/rendering/marker_unique_id.spec.js",
"duration": 2448
"duration": 2508
},
{
"spec": "cypress/integration/rendering/mindmap.spec.ts",
"duration": 10618
"duration": 10939
},
{
"spec": "cypress/integration/rendering/newShapes.spec.ts",
"duration": 140874
"duration": 149102
},
{
"spec": "cypress/integration/rendering/oldShapes.spec.ts",
"duration": 108015
"duration": 113987
},
{
"spec": "cypress/integration/rendering/packet.spec.ts",
"duration": 4241
"duration": 4060
},
{
"spec": "cypress/integration/rendering/pie.spec.ts",
"duration": 5645
"duration": 5715
},
{
"spec": "cypress/integration/rendering/quadrantChart.spec.js",
"duration": 8524
"duration": 8945
},
{
"spec": "cypress/integration/rendering/radar.spec.js",
"duration": 5203
"duration": 5337
},
{
"spec": "cypress/integration/rendering/requirement.spec.js",
"duration": 2635
"duration": 2643
},
{
"spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
"duration": 50512
"duration": 52072
},
{
"spec": "cypress/integration/rendering/sankey.spec.ts",
@@ -186,31 +186,35 @@
},
{
"spec": "cypress/integration/rendering/sequencediagram.spec.js",
"duration": 34559
"duration": 35721
},
{
"spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
"duration": 24421
"duration": 26030
},
{
"spec": "cypress/integration/rendering/stateDiagram.spec.js",
"duration": 15316
"duration": 16333
},
{
"spec": "cypress/integration/rendering/theme.spec.js",
"duration": 28240
"duration": 29287
},
{
"spec": "cypress/integration/rendering/timeline.spec.ts",
"duration": 6808
"duration": 8491
},
{
"spec": "cypress/integration/rendering/treemap.spec.ts",
"duration": 12291
},
{
"spec": "cypress/integration/rendering/xyChart.spec.js",
"duration": 19359
"duration": 20651
},
{
"spec": "cypress/integration/rendering/zenuml.spec.js",
"duration": 3164
"duration": 3218
}
]
}